<template>
  <div class="page-wrapper">
    <breadcrumb v-if="!multiPage" :breadcrumb-data="breadcrumbData" />
    <div class="page-container">
      <a-form-model
        ref="ruleForm"
        :model="detailData"
        :label-col="{ span: 7 }"
        :wrapper-col="{ span: 17 }"
      >
        <a-collapse
          v-model="activeKey"
          expand-icon-position="right"
          class="collapse-header-divide"
        >
          <a-collapse-panel key="a" :header="$t('BASE_INFO')">
            <div class="flex justify-between">
              <div class="eqp_con pl-8">
                <a-descriptions>
                  <a-descriptions-item
                    v-for="(item, index) in detail"
                    :key="index"
                    :label="`${$t(item.label)}`"
                    >{{
                      item.list
                        ? getFormatValue(
                            item.list,
                            detailData[item.key],
                            item.valKey,
                            item.labelKey
                          )
                        : detailData[item.key] || "--"
                    }}</a-descriptions-item
                  >
                </a-descriptions>
              </div>
            </div>
          </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="itemName"
              :columns="columns"
              :data-source="eqpList"
              :mega-extend="{
                rowAction: false,
              }"
              :pagination="false"
              class="ml-8"
            >
              <template slot="imgUrl" slot-scope="text, record">
                <img
                  class="eqp_picture"
                  :src="record.imgUrl || defaultImg"
                  alt=""
                />
              </template>
              <template slot="assetsStatus" slot-scope="text, record">
                <span class="status-box" :class="text">{{
                  getAttrValue(assetsStatusList, record.assetsStatus)
                }}</span>
              </template>
            </MomTable>
          </a-collapse-panel>
        </a-collapse>
        <!-- 扩展字段 -->
        {{
          fieldExRenderFn($createElement, {
            layout: "grid",
            itemSpan: 8,
            disabled: true,
          })
        }}
        <slot name="RenderFieldExtendDom"></slot>
      </a-form-model>
    </div>
    <div class="page-bottom-op">
      <a-button @click="handleCancel">
        <i class="iconfont icon-quxiao"></i>
        {{ $t("BACK") }}
      </a-button>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import ApiConstant from "@/api/ApiConstant";
import FieldExtendMixin from "@/mixins/fieldExtend";
import { fetchFileUrl } from "@/utils/file";
import breadcrumb from "@/components/breadcrumb";

