<template>
  <div>
    <a-collapse
      v-model="activeKeyA"
      expand-icon-position="right"
      class="collapse-header-divide"
    >
      <a-collapse-panel key="a" :header="$t('BASE_INFO')">
        <a-descriptions>
          <a-descriptions-item :label="$t('APPLICATION_FORM_CODE')">
            {{ info.code }}
          </a-descriptions-item>
          <a-descriptions-item :label="$t('APPLICATION_FORM_NAME')">
            {{ info.name }}
          </a-descriptions-item>
          <a-descriptions-item :label="$t('APPLY_DEPT')">
            {{ info.applyDeptName }}
          </a-descriptions-item>
          <a-descriptions-item :label="$t('APPLICANT')">
            {{ info.applyUserName }}
          </a-descriptions-item>
          <a-descriptions-item :label="$t('SCRAP_WAREHOUSE')">
            {{ info.toLocation }}
          </a-descriptions-item>
        </a-descriptions>
      </a-collapse-panel>
    </a-collapse>
    <a-collapse
      v-model="activeKeyB"
      expand-icon-position="right"
      class="collapse-header-divide"
    >
      <a-collapse-panel key="b" :header="$t('EQUIPMENT_LIST')">
        <MomTable
          ref="MomTable"
          row-key="id"
          :columns="tableColumns"
          :data-source="info.detailList"
          :mega-extend="{
            rowAction: false,
          }"
          :pagination="false"
          :show-util-operator="false"
        >
          <template slot="img" slot-scope="text, record">
            <img class="eqp_picture" :src="record.img || defaultImg" alt="" />
          </template>
        </MomTable>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>

<script>
export default {
  props: {
    // 需要展示的key
    info: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      activeKeyA: "a",
      activeKeyB: "b",
      loading: false, // 表格loading
      confirmLoading: false,
      // eslint-disable-next-line global-require
      defaultImg: require("@/assets/img/eqp_01.png"),
      dataSource: [],
    };
  },
  computed: {
    tableColumns() {
      return this.$observable("tableColumns", [
        {
          dataIndex: "img",
          width: 100,
          sorter: false,
          ellipsis: true,
          scopedSlots: { customRender: "img" },
          title: () => this.$t("CORE_PICTURE"), // 图片
        },
        {
          dataIndex: "matCode", // 备件料号
          title: () => this.$t("SPARE_PART_ITEM_NO"),
          ellipsis: true,
          width: 200,
        },
        {
          dataIndex: "matName", // 备件名称
          title: () => this.$t("SPARE_PART_NAME"),
          sorter: false,
          ellipsis: true,
          width: 180,
        },
        {
          dataIndex: "batchCode", // 批次号
          sorter: false,
          title: () => this.$t("BATCH_NUMBER"),
          ellipsis: true,
          width: 180,
        },
        {
          dataIndex: "scrapNum", // 数
          sorter: false,
          title: () => this.$t("SCRAP_QUANTITY"),
          ellipsis: true,
          width: 100,
        },
        {
          dataIndex: "sn", // 条形码
          sorter: false,
          title: () => this.$t("BAR_CODE"),
          ellipsis: true,
          width: 300,
        },
        {
          dataIndex: "matTypeName", // 备件类型
          sorter: false,
          title: () => this.$t("TYPE_OF_SPARE_PARTS"),
          ellipsis: true,
          width: 180,
        },
        {
          dataIndex: "matSpec", // 备件规格
          sorter: false,
          title: () => this.$t("SPARE_PARTS_SPECIFICATION"),
          ellipsis: true,
          width: 180,
        },
        {
          dataIndex: "matUnit", // 单位
          sorter: false,
          ellipsis: true,
          title: () => this.$t("TIME_UNIT"),
          scopedSlots: { customRender: "matUnit" },
        },
        {
          dataIndex: "recentUnbindTime", // 最近下机时间
          title: () => this.$t("LATEST_DISEMBARKATION_TIME"),
          sorter: false,
          ellipsis: true,
        },
      ]);
    },
  },
};
</script>
