<template>
  <div class="page-wrapper">
    <breadcrumb v-if="!multiPage" :breadcrumb-data="breadcrumbData" />
    <a-collapse
      default-active-key="a"
      expand-icon-position="right"
      class="collapse-header-divide"
    >
      <a-collapse-panel key="a" :header="$t('CHECK_DESC')">
        <!-- 点检说明table -->
        <MomTable
          ref="MomTable"
          row-key="id"
          :columns="tableColumns"
          :data-source="dataSource"
          :mega-extend="{
            rowAction: false,
          }"
          :pagination="false"
          :show-util-operator="false"
          class="pb-4"
        >
          <div slot="pcResult" slot-scope="text, record">
            <span v-if="record.pcValue" style="margin-right: 5px">{{
              record.pcValue
            }}</span>
            <span class="status-box" :class="text">{{
              formatDataValue(resultList, record.pcResult)
            }}</span>
          </div>
          <div slot="standardValue" slot-scope="text, record">
            <span>{{ formatData(record) }}</span>
          </div>
          <div slot="audioUrl" slot-scope="text">
            <AudioCard v-if="text" :audio-url="text"></AudioCard>
          </div>
          <div slot="pcUrl" slot-scope="text, record">
            <img
              v-if="record.pcUrl"
              class="cursor-pointer"
              style="height: 24px"
              :src="`${systemConfig.FILE_SERVER}${record.pcUrl}`"
              @click="handlePreviewImg(record.pcUrl)"
            />
          </div>
        </MomTable>
      </a-collapse-panel>
    </a-collapse>
    <!-- 打卡图片 开始 -->
    <a-collapse
      default-active-key="b"
      expand-icon-position="right"
      class="collapse-header-divide improve-desc"
    >
      <a-collapse-panel key="b" :header="$t('PUNCH_IN_PICTURE')">
        <div class="improve-images pt-2">
          <img
            v-for="file in resultImgUrlList"
            :key="file"
            :src="fetchFileUrl(file)"
            class="pr-4 cursor-pointer"
            style="display: inline-block; height: 4rem"
            @click="handlePreviewImg(file)"
          />
        </div>
      </a-collapse-panel>
    </a-collapse>
    <!-- 打卡图片 结束 -->
    <!-- 事件关注信息 开始 -->
    <EventFocusInfo v-if="detailInfo.eventCode" :detail-info="detailInfo" />
    <!-- 事件关注信息 结束 -->
    <!-- 位置信息 开始 -->
    <LocationInfo v-if="detailInfo.eventCode" :detail-info="detailInfo" />
    <!-- 位置信息 结束 -->
    <!-- 异常事件信息 开始 -->
    <EventInfo v-if="detailInfo.eventCode" :detail-info="detailInfo" />
    <!-- 异常事件信息 结束 -->
    <!-- 异常事件信息 开始 -->
    <EventTransferInfo
      v-if="detailInfo.transferList && detailInfo.transferList.length"
      :transfer-list="detailInfo.transferList"
    />
    <!-- 异常事件信息 结束 -->
    <!-- 异常事件历史 开始 -->
    <EventProcess :log-list="detailInfo.logList" :step-list="statusList" />
    <!-- 改进说明 -->
    <a-collapse
      default-active-key="c"
      expand-icon-position="right"
      class="collapse-header-divide improve-desc"
    >
      <a-collapse-panel key="c" :header="$t('IMPROVE_DESC')">
        <!-- 改进说明富文本 :label="$t('IMPROVE_DESC')" -->
        <div class="improve-remark">
          {{ form.improveRemark }}
        </div>
        <div class="improve-files pt-2">
          <span
            v-for="file in form.improveFileUrlList"
            :key="file"
            class="improve-file cursor-pointer pr-4"
            @click="dlBkddPdf(fetchFileUrl(file))"
          >
            <a-icon type="link" class="pr-2" />{{ file }}
          </span>
        </div>
        <div class="improve-images pt-2">
          <img
            v-for="file in form.improveImgUrlList"
            :key="file"
            :src="fetchFileUrl(file)"
            class="pr-4 cursor-pointer"
            style="display: inline-block; height: 4rem"
            @click="handlePreviewImg(file)"
          />
        </div>
      </a-collapse-panel>
    </a-collapse>
    <div class="page-bottom-op">
      <a-button @click="cancel">
        <i class="iconfont icon-quxiao"></i>
        {{ $t("BACK") }}
      </a-button>
    </div>
    <ImgViewer ref="megeIMg" :img-option="imgOption" :imgs="img">
      <img :imgs="img" />
    </ImgViewer>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { ImgViewer } from "@mega-design/ui-vue";
