<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('MAINTENANCE_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="pmUrl" slot-scope="text, record">
            <img
              v-if="record.pmUrl"
              class="cursor-pointer"
              style="height: 24px"
              :src="`${systemConfig.FILE_SERVER}${record.pmUrl}`"
              @click="handlePreviewImg(record.pmUrl)"
            />
          </div>
          <div slot="audioUrl" slot-scope="text">
            <AudioCard v-if="text" :audio-url="text"></AudioCard>
          </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('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";

export default {
  components: { ImgViewer, AudioCard, breadcrumb },
  mixins: [FieldExtendMixin],
  data() {
    return {
      loading: false,
      limit: 5,
      breadcrumbData: [
        {
          name: this.$t("MAINTENANCE_REPORT"),
          url: "/eam/eqp_maintain/maintenance_report",
        },
        { name: this.$t("ADD"), url: "" },
      ],
      dataSource: [],
      url: `${ApiConstant.PREFIX_CORE}/api/sys/file/upload`,
      headers: {
        Authorization: this.$auth.getToken("local"),
      },
      form: {
        taskId: "",
        improveRemark: "",
        improveImgUrlList: [],
        improveFileUrlList: "",
      },
      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,
      },
    };
  },
  computed: {
    ...mapState("setting", ["multiPage"]),
    ...mapState({
      systemConfig: (state) => state.app.systemConfig,
    }),
    tableColumns() {
      return this.$observable("tableColumns", [
        {
          dataIndex: "itemName", // 保养项目
          title: () => `${this.$t("MAINTENANCE_CONTENT")}`,
          ellipsis: true,
          sorter: false,
          width: 260,
        },
        {
          dataIndex: "opDescription", // 保养说明
          title: () => `${this.$t("MAINTENANCE_DESC")}`,
          ellipsis: true,
          sorter: false,
          // width: 260,
        },
        {
          dataIndex: "audioUrl", // 语音
          title: () => `${this.$t("VOICE")}`,
          ellipsis: true,
          sorter: false,
          width: 290,
          minWidth: 290,
          scopedSlots: { customRender: "audioUrl" },
        },
        {
          dataIndex: "pmUrl", // 保养图片
          title: () => `${this.$t("MAINTENANCE_IMAGE")}`,
          ellipsis: true,
          sorter: false,
          width: 300,
          scopedSlots: { customRender: "pmUrl" },
        },
        {
          dataIndex: "pmRemark", // 备注
          title: () => `${this.$t("REMARK")}`,
          ellipsis: true,
          sorter: false,
        },
        {
          dataIndex: "responsibleName", // 保养人员
          title: () => `${this.$t("MAINTENANCE_STAFF")}`,
          ellipsis: true,
          sorter: false,
          width: 300,
        },
      ]);
    },
  },
  mounted() {
    const { id } = this.$route.query;
    if (id) {
      this.$axios
        .get(
          `${ApiConstant.PREFIX_CORE}/api/epm/pmm/pm-task-rpt/detail?id=${id}`
        )
        .then((res) => {
          const {
            improveFileUrlList,
            improveImgUrlList,
            improveRemark,
            resultItemList,
          } = res.data.data;
          const fileList = improveFileUrlList?.filter((item) => item) || [];
          const imgList = improveImgUrlList?.filter((item) => item) || [];
          this.form = {
            taskId: id,
            improveFileUrlList: fileList,
            improveImgUrlList: imgList,
            improveRemark,
          };
          this.dataSource = resultItemList;
        });
    }
  },
  methods: {
    fetchFileUrl,
    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();
    },
    cancel() {
      this.$store.dispatch("tagsView/jumpBeforeView", {
        to: { path: "/eam/eqp_maintain/maintenance_report" },
        vm: this,
      });
    },
  },
};
</script>
<style lang="less" scoped>
.collapse-header-divide.improve-desc {
  padding-bottom: 2.5rem;
}
</style>
