<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('RECEIVER_DEPT')">
            {{ info.toDeptName }}
          </a-descriptions-item>
          <a-descriptions-item :label="$t('RECIPIENT')">
            {{ info.toUserName }}
          </a-descriptions-item>
          <a-descriptions-item :label="$t('TARGET_PLANT')">
            {{ info.toSiteName }}
          </a-descriptions-item>
          <a-descriptions-item :label="$t('TRANSFER_TARGET_POSITION')">
            {{ 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.eqpTransferItemBPOList"
          :mega-extend="{
            rowAction: false,
          }"
          :pagination="false"
          :show-util-operator="false"
        >
          <template slot="imgUrl" slot-scope="text, record">
            <img
              class="eqp_picture"
              :src="record.imgUrl || 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: "imgUrl",
          width: 100,
          sorter: false,
          ellipsis: true,
          scopedSlots: { customRender: "imgUrl" },
          title: () => this.$t("CORE_PICTURE"), // 图片
        },
        {
          dataIndex: "eqpCode",
          width: 180,
          ellipsis: true,
          scopedSlots: { customRender: "eqpCode" },
          title: () => this.$t("EPMS_EQP_CODE"), // 设备编码
        },
        {
          dataIndex: "eqpName",
          width: 180,
          sorter: false,
          ellipsis: true,
          title: () => this.$t("EQUIPMENT_NAME"), // 设备名称
        },
        {
          dataIndex: "eqpTypeName",
          width: 180,
          sorter: false,
          ellipsis: true,
          title: () => this.$t("EQP_TYPE"), // 设备类型
        },
        {
          dataIndex: "assetsCode",
          width: 180,
          ellipsis: true,
          title: () => this.$t("EPMS_ASSETS_CODE"), // 资产编码
        },
        {
          dataIndex: "location",
          width: 300,
          ellipsis: true,
          title: () => this.$t("CURRENT_LOCATION"), // 当前位置
        },
      ]);
    },
  },
};
</script>