import ApiConstant from "@/api/ApiConstant";
import FieldExtendMixin from "@/mixins/fieldExtend";
import { fetchFileUrl } from "@/utils/file";
import breadcrumb from "@/components/breadcrumb";
import AudioCard from "@/components/AudioCard";
import EventInfo from "@/components/epms/EventDetail/EventInfo";
import LocationInfo from "@/components/epms/EventDetail/LocationInfo";
import EventFocusInfo from "@/components/epms/EventDetail/EventFocusInfo";
import EventProcess from "@/components/epms/EventDetail/EventProcess";
import EventTransferInfo from "@/components/epms/EventDetail/EventTransferInfo";

export default {
  components: {
    ImgViewer,
    breadcrumb,
    AudioCard,
    EventInfo,
    LocationInfo,
    EventFocusInfo,
    EventProcess,
    EventTransferInfo,
  },
  mixins: [FieldExtendMixin],
  data() {
    return {
      loading: false,
      limit: 5,
      breadcrumbData: [
        {
          name: this.$t("CHECK_REPORT"),
          url: "/eam/eqp_check/check_report",
        },
        { name: this.$t("ADD"), url: "" },
      ],
      dataSource: [],
      url: `${ApiConstant.PREFIX_CORE}/api/sys/file/upload`,
      headers: {
        Authorization: this.$auth.getToken("local"),
      },
      form: {
        resultId: "",
        improveRemark: "",
        improveImgUrlList: [],
        improveFileUrlList: "",
      },
      resultList: [],
      fileList: [],
      img: "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=85690711,3884201894&fm=27&gp=0.jpg",
      imgOption: {
        button: false,
        navbar: 0,
        title: false,
        toolbar: 0,
        isImgViewer: false,
      },
      resultImgUrlList: [],
      detailInfo: {},
      detailData: {},
      yesNoList: [],
      statusList: [],
    };
  },
  computed: {
    ...mapState("setting", ["multiPage"]),
    ...mapState({
      systemConfig: (state) => state.app.systemConfig,
    }),
    tableColumns() {
      return this.$observable("tableColumns", [
        {
          dataIndex: "itemName", // 点检项目
          title: () => `${this.$t("CHECK_CONTENT")}`,
          ellipsis: true,
          sorter: false,
          width: 260,
        },
        {
          dataIndex: "standardValue", // 标准值
          title: () => `${this.$t("STANDARD_VALUE")}`,
          ellipsis: true,
          sorter: false,
          width: 260,
          scopedSlots: { customRender: "standardValue" },
        },
        {
          dataIndex: "pcResult", // 点检结果
          title: () => `${this.$t("CHECK_RESULT")}`,
          ellipsis: true,
          sorter: false,
          width: 260,
          scopedSlots: { customRender: "pcResult" },
        },
        {
          dataIndex: "audioUrl", // 语音
          title: () => `${this.$t("VOICE")}`,
          ellipsis: true,
          sorter: false,
          width: 290,
          minWidth: 290,
          scopedSlots: { customRender: "audioUrl" },
        },
        {
          dataIndex: "pcUrl", // 点检图片
          title: () => `${this.$t("CHECK_IMAGE")}`,
          ellipsis: true,
          sorter: false,
          width: 300,
          scopedSlots: { customRender: "pcUrl" },
        },
        {
          dataIndex: "pcRemark", // 备注
          title: () => `${this.$t("REMARK")}`,
          ellipsis: true,
          sorter: false,
        },
        {
          dataIndex: "responsibleName", // 点检人员
          title: () => `${this.$t("CHECK_STAFF")}`,
          ellipsis: true,
          sorter: false,
          width: 300,
        },
      ]);
    },
  },
  mounted() {
    const { id } = this.$route.query;
    if (id) {
      this.$axios
        .get(
          `${ApiConstant.PREFIX_CORE}/api/epm/pcm/pc-task-rpt/detail?id=${id}`
        )
        .then((res) => {
          const {
            estEventId,
            improveFileUrlList,
            improveImgUrlList,
            improveRemark,
            resultItemList,
            resultImgUrlList,
          } = res.data.data;
          const fileList = improveFileUrlList?.filter((item) => item) || [];
          const imgList = improveImgUrlList?.filter((item) => item) || [];
          this.form = {
            estEventId,
            resultId: id,
            improveFileUrlList: fileList,
            improveImgUrlList: imgList,
            improveRemark,
          };
          this.dataSource = resultItemList;
          this.resultImgUrlList = resultImgUrlList;
          this.getEstEventInfo();
        });
    }
    this.init();
  },
  methods: {
    fetchFileUrl,
    init() {
      return Promise.all([
        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:COMMON:WHETHER_CHAR`
        ), // 是否
      ]).then(([resultRes, yesNoRes]) => {
        this.resultList = resultRes.data.data;
        this.yesNoList = yesNoRes.data.data;
      });
    },
    getEstEventInfo() {
      const { estEventId } = this.form;
      if (estEventId) {
        this.$axios
          .get(`${ApiConstant.PREFIX_CORE}/api/est/event/detail`, {
            params: {
              eventId: estEventId,
            },
          })
          .then((detailRes) => {
            this.detailInfo = detailRes.data.data;
            this.onGetProcessDetail();
          });
      }
    },
    // 获取流程详情
    onGetProcessDetail() {
      this.$axios
        .get(
          `${ApiConstant.PREFIX_CORE}/api/est/process/get-by-id/${this.detailInfo.processId}`
        )
        .then((res) => {
          this.detailData = res.data?.data;
          this.statusList = res.data.data.stepList;
        });
    },
    dlBkddPdf(url) {
      const a = document.createElement("a");
      a.setAttribute("href", url);
      a.setAttribute("target", "_blank");
      a.setAttribute("id", "openwin");
      document.body.appendChild(a);
      a.click();
    },
    // 预览图片
    handlePreviewImg(imgSrc) {
      if (!imgSrc) return;
      this.img = this.systemConfig.FILE_SERVER + imgSrc;
      this.$refs.megeIMg.showImg();
    },
    formatDataValue(data, status) {
      const result = data.find((item) => item.value === status.toString());
      return result ? result.label : "";
    },
    // 获取点检标准值
    formatData(row) {
      let value = "——";
      if (row.checkStyle === "TEXT") {
        value = row.textValue;
      } else if (row.checkStyle === "NUMBER") {
        const { compareType, upperLimit, lowerLimit } = row;
        switch (compareType) {
          case "=":
            value = `${this.$t("CHECK_RESULT")}=${upperLimit}=${lowerLimit}`;
            break;
          case "<":
            value = `${this.$t("CHECK_RESULT")}<${upperLimit}`;
            break;
          case ">":
            value = `${this.$t("CHECK_RESULT")}>${lowerLimit}`;
            break;
          case "<=>=":
            value = `${lowerLimit}<=${this.$t("CHECK_RESULT")}=<${upperLimit}`;
            break;
          case "<=>":
            value = `${lowerLimit}<=${this.$t("CHECK_RESULT")}<${upperLimit}`;
            break;
          case "<>=":
            value = `${lowerLimit}<${this.$t("CHECK_RESULT")}=<${upperLimit}`;
            break;
          case "<>":
            value = `${lowerLimit}<${this.$t("CHECK_RESULT")}<${upperLimit}`;
            break;
          default:
            value = `${this.$t("CHECK_RESULT")}=${upperLimit}=${lowerLimit}`;
            break;
        }
      }
      return value;
    },
    cancel() {
      this.$store.dispatch("tagsView/jumpBeforeView", {
        to: { path: "/eam/eqp_check/check_report" },
        vm: this,
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import "@/assets/css/status_epms.less";
.collapse-header-divide.improve-desc {
  padding-bottom: 2.5rem;
}
</style>
