<!--事件详情-->
<template>
  <div v-loading="wholeLoading" class="app-container">
    <!-- 基础信息表单 -->
    <div>
      <el-row class="table-title">
        <el-col :span="6"
          ><div class="title-header">
            <i class="el-icon-tickets" />事件基础信息
          </div></el-col
        >
      </el-row>
      <case-form-process
        v-if="showProcess"
        ref="caseFormProcess"
        :case-form="caseDetail"
      />
      <case-form-read v-else ref="caseFormRead" :case-form="caseDetail" />
    </div>

    <!-- 事件处理流程 -->
    <div v-if="caseType != '应急事件'">
      <el-row class="table-title">
        <el-col :span="6"
          ><div class="title-header">
            <i class="el-icon-tickets" />事件处理流程
          </div></el-col
        >
      </el-row>
      <el-row>
        <el-col :span="6">
          <caseImgShow :imgs="caseImgs" />
        </el-col>
        <el-col :span="6">
          <caseProcessTable :list="processList" />
        </el-col>
      </el-row>
    </div>

    <!-- 事件流程处理 -->
    <div v-if="showProcess && caseDetail.id">
      <el-row class="table-title">
        <el-col :span="6"
          ><div class="title-header">
            <i class="el-icon-tickets" />事件流程处理
          </div></el-col
        >
      </el-row>
      <case-process
        ref="caseProcess"
        :biz-id="caseDetail.id"
        :process-id="caseDetail.processId"
        :task-id="taskId"
        :case-state="caseDetail.caseState"
        :limited-time="caseDetail.limitedTime"
        :case-detail="caseDetail"
        @loading="loading"
        @submitSuccess="submitSuccess"
        @submitError="submitError"
      />
    </div>
    <!-- 事件处理记录 -->
    <div v-if="caseDetail.processId">
      <case-record
        ref="caseRecord"
        :process-id="caseDetail.processId"
        :id="id"
      />
    </div>

    <!-- 事件地图 -->
    <div>
      <el-row class="table-title">
        <el-col :span="6"
          ><div class="title-header">
            <i class="el-icon-tickets" />事件地图
          </div></el-col
        >
      </el-row>
      <el-row>
        <el-col :span="24">
          <f-map ref="mapDetail" style="height: 40vh; padding: 20px 0px" />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import CaseFormRead from "./caseCommon/caseFormRead";
