<template>
  <el-dialog @opened="dialogOpen"
             title='明细'
             :visible.sync="dialogVisible"
             @closed="dialogClose"
             width="95%"
             :append-to-body='true'
             :close-on-click-modal='false'>
    <el-table :data="tableData"
              :header-row-style="setHeaderRowStyle"
              :row-style="setRowStyle"
              style="width: 100%">
      <el-table-column v-for="(prop,index) in tableHeader"
                       :prop="prop"
                       :label="prop"
                       :key="index">
      </el-table-column>
    </el-table>
  </el-dialog>
</template>
<script>
export default {
  name: 'tabelDetail',
  props: {
    value: Boolean,
    tableData: {
      type: Array,
      default() {
        return []
      }
    },
    cellDetailStyle: {

    }
  },
  watch: {
    value(val) {
      this.dialogVisible = val
    },
    dialogVisible(val) {
      this.$emit('input', val)
    }
  },
  data() {
    return {
      dialogVisible: false,
      tableHeader: []
    }
  },
  methods: {
    dialogOpen() {
      if (!this.tableData.length) return
      this.tableHeader = Object.keys(this.tableData[0])
    },
    setHeaderRowStyle() {
      const { headerRowStyle } = this.cellDetailStyle
      return headerRowStyle || {}
    },
    setRowStyle() {
      const { rowStyle } = this.cellDetailStyle
      return rowStyle || {}
    },
    dialogClose() { }
  }
}
</script>