<template>
  <a-collapse
    v-model="activeKey"
    expand-icon-position="right"
    class="collapse-header-divide"
  >
    <a-collapse-panel key="a" :header="$t('ABNORMAL_EVENT_HANDLER_DETAIL')">
      <div class="flex">
        <a-steps direction="vertical">
          <a-step
            v-for="(item, index) in list"
            :key="index"
            :current="-1"
            status="process"
            disabled
          >
            <span
              slot="icon"
              class="status-icon"
              :style="{ background: getStatusColor(item.statusName) }"
            >
              {{ index + 1 }}
            </span>
            <template slot="title">
              <div class="step-title">
                {{ item.statusName }}
              </div>
            </template>
            <!-- <template slot="subTitle">
              <div
                v-if="item.id"
                class="subTitle"
                :class="{ subTitleActive: item.opResult !== 'PASS' }"
              >
                {{ getSub(item) }}
              </div>
            </template> -->
            <template v-if="item.id" slot="description">
              <div
                v-for="(item2, index2) in item.eventLogList"
                :key="index2"
                class="description-box"
              >
                <a-descriptions class="pt-2">
                  <!--处理人-->
                  <a-descriptions-item :label="`${$t('HANDLER')}`">{{
                    item2.opUserRealName || "--"
                  }}</a-descriptions-item>
                  <!--处理时间-->
                  <a-descriptions-item :label="`${$t('HANDLER_TIME')}`">{{
                    item2.opTime || "--"
                  }}</a-descriptions-item>
                  <!--扩展字段-->
                  <a-descriptions-item
                    v-for="(itemA, indexA) in getJson(item2)"
                    :key="indexA"
                    :label="$t(itemA.i18nCode)"
                    >{{ itemA.fieldValue || "--" }}</a-descriptions-item
                  >
                  <!--驳回原因-->
                  <a-descriptions-item
                    v-if="item2.opResult !== 'PASS'"
                    :label="`${$t('EPMS_REJECT_REASON')}`"
                    >{{ item2.rejectReason || "--" }}</a-descriptions-item
                  >
                  <!--备注-->
                  <a-descriptions-item :label="`${$t('REMARK')}`">{{
                    item2.remark || "--"
                  }}</a-descriptions-item>
                </a-descriptions>
                <div class="repair_order_item repair_order_item_line">
                  <a-row v-if="item2.imgUrlList.length > 0" :gutter="24">
                    <a-col :span="18">
                      <MultipleUpload
                        :image-url-list="item2.imgUrlList"
                        :limit="item2.imgUrlList.length"
                        :is-show-upload-button="false"
                      />
                    </a-col>
                  </a-row>
                  <a-row :gutter="24">
                    <a-col :span="24">
                      <div
                        v-for="(itemB, indexB) in item2.fileUrlList"
                        :key="indexB"
                        class="file_item flex items-center mb-2"
                        @click="
                          dlBkddPdf(`${systemConfig.FILE_SERVER}${itemB.url}`)
                        "
                      >
                        <Icon type="icon-cur-file-text" />
                        <span class="ml-1 cursor-pointer">{{
                          itemB.originalFileName
                        }}</span>
                      </div>
                    </a-col>
                  </a-row>
                </div>
                <div
                  v-if="item2.opResult === 'PASS'"
                  style="position: absolute; top: 3px; right: 20px"
                >
                  <svg-icon
                    icon-class="pass"
                    style="width: 83px; height: 35px; margin-top: 10px"
                  />
                </div>
                <div v-else style="position: absolute; top: 3px; right: 20px">
                  <svg-icon
                    icon-class="no_pass"
                    style="width: 83px; height: 35px; margin-top: 10px"
                  />
                </div>
              </div>
            </template>
          </a-step>
          <a-step
            v-for="(itemA, indexA) in notArr"
            :key="indexA + list.length"
            :current="-1"
            status="process"
            disabled
          >
            <span slot="icon" class="status-icon" style="background: #d4d4d4">
              {{ indexA + list.length + 1 }}
            </span>
            <template slot="title">
              <div class="step-title">
                {{ itemA.statusName }}
              </div>
            </template>
            <template v-if="indexA < notArr.length - 1" slot="description">
              <div class="description-box">
                <a-descriptions class="pt-2">
                  <!--处理人-->
                  <a-descriptions-item
                    v-if="itemA.userList.length"
                    :label="`${$t('HANDLER')}`"
                  >
                    {{ getOpUser(itemA) }}
                  </a-descriptions-item>
                  <a-descriptions-item
                    v-if="itemA.groupList.length"
                    :label="`${$t('HANDLING_PEOPLE')}`"
                  >
                    {{ getOpUserGroup(itemA) }}
                  </a-descriptions-item>
                </a-descriptions>
              </div>
            </template>
          </a-step>
        </a-steps>
      </div>
    </a-collapse-panel>
  </a-collapse>
</template>
<script>
import { mapState } from "vuex";
import ApiConstant from "@/api/ApiConstant";
import { Icon } from "@mega-design/ui-vue";
import MultipleUpload from "@/components/epms/EventDetail/uploadPicture/multipleUpload";