import CaseFormProcess from "./caseCommon/caseFormProcess";
import CaseProcess from "./caseCommon/caseProcess";
import CaseRecord from "./caseCommon/caseRecord";
import caseImgShow from "./caseCommon/caseImgShow";
import caseProcessTable from "./caseCommon/caseProcessTable.vue";
import { caseDetail, eventStepList } from "@/api/callCase";
import FMap from "../../components/fMap/components/fMap";
import process from "./caseCommon/process.json";
export default {
  name: "CaseDetail",
  components: {
    FMap,
    CaseFormRead,
    CaseProcess,
    CaseRecord,
    CaseFormProcess,
    caseImgShow,
    caseProcessTable,
  },
  data() {
    return {
      id: "",
      taskId: "", // 当前任务id，只有任务处理的详情中需要，会签用
      caseDetail: {},
      caseType: "",
      caseImgs: [
        "https://t7.baidu.com/it/u=1742010762,3975931984&fm=193&f=GIF",
        "https://t7.baidu.com/it/u=1302518827,2012573433&fm=193&f=GIF",
      ], // 事件流程图片
      processList: [], // 事件流程信息
      showProcess: false,
      wholeLoading: false,
    };
  },
  created() {
    // 获取事件分类类型
    let caseTypeMap = {
      2: "应急事件",
      3: "运维事件",
      4: "精细化管理事件",
    };
    let caseType = caseTypeMap[this.$route.query.caseType];
    this.caseType = caseType;
    //   this.id = this.$route.params.id;
    // if (this.$route.query.taskId) {
    //   this.taskId = this.$route.query.taskId;
    // }
    // if (this.$route.query.showProcess) {
    //   this.showProcess = this.$route.query.showProcess;
    // }
    // this.fetchDetail();
  },
  mounted() {
    this.id = this.$route.params.id;
    if (this.$route.query.taskId) {
      this.taskId = this.$route.query.taskId;
    }
    if (this.$route.query.showProcess) {
      this.showProcess = this.$route.query.showProcess;
    }
    this.fetchDetail();
  },
  methods: {
    /**
     * 获取事件详情
     */
    fetchDetail() {
      if (this.id) {
        this.wholeLoading = true;
        caseDetail(this.id).then((response) => {
          this.caseDetail = response.data;
          // if (this.caseDetail.caseImage) {
          //     const base_url = process.env.BASE_API + "/static/";
          //     const image_ori = this.caseDetail.caseImage.split(";");
          //     this.caseImgs = image_ori.map((item) => base_url + item);
          //   } else {
          //     this.caseImgs = [];
          //   }
          this.wholeLoading = false;
          this.$refs.mapDetail.initMap(true, this.caseDetail);
        });

        // 通过类型判断传递内容
        // id为caseId
        if (this.caseType == "运维事件") {
          // 获取返回的数据
          this.$nextTick(() => {
            this.processList = this.treeDataToCompressed([
              ...process.data,
            ]).reverse();
          });
          // let propsMap = {
          //   processTitle: "processTaskName",
          //   time: "createTime",
          //   sender: "processAssigneeName",
          //   incept: "processAssigneeName",
          //   detail: "processTaskName",
          //   nextId: "processNextAssigneeId",
          // };

          // this.$nextTick(async ()=>{
          //   this.processList = await this.handlePropstoArray(
          //   this.processList,
          //   propsMap
          // );
          // })
          return;
          this.processList = this.processList.map((item) => {
            return {
              processTitle: item.processTaskName,
              time: item.createTime,
              sender: item.processAssigneeName,
              incept: item.processAssigneeName,
              detail: item.processTaskName,
              nextId: item.processNextAssigneeId,
            };
          });
          console.log(this.processList);
          return;
          // 获取事件流程详情
          eventStepList({ caseId: this.id }).then((res) => {
            console.log(res);

            // 获取流程节点图片以及流程数组数据
          });
        } else if (this.caseType == "精细化管理事件") {
        }
        return;
      }
    },
    handlePropstoArray(array, props) {
      return new Promise((resolve, reject) => {
        let jsonData = JSON.stringify(array);
        for (const key in props) {
          var reg = new RegExp(props[key], "g");
          jsonData = jsonData.replace(reg, key);
        }
        resolve(JSON.parse(jsonData));
      });
    },
    treeDataToCompressed(source) {
      let target = [];
      for (const i in source) {
        target.push(source[i].info);
        if (
          Array.isArray(source[i].children) &&
          source[i].children.length > 0
        ) {
          target = [
            ...target,
            ...this.treeDataToCompressed(source[i].children),
          ];
        }
      }
      return target;
    },
    loading() {
      this.wholeLoading = true;
    },
    /**
     * 提交成功之后
     */
    submitSuccess() {
      console.log("submitSuccess");
      this.$message.success("提交成功");
      this.showProcess = false;
      this.$route.query.showProcess = false;
      this.wholeLoading = false;
      this.fetchDetail();
      this.$refs["caseRecord"].fetchProcessRecords();
    },
    /**
     * 提交失败之后
     */
    submitError() {
      console.log("submitError");
      this.wholeLoading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.table-title {
  background-color: rgba(243, 243, 243, 1);
  height: 46px;
  .title-header {
    line-height: 46px;
    color: #606266;
    font-size: 15px;
    i {
      margin-left: 5px;
      margin-right: 5px;
    }
  }
}
</style>