<template>
  <a-collapse
    v-model="activeKey"
    expand-icon-position="right"
    class="collapse-header-divide"
  >
    <a-collapse-panel key="a" :header="$t('ABNORMAL_EVENT_INFORMATION')">
      <div class="repair_order_box mb-2">
        <a-descriptions class="pt-2">
          <!--事件编号-->
          <a-descriptions-item :label="`${$t('EVENT_NUMBER')}`">{{
            detailInfo.eventCode
          }}</a-descriptions-item>
          <!--事件标题-->
          <a-descriptions-item :label="`${$t('EVENT')}${$t('TITLE')}`">{{
            detailInfo.eventTitle
          }}</a-descriptions-item>
          <!--事件类型-->
          <a-descriptions-item :label="`${$t('EVENT_TYPE')}`">{{
            detailInfo.typeName
          }}</a-descriptions-item>
          <!--事件子类型-->
          <a-descriptions-item :label="`${$t('EVENT_SUBTYPE')}`">{{
            detailInfo.subTypeName
          }}</a-descriptions-item>
          <!--事件严重度-->
          <a-descriptions-item :label="`${$t('EVENT')}${$t('SEVERITY')}`">{{
            detailInfo.levelName
          }}</a-descriptions-item>
          <!--事件开始时间-->
          <a-descriptions-item :label="`${$t('EVENT')}${$t('START_TIME')}`">{{
            detailInfo.startTime
          }}</a-descriptions-item>
          <!--异常描述-->
          <a-descriptions-item :label="`${$t('ABNORMAL')}${$t('DESCRIBE')}`">{{
            detailInfo.eventContent
          }}</a-descriptions-item>
        </a-descriptions>
        <div class="repair_order_item repair_order_item_line">
          <a-row v-if="imgUrlList.length > 0" :gutter="24">
            <a-col :span="18">
              <MultipleUpload
                :image-url-list="imgUrlList"
                :limit="imgUrlList.length"
                :is-show-upload-button="false"
              />
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="24">
              <div
                v-for="(item, index) in fileUrlList"
                :key="index"
                class="file_item flex items-center mb-2"
                @click="dlBkddPdf(`${systemConfig.FILE_SERVER}${item.url}`)"
              >
                <Icon type="icon-cur-file-text" />
                <span class="ml-1 cursor-pointer">{{
                  item.originalFileName
                }}</span>
              </div>
            </a-col>
          </a-row>
        </div>
      </div>
    </a-collapse-panel>
  </a-collapse>
</template>

<script>
import { mapState } from "vuex";
import { Icon } from "@mega-design/ui-vue";
import MultipleUpload from "@/components/epms/EventDetail/uploadPicture/multipleUpload";

export default {
  name: "EventInfo",
  components: { Icon, MultipleUpload },
  props: {
    detailInfo: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      activeKey: "a",
      imgUrlList: [],
      fileUrlList: [],
    };
  },
  computed: {
    ...mapState({
      systemConfig: (state) => state.app.systemConfig,
    }),
  },
  watch: {
    "detailInfo.eventFileList": {
      handler(newVal, oldVal) {
        if (newVal && newVal.length > 0) {
          const suffixs = [
            ".png",
            ".jpg",
            ".gif",
            ".jepg",
            ".jpeg",
            ".ico",
            ".svg",
          ];
          const pdfsuffixs = [".pdf", ".PDF"];
          const imgUrlList = [];
          const fileUrlList = [];
          newVal.forEach((item) => {
            const i = item.originalFileName.lastIndexOf(".");
            const suffix = item.originalFileName.slice(i);
            if (suffixs.includes(suffix)) {
              imgUrlList.push(item);
            } else if (pdfsuffixs.includes(suffix)) {
              fileUrlList.push(item);
            }
          });
          this.imgUrlList = [...imgUrlList];
          this.fileUrlList = [...fileUrlList];
        }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {},
  methods: {
    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();
    },
  },
};
</script>
<style lang="less" scoped>
.repair_order_box {
  // background: #f5f7fa;
  border-radius: 6px;
  padding: 0 24px;
  position: relative;
  .repair_order_item {
    padding: 14px 0 0;
  }
  // .repair_order_item_line {
  //   border-top: 1px solid #e4e8ee;
  // }
}
.file_item {
  height: 30px;
  color: rgba(0, 104, 150, 1);
}
</style>
