<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.partApplyCode }}
          </a-descriptions-item>
          <a-descriptions-item :label="$t('APPLICATION_FORM_NAME')">
            {{ info.partApplyName }}
          </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('COMPANY_CATEGORY')">
            {{ info.companyCategory }}
          </a-descriptions-item>
          <a-descriptions-item :label="$t('COST_CENTER')">
            {{ info.costCenterName }}
          </a-descriptions-item>
          <a-descriptions-item :label="$t('ORDER_NUMBER')">
            {{ info.innerOrder }}
          </a-descriptions-item>
          <a-descriptions-item :label="$t('SAP_FACTORY')">
            {{ info.sapFactory }}
          </a-descriptions-item>
          <a-descriptions-item :label="$t('PROFIT')">
            {{ info.profit }}
          </a-descriptions-item>
          <a-descriptions-item :label="$t('RECEIVE_USER')">
            {{ info.receiveUser }}
          </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.partApplyMatBPOList"
          :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_PARTS_LIST"),
          ellipsis: true,
          sorter: false,
          width: 200,
        },
        {
          dataIndex: "applyNum", // 申请数量
          width: 100,
          sorter: false,
          title: () => this.$t("RECEIVED_QUANTITY"),
        },
        {
          dataIndex: "matTypeName", // 备件类型
          width: 180,
          ellipsis: true,
          title: () => this.$t("SPARE_PART_TYPE"),
        },
        {
          dataIndex: "matSpec", // 规格型号
          title: () => this.$t("EQP_MODEL"),
          ellipsis: true,
          width: 200,
        },
        {
          dataIndex: "matUnit", // 单位
          title: () => this.$t("TIME_UNIT"),
          width: 80,
          sorter: false,
          ellipsis: true,
        },
        {
          dataIndex: "lgpbe", // 储位
          width: 100,
          sorter: false,
          title: () => this.$t("WAREHOUSE_LOCATION"),
        },
        {
          dataIndex: "prTypeName", // 产品类型
          width: 100,
          sorter: false,
          title: () => this.$t("PR_TYPE"),
        },
        {
          dataIndex: "eqpName", // 领用设备
          width: 100,
          sorter: false,
          title: () => this.$t("RECEIVING_EQUIPMENT"),
        },
      ]);
    },
  },
};
</script>