export default {
  components: {
    breadcrumb,
  },
  mixins: [FieldExtendMixin],
  data() {
    return {
      breadcrumbData: [
        {
          name: this.$t("EQP_BORROW"),
          url: "/eam/account_management/equipment_borrow",
        },
        { name: this.$t("VIEW"), url: "" },
      ],
      tableNameList: [
        {
          key: "epm_eqp_borrow",
          tab: "设备借用",
        },
      ],
      dataAttr: {
        form: "detailData",
      },
      activeKey: "a",
      activeKeyB: "b",
      detailData: {},
      // eslint-disable-next-line
      defaultImg: require("@/assets/img/eqp_01.png"),
      detail: [
        { label: "CODE", key: "code" },
        { label: "TITLE", key: "name" },
        { label: "STATUS", key: "checkStatusName" },
        {
          label: "TARGET_PLANT",
          key: "toSiteCode",
          list: "sitePermission",
          valKey: "siteCode",
          labelKey: "siteName",
        },
        {
          label: "TRANSFER_TARGET_POSITION",
          key: "toLocation",
        },
        {
          label: "RECEIVER_DEPT",
          key: "toDeptName",
        },
        { label: "RECIPIENT", key: "toUserName" },
        { label: "LENDING_DEPARTMENT", key: "fromDeptName" }, // 借出部门
        {
          label: "BORROW_FACTORY", // 借出厂区
          key: "fromSiteCode",
          list: "sitePermission",
          valKey: "siteCode",
          labelKey: "siteName",
        },
        { label: "LENDER", key: "fromUserName" }, // 借出人
        { label: "AUDIT_PROCESS", key: "checkProcessName" },
        { label: "REMARK", key: "remark" },
      ],
      eqpList: [],
      fieldExtendList: [], // 字段扩展列表
      assetsStatusList: [],
      defaultList: [
        {
          dataIndex: "imgUrl",
          width: 100,
          sorter: false,
          ellipsis: true,
          scopedSlots: { customRender: "imgUrl" },
          title: () => this.$t("CORE_PICTURE"), // 图片
        },
        {
          dataIndex: "eqpCode", // 设备编码
          sorter: false,
          ellipsis: true,
          title: () => this.$t("EPMS_EQP_CODE"),
        },
        {
          dataIndex: "eqpName", // 设备名称
          title: () => this.$t("EQP_NAME"),
          sorter: false,
          ellipsis: true,
        },
        {
          dataIndex: "eqpTypeName", // 设备类型
          align: "left",
          sorter: false,
          ellipsis: true,
          width: 180,
          title: () => this.$t("EQP_TYPE"),
        },
        {
          dataIndex: "assetsCode", // 资产编码
          sorter: false,
          ellipsis: true,
          title: () => this.$t("EPMS_ASSETS_CODE"),
        },
        {
          dataIndex: "assetsStatus", // 资产状态
          sorter: false,
          ellipsis: true,
          width: 180,
          title: () => this.$t("ASSETS_STATUS"),
          scopedSlots: { customRender: "assetsStatus" },
        },
        {
          dataIndex: "eqpModel", // 规格型号
          sorter: false,
          ellipsis: true,
          width: 180,
          title: () => this.$t("EQP_MODEL"),
        },
        {
          dataIndex: "ownerName", // 设备负责人
          sorter: false,
          ellipsis: true,
          title: () => this.$t("LEADER_NAME"),
        },
        {
          dataIndex: "location", // 位置
          sorter: false,
          ellipsis: true,
          width: 360,
          title: () => this.$t("CURRENT_LOCATION"),
        },
      ],
      columnsList: [],
      sitePermission: [],
    };
  },
  computed: {
    ...mapState("setting", ["multiPage"]),
    ...mapState({}),
    columns() {
      return [...this.defaultList, ...this.columnsList];
    },
  },
  watch: {},
  mounted() {
    const { id } = this.$route.query;
    if (id) {
      this.$axios
        .get(
          `${ApiConstant.PREFIX_CORE}/api/epm/eam/eqp-borrow/get-by-id/${id}`
        )
        .then((detailRes) => {
          /* eslint-enable */
          const { eqpBorrowItemBPOList } = {
            ...detailRes.data?.data,
          };
          this.detailData = { ...detailRes.data?.data };
          if (eqpBorrowItemBPOList && eqpBorrowItemBPOList.length > 0) {
            eqpBorrowItemBPOList.map((item, index) => {
              if (item.imgUrl) {
                eqpBorrowItemBPOList[index].imgUrl = fetchFileUrl(
                  item.imgUrl,
                  this
                );
              }
              return item;
            });
          }
          this.eqpList = eqpBorrowItemBPOList;
          this.queryFieldExtend().then(() => {
            // this.$refs.fieldAuthRef.init();
          });
        });
    } else {
      this.queryFieldExtend().then(() => {
        // this.$refs.fieldAuthRef.init();
      });
    }
    // 初始化数据
    this.init();
  },
  methods: {
    getFormatValue(listName, value, valKey, labelKey) {
      const val = this.getAttrValue(this[listName], value, valKey, labelKey);
      return val;
    },
    // 初始化数据
    init() {
      return Promise.all([
        this.$axios.get(
          `${ApiConstant.PREFIX_CORE}/api/sys/dict-data/DIC:EPM:ASSETS_STATUS`
        ), // 资产状态
        this.$axios.get(`${ApiConstant.PREFIX_CORE}/api/mdm/fac-site/list`),
      ]).then(([assetsStatusRes, siteRes]) => {
        this.assetsStatusList = assetsStatusRes.data.data;
        this.sitePermission = siteRes.data?.data;
      });
    },
    // 监听取消按钮点击事件
    handleCancel() {
      this.$store.dispatch("tagsView/jumpBeforeView", {
        to: {
          path: "/eam/account_management/equipment_borrow",
        },
        vm: this,
      });
    },
    // 页面埋点
    handleFuncUseRate(data) {
      this.$axios
        .put(`${ApiConstant.PREFIX_CORE}/api/epm/eam/use`, data)
        .then(() => {});
    },
  },
};
</script>
<style lang="less" scoped>
@import "@/assets/css/fault_repair.less";
/deep/ .mega-design-business-table .mega-design-pro-table {
  padding: 0 !important;
  margin-bottom: 24px;
}
/deep/ .ant-form-item-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eap_img {
  width: 254px;
  height: 166px;
  img {
    width: 100%;
    height: 100%;
  }
}
.eqp_con {
  width: 100%;
}
.eqp_picture {
  width: 50px;
  height: 50px;
}
</style>
