<template>
  <div class="page-wrapper">
    <breadcrumb v-if="!multiPage" :breadcrumb-data="breadcrumbData" />
    <a-collapse
      v-model="activeKey"
      expand-icon-position="right"
      class="collapse-header-divide"
    >
      <a-collapse-panel key="a" :header="$t('EQUIPMENT_INFORMATION')">
        <a-descriptions>
          <!--设备编码-->
          <a-descriptions-item :label="`${$t('EPMS_EQP_CODE')}`">{{
            orderData.eqpCurrentDetail.eqpCode
          }}</a-descriptions-item>
          <!--设备名称-->
          <a-descriptions-item :label="`${$t('EQP_NAME')}`">{{
            orderData.eqpCurrentDetail.eqpName
          }}</a-descriptions-item>
          <!--生产车间-->
          <a-descriptions-item :label="`${$t('PRODUCTION_WORKSHOP')}`">{{
            orderData.eqpCurrentDetail.fabName
          }}</a-descriptions-item>
          <!--生产区域-->
          <a-descriptions-item :label="`${$t('PRODUCTION_AREA')}`">{{
            orderData.eqpCurrentDetail.areaName
          }}</a-descriptions-item>
          <!--生产线-->
          <a-descriptions-item :label="`${$t('PRODUCTION_LINE')}`">{{
            orderData.eqpCurrentDetail.lineName
          }}</a-descriptions-item>
          <!--设备状态-->
          <a-descriptions-item :label="`${$t('EQP_STATUS')}`">
            <div style="display: flex; align-items: center">
              <div
                class="statusColor"
                :style="{
                  width: '14px',
                  height: '14px',
                  background: orderData.eqpCurrentDetail.statusColor,
                }"
              ></div>
              <div style="margin-left: 10px">
                {{ orderData.eqpCurrentDetail.statusName }}
              </div>
            </div>
          </a-descriptions-item>
        </a-descriptions>
      </a-collapse-panel>
    </a-collapse>
    <!-- 叫修工单 开始 -->
    <CallCard
      :repair-ticket-detail="orderData.repairTicketDetail"
      :error-level-list="errorLevelList"
      @returnData="handleReturnData"
    ></CallCard>
    <!-- 叫修工单 结束 -->
    <!-- 转单工单 开始 -->
    <TransferOrderCard
      :repair-transfer-list="orderData.repairTransferList"
      :error-level-list="errorLevelList"
    ></TransferOrderCard>
    <!-- 转单工单 结束 -->
    <!-- 维修工单 开始 -->
    <RepairCard
      v-if="orderData.repairResultDetail"
      :repair-result-list="orderData.repairResultDetail.repairResultList"
    ></RepairCard>
    <!-- 维修工单 结束 -->
  </div>
</template>

<script>
import { mapState } from "vuex";
import ApiConstant from "@/api/ApiConstant";
import CallCard from "@/components/callOrderDetail/callCard";
import RepairCard from "@/components/callOrderDetail/repairCard";
import TransferOrderCard from "@/components/callOrderDetail/transferOrderCard";
import breadcrumb from "@/components/breadcrumb";

export default {
  components: { CallCard, RepairCard, TransferOrderCard, breadcrumb },
  data() {
    return {
      breadcrumbData: [
        {
          name: this.$t("REPAIR_RECORD"),
          url: "/eam/repair_management/repair_record",
        },
        { name: this.$t("MAINTENANCE_RECORD_VIEW"), url: "" },
      ],
      activeKey: "a",
      activeKeyB: "b",
      activeKeyC: "c",
      activeKeyD: "d",
      activeKeyE: "e",
      confirmLoading: false,
      dataSource: [],
      orderData: {
        eqpCurrentDetail: {},
        repairTicketDetail: {
          errorAppearanceList: [],
          imgUrlList: [],
        },
        repairResultDetail: {
          repairResultList: [],
        },
        repairTransferList: [],
      },
      errorLevelList: [], // 故障等级列表
    };
  },
  computed: {
    ...mapState("setting", ["multiPage"]),
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const { id } = this.$route.query;
      return Promise.all([
        this.$axios.get(
          `${ApiConstant.PREFIX_CORE}/api/epm/erm/repair-ticket/detail/${id}`
        ), // 设备详情
        this.$axios.get(
          `${ApiConstant.PREFIX_CORE}/api/sys/dict-data/DIC:EPM:FAULT_LEVEL`
        ), // 故障等级
      ]).then(([detailoRes, levelRes]) => {
        this.orderData = detailoRes.data?.data;
        this.errorLevelList = levelRes.data?.data;
      });
    },
    formatData(data, status) {
      const result = data.find((item) => item.value === status.toString());
      return result ? result.label : "";
    },
    handleReturnData() {
      this.init();
    },
    handleBack() {
      this.$store.dispatch("tagsView/jumpBeforeView", {
        to: {
          path: "/eam/repair_management/fault_repair/result_confirm",
        },
        vm: this,
      });
    },
  },
};
</script>
<style lang="less" scoped>
.line {
  width: 4px;
  height: 16px;
  background: linear-gradient(180deg, #01c9fe, #0ea9d2);
  margin-right: 12px;
}
/deep/ .mega-design-business-table .mega-design-pro-table {
  padding: 0 !important;
  margin-bottom: 24px;
}

.repair_order_box {
  background: #f5f7fa;
  border-radius: 6px;
  padding: 0 24px;
  position: relative;
  .repair_order_item {
    padding: 24px 0;
    &:nth-child(3) {
      width: 100%;
    }
  }
}
</style>
