<template>
  <ele-modal
    :title="title"
    :maxable="true"
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    :visible.sync="detailsVisible"
    :close-on-click-modal="false"
    width="35%"
    append-to-body
    @close="handleClose"
  >
    <ele-pro-table
      v-if="title === '物品清单'"
      style="min-height: 400px"
      ref="fileTable"
      :columns="columns"
      :datasource="list"
    >
    </ele-pro-table>
    <ele-pro-table
      v-else
      style="min-height: 400px"
      ref="fileTable"
      :columns="columns1"
      :datasource="list"
    >
    </ele-pro-table>
  </ele-modal>
</template>
<script>
  export default {
    props: {
      list: {
        type: Array,
        default: () => []
      },
      title: {
        type: String,
        default: ''
      },
      detailsVisible: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      list: {
        hanlder(newVal) {
          this.list = newVal;
        }
      }
    },
    data() {
      return {
        // 物品列表
        columns: [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            label: '编码',
            prop: 'code',
            minWidth: 120,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            label: '名称',
            prop: 'name',
            minWidth: 120,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            label: '规格',
            prop: 'specification',
            minWidth: 200,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            label: '型号',
            prop: 'modelType',
            minWidth: 120,
            align: 'center',
            showOverflowTooltip: true
          }
        ],
        // 注意事项
        columns1: [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            label: '排序',
            prop: 'sort',
            width: 55,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            label: '注意事项',
            prop: 'content',
            minWidth: 300,
            align: 'center',
            showOverflowTooltip: true
          }
        ]
      };
    },
    methods: {
      handleClose() {
        this.$emit('close');
      }
    }
  };
</script>
