<template lang="pug">
  div.comp
    el-dialog(:title="title" :visible.sync="dialogTableVisible" top="18vh")
      el-table(:data="tableData")
        el-table-column(prop="label" label="字段" align="center")
        el-table-column(prop="value" label="内容" align="center")
</template>

<script>
export default {
  name: "detail-table",
  props: {
    isShow: Boolean,
    title: {
      type: String,
      default: "表格明细"
    },
    // 对象类型展开其明细
    detail: Object,
    header: Array
  },
  data() {
    return {
      tableData: []
    };
  },
  computed: {
    dialogTableVisible: {
      set(val) {
        this.$emit("update:isShow", val);
      },
      get() {
        return this.isShow;
      }
    }
  },
  watch: {},
  filters: {},
  created() {
    const detail = {
      created_at: "2020-06-15 16:40:49",
      finance_code: "028",
      id: "d_1101",
      item_code: "",
      item_name: "口服液",
      pk_measdoc: "018",
      specification: "2",
      updated_at: "2020-06-15 16:40:49"
    };

    const header = [
      {
        header: "编号",
        field: "id"
      },
      {
        header: "名称",
        field: "item_name"
      },
      {
        header: "-",
        field: "item_name"
      },
      {
        header: "创建时间",
        field: "updated_at"
      },
      {
        header: "更新时间",
        field: "created_at"
      }
    ];

    this.tableData = header.map(item => {
      return {
        label: item.header,
        value: detail[item.field]
      };
    });
  },
  mounted() {},
  methods: {}
};
</script>

<style scoped lang="stylus"></style>
