<template>
  <div>
    <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')">
        <div class="flex justify-between">
          <div class="eap_img mx-auto">
            <img
              :src="
                detailData
                  ? detailData.imgUrl
                    ? detailData.imgUrl
                    : defaultImg
                  : defaultImg
              "
              alt=""
            />
          </div>
          <div class="eqp_con">
            <a-descriptions>
              <a-descriptions-item
                v-for="(item, index) in detail"
                :key="index"
                :label="`${$t(item.label)}`"
                >{{
                  item.list
                    ? formatData(item.list, detailData[item.key])
                    : 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('APP_EQUIPMENT_HISTORY')">
        <a-tabs
          default-active-key="tabActiveKey"
          :animated="false"
          @change="handleTabChange"
        >
          <a-tab-pane key="a" :tab="$t('MAINTENANCE_RECORD')">
            <MomTable
              ref="MomTable"
              row-key="id"
              :query-param="queryParam"
              :query-param-item="queryParamItem"
              :columns="columns"
              :data-source="dataSource"
              :total="total"
              :page.sync="page"
              :show-util-operator="false"
              :mega-extend="{ rowAction: false }"
              @search="search"
              @reset="handleReset"
            >
              <div slot="status" slot-scope="text, record">
                <span>{{ getAttrValue(orderStatusList, record.status) }}</span>
              </div>
            </MomTable>
          </a-tab-pane>
          <a-tab-pane key="b" :tab="$t('CHECK_RECORD')" force-render>
            <div class="flex">
              <div class="detail_left">
                <div class="pie_chart_top flex">
                  <div class="pie_chart_title">
                    {{ `${$t("TODO")}${$t("SITUATION")}` }}
                  </div>
                  <div class="pie_chart_item">
                    <pie-chart :id="pieChartIdA" :pie-data="pieDataA" />
                  </div>
                  <div class="pie_chart_item">
                    <pie-chart :id="pieChartIdB" :pie-data="pieDataB" />
                  </div>
                </div>
                <div class="pie_chart_bot">
                  <div class="pie_chart_title">
                    {{ `${$t("CHECK_RESULT")}${$t("STATISTICS")}` }}
                  </div>
                  <pie-chart
                    :id="pieChartIdC"
                    :pie-data="pieDataC"
                    :pie-radius="pieRadius"
                  />
                </div>
              </div>
              <div class="detail_right">
                <MomTable
                  ref="MomTableTask"
                  row-key="id"
                  :action-buttons="actionButtons"
                  :query-param="queryForm"
                  :query-param-item="queryFormItem"
                  :columns="columnsB"
                  :data-source="dataSourceB"
                  :total="totalB"
                  :page.sync="page"
                  :show-util-operator="false"
                  :mega-extend="{ rowAction: false }"
                  @search="searchTask"
                  @reset="handleResetTask"
                >
                  <div slot="status" slot-scope="text, record">
                    <span>{{ getAttrValue(statusList, record.status) }}</span>
                  </div>
                  <div slot="resultValue" slot-scope="text, record">
                    <span
                      class="result-value"
                      :class="{ isError: text === 'ERROR' }"
                    >
                      {{ getAttrValue(resultList, record.resultValue) }}
                    </span>
                  </div>
                </MomTable>
              </div>
            </div>
          </a-tab-pane>
          <a-tab-pane key="c" :tab="$t('EPMS_MAINTENANCE_RECORD')" force-render>
            <div class="flex">
              <div class="detail_left">
                <div class="pie_chart_top flex">
                  <div class="pie_chart_title">
                    {{ `${$t("TODO")}${$t("SITUATION")}` }}
                  </div>
                  <div class="pie_chart_item">
                    <pie-chart :id="pmPieChartIdA" :pie-data="pieDataA" />
                  </div>
                  <div class="pie_chart_item">
                    <pie-chart :id="pmPieChartIdB" :pie-data="pieDataB" />
                  </div>
                </div>
                <div class="pie_chart_bot">
                  <div class="pie_chart_title">
                    {{ `${$t("CHECK_RESULT")}${$t("STATISTICS")}` }}
                  </div>
                  <pie-chart
                    :id="pmPieChartIdC"
                    :pie-data="pieDataC"
                    :pie-radius="pieRadius"
                  />
                </div>
              </div>
              <div class="detail_right">
                <MomTable
                  ref="MomTablePmTask"
                  row-key="id"
                  :action-buttons="actionButtons"
                  :query-param="queryForm"
                  :query-param-item="queryFormItem"
                  :columns="columnsC"
                  :data-source="dataSourceB"
                  :total="totalB"
                  :page.sync="page"
                  :show-util-operator="false"
                  :mega-extend="{ rowAction: false }"
                  @search="searchPmTask"
                  @reset="handleResetPmTask"
                >
                  <div slot="status" slot-scope="text, record">
                    <span>{{ getAttrValue(statusList, record.status) }}</span>
                  </div>
                  <div slot="resultValue" slot-scope="text, record">
                    <span
                      class="result-value"
                      :class="{ isError: text === 'ERROR' }"
                    >
                      {{ getAttrValue(resultList, record.resultValue) }}
                    </span>
                  </div>
                </MomTable>
              </div>
            </div>
          </a-tab-pane>
          <a-tab-pane key="d" :tab="$t('ON_BOARD_SPARE_PARTS')">
            <MomTable
              ref="MomTableParts"
              row-key="id"
              :query-param="queryParamD"
              :query-param-item="queryParamItemD"
              :columns="columnsD"
              :data-source="dataSourceD"
              :total="totalD"
              :page.sync="page"
              :show-util-operator="false"
              :mega-extend="{ rowAction: false }"
              :auto-adaptive-width="false"
              @search="searchParts"
              @reset="handleResetParts"
            >
              <template slot="imgUrl" slot-scope="text, record">
                <img
                  class="eqp_picture"
                  :src="record.imgUrl || defaultImg"
                  alt=""
                />
              </template>
              <div slot="remainLife" slot-scope="text, record">
                <div class="progress-box">
                  <div class="progress-bg">
                    <div
                      class="progress-view"
                      :style="{
                        width:
                          (record.remainLife / record.initLife) * 220 + 'px',
                        backgroundColor:
                          record.remainLife / record.initLife <
                          record.lifeWarnLimit / 100
                            ? '#FF0000'
                            : '#07B985',
                      }"
                    ></div>
                  </div>
                  <div class="progress-text">
                    {{
                      record.remainLife
                        ? `${record.remainLife}${
                            record.unit ? record.unit : "次"
                          }`
                        : ""
                    }}
                  </div>
                </div>
              </div>
              <div slot="sn" slot-scope="text, record">
                <div class="flex flex-col justify-center">
                  <vue-barcode
                    v-if="record.sn"
                    :value="record.sn"
                    :display-value="false"
                    :width="1.5"
                    :height="24"
                    tag="svg"
                  >
                  </vue-barcode>
                  <div class="flex justify-center" style="letter-spacing: 3px">
                    {{ record.sn }}
                  </div>
                </div>
              </div>
            </MomTable>
          </a-tab-pane>
          <a-tab-pane key="e" :tab="$t('TECHNICAL_DATA')">
            <MultipleUploadFile v-model="techFileUrl" :disabled="true" />
          </a-tab-pane>
        </a-tabs>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>

<script>
import { mapState } from "vuex";
import moment from "moment";
import VueBarcode from "vue-barcode";
import ApiConstant from "@/api/ApiConstant";
import FieldExtendMixin from "@/mixins/fieldExtend";
import pieChart from "@/components/epms/pieChart/index.vue";
import breadcrumb from "@/components/breadcrumb";
import { fetchFileUrl } from "@/utils/file";
import MultipleUploadFile from "@/components/uploadFile/multipleUpload";

export default {
  components: { breadcrumb, pieChart, VueBarcode, MultipleUploadFile },
  mixins: [FieldExtendMixin],
  data() {
    return {
      breadcrumbData: [
        {
          name: this.$t("EQUIPMENT_LEDGER"),
          url: "/eam/account_management/equipment_account",
        },
        { name: this.$t("ORDER_DETAIL"), url: "" },
      ],
      activeKey: "a",
      activeKeyB: "b",
      tabActiveKey: "b",
      pieChartIdA: "pieChartA",
      pieChartIdB: "pieChartB",
      pieChartIdC: "pieChartC",
      pmPieChartIdA: "pmPieChartA",
      pmPieChartIdB: "pmPieChartB",
      pmPieChartIdC: "pmPieChartC",
      pieDataA: [],
      pieDataB: [],
      pieDataC: [],
      pieRadius: ["43%", "50%"],
      typeList: [],
      // eslint-disable-next-line
      defaultImg: require("@/assets/img/eqp_01.png"),
      // 查询的表单的配置项
      queryParam: {
        errorAppearanceIdList: [],
        errorReasonIdList: [],
        dateRange: [],
        errorRepairIdList: [],
        repairTicketCode: "",
        repairUserList: [],
      },
      queryForm: {
        pcFrmCode: "",
        pcUser: "",
        dateRange: [],
      },
      queryFormPm: {
        pmFrmCode: "",
        responsibleUser: "",
        dateRange: [],
      },
      queryParamD: {
        matTypeIdList: [],
        matCodeList: [],
      },
      columns: [
        {
          dataIndex: "repairTicketCode", // 叫修工单编码
          title: () => this.$t("CALL_REPAIR_ORDER_NO"),
          ellipsis: true,
          width: 180,
        },
        {
          dataIndex: "repairUser", // 维修人
          sorter: false,
          ellipsis: true,
          title: () => this.$t("EPMS_REPAIR_PERSONNEL"),
          width: 100,
        },
        {
          dataIndex: "repairDuration", // 维修耗时
          ellipsis: true,
          title: () => `${this.$t("REPAIR_TIME_CONSUM")}`,
          width: 120,
        },
        {
          dataIndex: "errorAppearanceCode", // 故障现象码
          sorter: false,
          title: () => `${this.$t("SYMPTOM_CODE")}`,
          ellipsis: true,
          width: 180,
        },
        {
          dataIndex: "errorAppearanceName", // 故障现象描述
          sorter: false,
          title: () => `${this.$t("SYMPTOM_DESCRIBE")}`,
          ellipsis: true,
          width: 180,
        },
        {
          dataIndex: "errorReasonCode", // 故障原因码
          sorter: false,
          title: () => `${this.$t("ERROR_REASON")}`,
          ellipsis: true,
          width: 180,
        },
        {
          dataIndex: "errorReasonName", // 故障原因描述
          sorter: false,
          title: () => `${this.$t("ERROR_REASON_DESCRIBE")}`,
          ellipsis: true,
          width: 180,
        },
        {
          dataIndex: "errorRepairCode", // 故障维修码
          sorter: false,
          title: () => `${this.$t("ERROR_REPAIR")}`,
          ellipsis: true,
          width: 180,
        },
        {
          dataIndex: "errorRepairName", // 维修方案
          sorter: false,
          title: () => `${this.$t("ERROR_REPAIR_PLAN")}`,
          ellipsis: true,
          width: 180,
        },
        {
          dataIndex: "callUser", // 申请人员
          sorter: false,
          ellipsis: true,
          title: () => `${this.$t("APPLY_PERSONNEL")}`,
          width: 150,
        },
        {
          dataIndex: "callTime", // 申请时间
          sorter: false,
          ellipsis: true,
          title: () => `${this.$t("APPLICATION_TIME")}`,
          width: 180,
        },
      ],
      columnsB: [
        {
          dataIndex: "pcFrmCode", // 任务对应表单编码
          title: () => this.$t("EPMS_TASK_CORRESPOND_FORM_CODE"),
          ellipsis: true,
          width: 180,
        },
        {
          dataIndex: "pcFrmName", // 任务对应表单名称
          sorter: false,
          ellipsis: true,
          title: () => this.$t("TASK_CORRESPOND_FORM_NAME"),
          width: 100,
        },
        {
          dataIndex: "planEndTime", // 计划执行完成时间
          sorter: false,
          title: () =>
            `${this.$t("PLAN")}${this.$t("TODO")}${this.$t("COMPLETE_TIME")}`,
          ellipsis: true,
          width: 180,
        },
        {
          dataIndex: "responsibleName", // 负责人
          title: () => `${this.$t("LEADER_NAME")}`,
          ellipsis: true,
          width: 200,
        },
        {
          dataIndex: "status", // 任务状态
          title: () => `${this.$t("TASK")}${this.$t("STATUS")}`,
          ellipsis: true,
          width: 200,
          scopedSlots: { customRender: "status" },
        },
        {
          dataIndex: "resultValue", // 点检结果
          title: () => `${this.$t("CHECK_RESULT")}`,
          ellipsis: true,
          width: 200,
          scopedSlots: { customRender: "resultValue" },
        },
        {
          dataIndex: "finishTime", // 点检完成时间
          title: () => `${this.$t("CHECK_TASK")}${this.$t("COMPLETE_TIME")}`,
          ellipsis: true,
          width: 200,
        },
      ],
      columnsC: [
        {
          dataIndex: "pmFrmCode", // 任务对应表单编码
          title: () => this.$t("EPMS_TASK_CORRESPOND_FORM_CODE"),
          ellipsis: true,
          width: 180,
        },
        {
          dataIndex: "pmFrmName", // 任务对应表单名称
          sorter: false,
          ellipsis: true,
          title: () => this.$t("TASK_CORRESPOND_FORM_NAME"),
          width: 100,
        },
        {
          dataIndex: "planEndTime", // 计划执行完成时间
          sorter: false,
          title: () =>
            `${this.$t("PLAN")}${this.$t("TODO")}${this.$t("COMPLETE_TIME")}`,
          ellipsis: true,
          width: 180,
        },
        {
          dataIndex: "responsibleName", // 负责人
          title: () => `${this.$t("LEADER_NAME")}`,
          ellipsis: true,
          width: 200,
        },
        {
          dataIndex: "status", // 任务状态
          title: () => `${this.$t("TASK")}${this.$t("STATUS")}`,
          ellipsis: true,
          width: 200,
          scopedSlots: { customRender: "status" },
        },
        {
          dataIndex: "resultValue", // 点检结果
          title: () => `${this.$t("CHECK_RESULT")}`,
          ellipsis: true,
          width: 200,
          scopedSlots: { customRender: "resultValue" },
        },
        {
          dataIndex: "finishTime", // 点检完成时间
          title: () => `${this.$t("CHECK_TASK")}${this.$t("COMPLETE_TIME")}`,
          ellipsis: true,
          width: 200,
        },
      ],
      columnsD: [
        {
          dataIndex: "imgUrl",
          width: 100,
          sorter: false,
          ellipsis: true,
          scopedSlots: { customRender: "imgUrl" },
          title: () => this.$t("CORE_PICTURE"), // 图片
        },
        {
          dataIndex: "matCode", // 备件料号
          title: () => this.$t("SPARE_PART_ITEM_NO"),
          ellipsis: true,
          width: 180,
        },
        {
          dataIndex: "matName", // 备件名称
          sorter: false,
          ellipsis: true,
          title: () => this.$t("SPARE_PART_NAME"),
          width: 180,
        },
        {
          dataIndex: "batchCode", // 批次号
          sorter: false,
          title: () => this.$t("BATCH_NUMBER"),
          ellipsis: true,
          width: 180,
        },
        {
          dataIndex: "sn", // 条形码
          sorter: false,
          title: () => this.$t("SPARE_PARTS_CODE"),
          ellipsis: true,
          width: 300,
          minWidth: 300,
          scopedSlots: { customRender: "sn" },
        },
        {
          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: "num", // 上机数
          sorter: false,
          title: () => this.$t("NUMBER_OF_COMPUTERS"),
          ellipsis: true,
          width: 100,
        },
        {
          dataIndex: "bindTime", // 上机时间
          sorter: false,
          title: () => this.$t("SPARE_PARTS_ON_TIME"),
          ellipsis: true,
          width: 180,
        },
        {
          dataIndex: "updateBy", // 操作人
          title: () => `${this.$t("OPERATOR")}`,
          ellipsis: true,
        },
        {
          dataIndex: "remainLife", // 备件寿命
          title: () => `${this.$t("SERVICE_LIFE_OF_SPARE_PARTS")}`,
          ellipsis: true,
          width: 300,
          minWidth: 300,
          scopedSlots: { customRender: "remainLife" },
        },
      ],
      tableNameList: [
        {
          key: "epm_eqp",
          tab: "设备管理",
        },
      ],
      total: 0,
      page: 1,
      totalB: 0,
      pageB: 1,
      totalD: 0,
      pageD: 1,
      statusList: [],
      resultList: [],
      orderStatusList: [],
      eqpCategoryList: [], // 台账类型
      assetsSourceList: [], // 资产来源
      assetsStatusList: [], // 资产状态
      dataSource: [],
      dataSourceB: [],
      dataSourceD: [],
      detailData: {},
      techFileUrl: [], // 设备类型绑定的技术资料
      detail: [
        { label: "ACCOUNT_TYPE", key: "eqpCategory", list: "eqpCategoryList" },
        { label: "EPMS_EQP_CODE", key: "eqpCode" },
        { label: "EPMS_ASSETS_CODE", key: "assetsCode" },
        { label: "EQP_NAME", key: "eqpName" },
        { label: "EQP_TYPE", key: "eqpTypeName" },
        { label: "EQP_MODEL", key: "eqpModel" },
        {
          label: "STATUS_OF_ASSETS",
          key: "assetsStatus",
          list: "assetsStatusList",
        },
        {
          label: "SOURCE_OF_ASSETS",
          key: "assetsSource",
          list: "assetsSourceList",
        },
        { label: "EQUIPMENT_ABBREVIATION", key: "eqpShortName" },
        { label: "EQP_BRAND", key: "brand" },
        { label: "EQUIPMENT_SIZE", key: "eqpSpec" },
        { label: "LEADER_NAME", key: "ownerName" },
        { label: "CURRENT_LOCATION", key: "location" },
      ],
      oldDetail: [
        { label: "ACCOUNT_TYPE", key: "eqpCategory", list: "eqpCategoryList" },
        { label: "EPMS_EQP_CODE", key: "eqpCode" },
        { label: "EPMS_ASSETS_CODE", key: "assetsCode" },
        { label: "EQP_NAME", key: "eqpName" },
        { label: "EQP_TYPE", key: "eqpTypeName" },
        { label: "EQP_MODEL", key: "eqpModel" },
        {
          label: "STATUS_OF_ASSETS",
          key: "assetsStatus",
          list: "assetsStatusList",
        },
        {
          label: "SOURCE_OF_ASSETS",
          key: "assetsSource",
          list: "assetsSourceList",
        },
        { label: "EQUIPMENT_ABBREVIATION", key: "eqpShortName" },
        { label: "EQP_BRAND", key: "brand" },
        { label: "EQUIPMENT_SIZE", key: "eqpSpec" },
        { label: "LEADER_NAME", key: "ownerName" },
        { label: "CURRENT_LOCATION", key: "location" },
      ],
      errorAppearanceList: [], // 故障现象码
      errorReasonList: [], // 故障原因码
      errorRepairList: [], // 故障维修码
      sendParams: {
        tableName: "epm_eqp",
      },
      actionButtons: [
        (h, { record, index }) =>
          record.status === "ALREADY_FINISH" && (
            <a-button onClick={() => this.handlePreview(record, index)}>
              <i
                class="operation-icon iconfont icon-chakan"
                style="font-size:18px;"
                title={this.$t("PREVIEW")}
              />
            </a-button>
          ),
      ],
      isReset: false, // 是否重置SelectSearch组件value
    };
  },
  computed: {
    ...mapState("setting", ["multiPage"]),
    // 表格搜索配置
    queryParamItem() {
      return this.$observable("queryParamItem", {
        errorAppearanceIdList: {
          itemType: "custom",
          labelCol: { span: 6 },
          wrapperCol: { span: 18 },
          label: () => this.$t("SYMPTOM_CODE"),
          customRender: () => {
            const selectOptionItems = this.errorAppearanceList.map(
              (v, index) => {
                return (
                  <a-select-option
                    value={v.id}
                    key={v.id}
                    title={`${v.code} - ${v.description}`}
                  >
                    {v.code}-{v.description}
                  </a-select-option>
                );
              }
            );
            return (
              <a-select
                value={this.queryParam.errorAppearanceIdList}
                mode={"multiple"}
                allowClear={true}
                onChange={(e) => {
                  this.queryParam.errorAppearanceIdList = e;
                }}
              >
                {selectOptionItems}
              </a-select>
            );
          },
        },
        errorReasonIdList: {
          itemType: "custom",
          labelCol: { span: 6 },
          wrapperCol: { span: 18 },
          label: () => this.$t("ERROR_REASON"),
          customRender: () => {
            const selectOptionItems = this.errorReasonList.map((v, index) => {
              return (
                <a-select-option
                  value={v.id}
                  key={v.id}
                  title={`${v.code} - ${v.description}`}
                >
                  {v.code}-{v.description}
                </a-select-option>
              );
            });
            return (
              <a-select
                value={this.queryParam.errorReasonIdList}
                mode={"multiple"}
                allowClear={true}
                onChange={(e) => {
                  this.queryParam.errorReasonIdList = e;
                }}
              >
                {selectOptionItems}
              </a-select>
            );
          },
        },
        dateRange: {
          itemType: "range",
          label: () => this.$t("DATE"),
        },
        errorRepairIdList: {
          itemType: "custom",
          labelCol: { span: 6 },
          wrapperCol: { span: 18 },
          label: () => this.$t("ERROR_REPAIR"),
          customRender: () => {
            const selectOptionItems = this.errorRepairList.map((v, index) => {
              return (
                <a-select-option
                  value={v.id}
                  key={v.id}
                  title={`${v.code} - ${v.description}`}
                >
                  {v.code}-{v.description}
                </a-select-option>
              );
            });
            return (
              <a-select
                value={this.queryParam.errorRepairIdList}
                mode={"multiple"}
                allowClear={true}
                onChange={(e) => {
                  this.queryParam.errorRepairIdList = e;
                }}
              >
                {selectOptionItems}
              </a-select>
            );
          },
        },
        repairTicketCode: {
          labelCol: { span: 6 },
          wrapperCol: { span: 18 },
          label: () => this.$t("EPMS_WORK_ORDER_CODE"),
        },
        repairUserList: {
          itemType: "select",
          label: () => this.$t("EPMS_REPAIR_PERSONNEL"),
          mode: "multiple",
          labelCol: { span: 6 },
          wrapperCol: { span: 18 },
          options: [],
          optionsProps: {
            label: "label",
            value: "value",
          },
        },
      });
    },
    queryFormItem() {
      return this.$observable("queryFormItem", {
        pcFrmCode: {
          itemType: "custom",
          label: () => `${this.$t("FORM")}${this.$t("CODE")}`,
          customRender: () => {
            return (
              <SelectSearch
                show-multiple={false}
                option-label={"pcFrmCode"}
                default-selected-keys={this.queryForm.pcFrmCode}
                default-selected-names={this.queryForm.pcFrmCode}
                requestApi={"/api/epm/pcm/pc-frm/search"}
                onChange={this.onSelectSearchChange}
              />
            );
          },
        },
        pcUser: {
          itemType: "select",
          label: () => this.$t("CHECK_STAFF"),
          options: [],
          optionsProps: {
            label: "label",
            value: "value",
          },
        },
        dateRange: {
          itemType: "range",
          label: () => this.$t("DATE"),
        },
      });
    },
    queryFormItemPm() {
      return this.$observable("queryFormItemPm", {
        pcFrmCode: {
          itemType: "custom",
          label: () => `${this.$t("FORM")}${this.$t("CODE")}`,
          customRender: () => {
            return (
              <SelectSearch
                show-multiple={false}
                option-label={"pcFrmCode"}
                default-selected-keys={this.queryFormPm.pcFrmCode}
                default-selected-names={this.queryFormPm.pcFrmCode}
                requestApi={"/api/epm/pmm/pm-frm/search"}
                onChange={this.onSelectSearchChangePm}
              />
            );
          },
        },
        pcUser: {
          itemType: "select",
          label: () => this.$t("CHECK_STAFF"),
          options: [],
          optionsProps: {
            label: "label",
            value: "value",
          },
        },
        dateRange: {
          itemType: "range",
          label: () => this.$t("DATE"),
        },
      });
    },
    queryParamItemD() {
      return this.$observable("queryParamItemD", {
        matTypeIdList: {
          itemType: "custom",
          label: () => this.$t("TYPE_OF_SPARE_PARTS"),
          customRender: () => {
            return (
              <SelectSearch
                ref={"SelectSearchType"}
                isReset={this.isReset}
                show-multiple={true}
                option-label={"matTypeName"}
                query-list-key={"matTypeName"}
                requestApi={"/api/mdm/material-type/search"}
                searchParams={{ matKind: "SPARE" }}
                onChange={this.onSelectSearchChangeType}
              />
            );
          },
        },
        matCodeList: {
          itemType: "custom",
          label: () => this.$t("SPARE_PART_NAME"),
          customRender: () => {
            return (
              <SelectSearch
                ref={"SelectSearchPart"}
                isReset={this.isReset}
                show-multiple={true}
                option-label={"matName"}
                query-list-key={"searchKey"}
                requestApi={"/api/mdm/material/search"}
                onChange={this.onSelectSearchChangePart}
              />
            );
          },
        },
      });
    },
  },
  created() {
    this.init();
  },
  methods: {
    // 获取资产状态与资产来源名称
    formatData(listName, status = "") {
      const data = this[listName];
      const result = data.find((item) => item.value === status?.toString());
      return result ? result.label : "";
    },
    onSelectSearchChange(e) {
      this.queryForm.pcFrmCode = e;
    },
    onSelectSearchChangePm(e) {
      this.queryFormPm.pmFrmCode = e;
    },
    onSelectSearchChangePart(e, info, list) {
      this.isReset = false;
      this.queryParamD.matCodeList = list.map((item) => item.matCode);
    },
    onSelectSearchChangeType(e, info, list) {
      this.isReset = false;
      this.queryParamD.matTypeIdList = list.map((item) => item.id);
    },
    handleTabChange(e) {
      this.tabActiveKey = e;
      /* eslint-disable */
      switch (e) {
        case "b":
          this.getTaskPieData();
          this.$refs.MomTableTask?.search();
          break;
        case "c":
          this.getTaskPieData();
          this.$refs.MomTablePmTask?.search();
          break;
        case "e":
          // 技术资料字段重新赋值
          const { techFileUrl } = this;
          this.techFileUrl = [];
          this.$nextTick(() => {
            this.techFileUrl = techFileUrl;
          });
      }
      /* eslint-enable */
    },
    init() {
      const { id } = this.$route.query;
      return Promise.all([
        this.$axios.get(
          `${ApiConstant.PREFIX_CORE}/api/epm/eam/eqp/get-by-id/${id}`
        ),
        this.$axios.get(
          `${ApiConstant.PREFIX_CORE}/api/epm/erm/repair-ticket/repair-user-list`
        ),
        this.$axios.get(
          `${ApiConstant.PREFIX_CORE}/api/epm/eam/eqp-error-code/list`,
          {
            params: {
              eqpId: id,
              type: "ERROR_APPEARANCE",
            },
          }
        ), // 故障现象码列表
        this.$axios.get(
          `${ApiConstant.PREFIX_CORE}/api/epm/eam/eqp-error-code/list`,
          {
            params: {
              eqpId: id,
              type: "ERROR_REASON",
            },
          }
        ), // 故障原因码列表
        this.$axios.get(
          `${ApiConstant.PREFIX_CORE}/api/epm/eam/eqp-error-code/list`,
          {
            params: {
              eqpId: id,
              type: "ERROR_REPAIR",
            },
          }
        ), // 故障维修码列表
        this.$axios.get(
          `${ApiConstant.PREFIX_CORE}/api/epm/eam/eqp/owner-list`
        ),
        this.$axios.get(
          `${ApiConstant.PREFIX_CORE}/api/sys/dict-data/DIC:EPM:PC_STATUS`
        ), // 点检状态
        this.$axios.get(
          `${ApiConstant.PREFIX_CORE}/api/sys/dict-data/DIC:EPM:PC_RESULT`
        ), // 点检结果
        this.$axios.get(
          `${ApiConstant.PREFIX_CORE}/api/sys/dict-data/DIC:EPM:EQP_CATEGORY`
        ), // 台账类型
        this.$axios.get(
          `${ApiConstant.PREFIX_CORE}/api/sys/dict-data/DIC:EPM:ASSETS_SOURCE`
        ), // 资产来源
        this.$axios.get(
          `${ApiConstant.PREFIX_CORE}/api/sys/dict-data/DIC:EPM:ASSETS_STATUS`
        ), // 资产状态
      ]).then(
        ([
          res,
          userRes,
          appearanceRes,
          reasocRes,
          repairRes,
          ownerRes,
          pcStatus,
          pcResults,
          eqpCategoryRes,
          assetsSourceRes,
          assetsStatusRes,
        ]) => {
          if (res.data?.data?.imgUrl) {
            res.data.data.imgUrl = fetchFileUrl(res.data.data.imgUrl, this);
          }
          this.detailData = res.data.data;
          const { eqpTechBPOList } = this.detailData;
          const techUrlList = eqpTechBPOList.map((item) => {
            const { techName, techUrl } = item;
            return {
              name: techName,
              fileUrl: techUrl,
            };
          });
          this.techFileUrl =
            techUrlList && techUrlList.length
              ? techUrlList.filter((item) => item.fileUrl)
              : [];
          this.queryParamItem.repairUserList.options = userRes.data?.data;
          this.errorAppearanceList = appearanceRes.data?.data;
          this.errorReasonList = reasocRes.data?.data;
          this.errorRepairList = repairRes.data?.data;
          this.queryFormItem.pcUser.options = ownerRes.data.data;
          this.statusList = pcStatus.data?.data;
          this.resultList = pcResults.data?.data;
          this.eqpCategoryList = eqpCategoryRes.data.data;
          this.assetsSourceList = assetsSourceRes.data.data;
          this.assetsStatusList = assetsStatusRes.data.data;
          this.getHideWord();
        }
      );
    },
    getHideWord() {
      // 扩展字段
      this.queryFieldExtend().then((res) => {
        /* eslint-disable */
        this.detail = [...this.oldDetail];
        if (res.data.data.fieldHiddenConfigList?.length) {
          const arr = [];
          res.data.data.fieldHiddenConfigList.forEach((item) => {
            arr.push(item.fieldName);
          });
          arr.forEach((item) => {
            this.hasFunction(item);
          });
          res.data.data?.fieldExtendConfigList?.forEach((item) => {
            item.items.forEach((e) => {
              if ([1, "Y"].includes(e.enableFlag)) {
                const obj = {
                  label: e.i18nCode,
                  key: e.fieldName,
                };
                this.detail.push(obj);
              }
            });
          });
          // if (this.detail.length > 12) {
          //   this.detail.splice(12, this.detail.length - 12);
          // }
        }
        /* eslint-enable */
      });
    },
    hasFunction(val) {
      const index = this.detail.findIndex((item) => item.key === val);
      this.detail.splice(index, 1);
    },
    handleReset() {
      this.queryParam.errorAppearanceIdList = [];
      this.queryParam.errorReasonIdList = [];
      this.queryParam.dateRange = [];
      this.queryParam.errorRepairIdList = [];
      this.queryParam.repairUserList = [];
      this.dataSource = [];
      this.page = 1;
      this.$refs.MomTable?.search();
    },
    handleResetTask() {
      this.queryForm.pcFrmCode = "";
      this.queryForm.pcUser = "";
      this.queryForm.dateRange = [];
      this.dataSourceB = [];
      this.pageB = 1;
      this.$refs.MomTableTask?.search();
    },
    handleResetPmTask() {
      this.queryFormPm.pmFrmCode = "";
      this.queryFormPm.responsibleUser = "";
      this.queryFormPm.dateRange = [];
      this.dataSourceB = [];
      this.pageB = 1;
      this.$refs.MomTablePmTask?.search();
    },
    handleResetParts() {
      this.isReset = true;
      this.queryParamD.matCodeList = [];
      this.queryParamD.matTypeIdList = [];
      this.dataSourceD = [];
      this.pageD = 1;
      this.$refs.MomTableParts?.search();
    },
    search(params) {
      const {
        errorAppearanceIdList,
        errorReasonIdList,
        dateRange,
        errorRepairIdList,
        repairUserList,
      } = this.queryParam;
      const data = {
        ...params,
        errorAppearanceIdList:
          errorAppearanceIdList.length > 0
            ? errorAppearanceIdList.join(",")
            : "",
        errorReasonIdList:
          errorReasonIdList.length > 0 ? errorReasonIdList.join(",") : "",
        startDate:
          dateRange.length > 0 ? moment(dateRange[0]).format("YYYY-MM-DD") : "",
        endDate:
          dateRange.length > 0 ? moment(dateRange[1]).format("YYYY-MM-DD") : "",
        errorRepairIdList:
          errorRepairIdList.length > 0 ? errorRepairIdList.join(",") : "",
        repairUserList:
          repairUserList.length > 0 ? repairUserList.join(",") : "",
        eqpId: this.$route.query?.id,
      };
      delete data.dateRange;
      this.$axios
        .get(
          `${ApiConstant.PREFIX_CORE}/api/epm/erm/repair-ticket/search-result`,
          {
            params: data,
          }
        )
        .then((res) => {
          this.dataSource = res.data.data.records;
          this.total = res.data.data.total;
        });
    },
    searchTask(params) {
      const { dateRange } = this.queryForm;
      const data = {
        ...params,
        startDate: dateRange.length > 0 ? dateRange[0] : "",
        endDate: dateRange.length > 0 ? dateRange[1] : "",
        objectId: this.$route.query.id,
      };
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/epm/pcm/pc-task-rpt/search`, {
          params: data,
        })
        .then((res) => {
          this.dataSourceB = res.data.data.records;
          this.totalB = res.data.data.total;
        });
    },
    searchPmTask(params) {
      const { dateRange } = this.queryForm;
      const data = {
        ...params,
        startDate: dateRange && dateRange.length > 0 ? dateRange[0] : "",
        endDate: dateRange && dateRange.length > 0 ? dateRange[1] : "",
        pmEqpId: this.$route.query.id,
      };
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/epm/pmm/pm-task-rpt/search`, {
          params: data,
        })
        .then((res) => {
          this.dataSourceB = res.data.data.records;
          this.totalB = res.data.data.total;
        });
    },
    searchParts(params) {
      const data = {
        ...params,
      };
      data.matCodeList = data.matCodeList.join(",");
      data.matTypeIdList = data.matTypeIdList.join(",");
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/epm/part/part-bind/search-bind`, {
          params: {
            ...data,
            eqpCode: this.$route.query.eqpCode,
          },
        })
        .then((res) => {
          const { records, total } = { ...res.data?.data };
          if (records && records.length > 0) {
            records.forEach((item) => {
              if (item.imgUrl) {
                // eslint-disable-next-line no-param-reassign
                item.imgUrl = fetchFileUrl(item.imgUrl, this);
              }
            });
          }
          this.dataSourceD = records;
          this.totalD = total;
        });
    },
    getTaskPieData() {
      let params;
      let requestApi;
      /* eslint-disable */
      switch (this.tabActiveKey) {
        case "b":
          params = {
            objectId: this.$route.query.id,
            ...this.sendParams,
          };
          requestApi = "/api/epm/pcm/pc-task-rpt/rate";
          break;
        case "c":
          params = {
            pmEqpId: this.$route.query.id,
          };
          requestApi = "/api/epm/pmm/pm-task-rpt/rate";
          break;
      }
      /* eslint-enable */
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}${requestApi}`, {
          params,
        })
        .then((res) => {
          this.pieDataA = res.data?.data?.statusRate;
          this.pieDataB = res.data?.data?.expireRate;
          this.pieDataC = res.data?.data?.resultRate;
        });
    },
    receive({ id, eqpId }) {
      this.$router.push({
        path: "/eam/repair_management/repair_record/view",
        query: {
          id,
          eqpId,
        },
      });
    },
    // 点击表格行内的预览
    handlePreview(row) {
      let path;
      /* eslint-disable */
      switch (this.tabActiveKey) {
        case "b":
          path = "/eam/eqp_check/check_report/preview";
          break;
        case "c":
          path = "/eam/eqp_maintain/maintenance_report/preview";
          break;
      }
      /* eslint-enable */
      this.$router.push({
        query: {
          id: row.id,
        },
        path,
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import "@/assets/css/statusReport.less";
@import "@/assets/css/fault_repair.less";
.detail_left {
  width: 417px;
  padding: 24px;
  .pie_chart_top {
    width: 100%;
    height: 284px;
    background: #f5f7fa;
    margin-bottom: 24px;
    position: relative;
    .pie_chart_item {
      width: 50%;
    }
  }
  .pie_chart_bot {
    width: 100%;
    height: 284px;
    background: #f5f7fa;
    position: relative;
  }
  .pie_chart_title {
    position: absolute;
    top: 16px;
    left: 24px;
    font-size: 14px;
    font-weight: 400;
    color: #333;
  }
}

.detail_right {
  width: calc(100% - 417px);
}
.eap_img {
  width: 166px;
  height: 166px;
  img {
    width: 100%;
    height: 100%;
  }
}
.eqp_con {
  width: calc(100% - 278px);
}
.progress-box {
  position: relative;
  width: 220px;
  height: 12px;
  border-radius: 8px;
  margin-left: 10px;
  .progress-bg {
    width: 220px;
    height: 12px;
    background: #e8e8e8;
    border-radius: 8px;
    .progress-view {
      position: absolute;
      height: 12px;
      left: 0;
      top: 0;
      border-radius: 8px;
    }
  }
  .progress-text {
    width: 220px;
    text-align: center;
    margin: 5px 0;
  }
}
.eqp_picture {
  width: 50px;
  height: 50px;
}
</style>