export default {
  components: { Icon, MultipleUpload },
  props: {
    stepIndex: {
      type: Number,
      default: 0,
    },
    logList: {
      type: Array,
      default() {
        return [];
      },
    },
    stepList: {
      type: Array,
      default() {
        return [];
      },
    },
    yesNoList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      cIndex: 0,
      activeKey: "a",
      detailData: {},
      list: [],
      passList: [
        { label: this.$t("PASSAGE"), value: "PASS" },
        { label: this.$t("REJECT"), value: "REJECT" },
      ],
    };
  },
  computed: {
    ...mapState({
      systemConfig: (state) => state.app.systemConfig,
    }),
    notArr() {
      let notArr = [];
      if (this.list.length) {
        const lastStep = this.list[this.list.length - 1];
        if (lastStep.opResult === "REJECT") {
          const stepId = lastStep.eventLogList[0].rejectToStepId;
          const result = this.stepList.findIndex((list) => list.id === stepId);
          result > -1 && (notArr = this.stepList.slice(result));
        } else {
          const stepId = lastStep.processStepId;
          const result = this.stepList.findIndex((list) => list.id === stepId);
          result > -1 && (notArr = this.stepList.slice(result + 1));
        }
      } else {
        notArr = [...this.stepList];
      }
      return notArr;
    },
  },
  watch: {
    logList: {
      handler(newVal, oldVal) {
        if (newVal && newVal.length > 0) {
          const suffixs = [
            ".png",
            ".jpg",
            ".gif",
            ".jepg",
            ".jpeg",
            ".ico",
            ".svg",
          ];
          newVal.forEach((itemA) => {
            const ele = itemA;
            const pdfsuffixs = [".pdf", ".PDF"];
            const imgUrlList = [];
            const fileUrlList = [];
            if (itemA.fileList) {
              itemA.fileList.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);
                }
              });
              ele.imgUrlList = [...imgUrlList];
              ele.fileUrlList = [...fileUrlList];
            }
          });
          // 重新修改数据结构
          let lastProcessStepId = newVal[0].processStepId;
          const newArr = [
            {
              eventLogList: [],
              statusName: newVal[0].statusName,
              processStepId: newVal[0].processStepId,
              id: newVal[0].id,
              opResult: "PASS",
            },
          ];
          let curNewArrIndex = 0;
          newVal.forEach((itemA) => {
            if (itemA.processStepId !== lastProcessStepId) {
              // eslint-disable-next-line no-plusplus
              curNewArrIndex++;
              lastProcessStepId = itemA.processStepId;
            }
            if (!newArr[curNewArrIndex]) {
              newArr[curNewArrIndex] = {
                eventLogList: [],
                statusName: itemA.statusName,
                processStepId: itemA.processStepId,
                id: itemA.id,
                opResult: "PASS",
              };
            }
            if (itemA.opResult && itemA.opResult !== "PASS") {
              newArr[curNewArrIndex].opResult = "REJECT";
            }
            newArr[curNewArrIndex].eventLogList.push(itemA);
          });
          this.list = [...newArr];
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    getStatusColor(name) {
      const result = this.stepList.find(
        (item) => item.statusName === name.toString()
      );
      return result ? result.statusColor : "";
    },
    formatData(listName, status = "") {
      const data = this[listName];
      const result = data.find((item) => item.value === status.toString());
      return result ? result.label : "";
    },
    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();
    },
    getNum(data) {
      const index = this.stepList.findIndex(
        (item) => item.id === data.processStepId
      );
      return index + 1;
    },
    getSub(data) {
      const obj = this.passList.find((item) => item.value === data.opResult);
      return obj.label;
    },
    getOpUser(data) {
      const userStr = data.userList
        .map((item) => item.name || item.userRealName)
        .join(",");
      return userStr;
    },
    getOpUserGroup(data) {
      const groupStr = data.groupList.map((item) => item.groupName).join(",");
      return groupStr;
    },
    getJson(data) {
      const list = data.extFieldValueJson
        ? JSON.parse(data.extFieldValueJson)
        : [];
      return list;
    },
  },
};
</script>
<style scoped lang="less">
.step-box {
  position: relative;
  margin-bottom: 20px;
  .circle-box {
    position: relative;
    width: 50px;
    height: 50px;
  }
  .circle {
    position: absolute;
    left: 9px;
    top: 9px;
    width: 32px;
    height: 32px;
    background: #006896;
    border-radius: 50%;
    text-align: center;
    line-height: 32px;
    color: #fff;
    font-size: 14px;
  }
  .active-circle {
    position: absolute;
    border-radius: 50%;
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
    border: solid 9px rgba(0, 104, 150, 0.1);
  }
  .line {
    position: absolute;
    left: -15px;
    top: 25px;
    width: 25px;
    border-top: dashed 1px #cccfd1;
  }
}
.tag-box {
  padding: 0px 12px;
  background: none;
  border-radius: 2px;
  color: #006896;
  border: 1px solid rgba(0, 104, 150, 0.5);
}
.description-box {
  position: relative;
  padding: 12px;
  background: #f5f7fa;
  border-radius: 6px;
}
.description-box + .description-box {
  margin-top: 10px;
}
.label {
  color: #999;
  margin-right: 8px;
}
.border-dashed {
  margin-top: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #bfc2c7;
}
.num {
  width: 0;
  height: 0;
}
/deep/ .ant-steps-vertical .ant-steps-item-icon {
  width: 32px;
}
.step-title {
  // padding: 0px 12px;
  // border-radius: 5px;
  // background: #006896;
  // color: #fff;
  // margin-bottom: 10px;
  color: #333;
  margin-right: 8px;
}
.subTitle {
  padding: 0 8px;
  color: #006896;
  border-radius: 8px;
  display: inline-block;
  line-height: 30px;
  height: 30px;
}
.subTitleActive {
  color: #e50a0f;
}
.ant-steps-item-title {
  display: flex;
}
.file_item {
  height: 30px;
  color: rgba(0, 104, 150, 1);
}
.status-icon {
  display: inline-block;
  width: 2.25rem;
  height: 2.25rem;
  line-height: 2.2rem;
  color: #fff;
  border-radius: 2.25rem;
}
</style>
