<template>
  <div class="meta-abnormalTimeline-wrap">
    <!-- 第一层循环-分模块 -->
    <div
      v-for="(modular, modularindex) in timeLineContent"
      :key="modularindex"
      class="card-list"
    >
      <!-- <meta-card class="card-list"> -->
      <!-- 第二层循环-遍历每一条记录 -->
      <div v-for="(item, index) in modular.content" :key="index">
        <!-- 控制协同记录的展开收起显示与否 -->
        <div
          class="time-line"
          v-show="
            item.flagList.showFlag
          "
        >
          <div
            class="all-item"
            :class="index != modular.content.length - 1 ? 'item' : 'lastitem'"
          ></div>
          <div class="record">
            <div class="date">{{ item.abndate }}&nbsp;{{ item.abntime }}</div>
            <meta-card>
              <ul>
                <!-- 节点名称（例如第一级处理人） -->
                <li v-if="item.flagList && item.flagList.nodeNameFlag">
                  {{ item.nodename }}
                </li>
                <li>{{ getEnumCon(item.recordtype) }}</li>
                <!-- 待响应人(详情点击跳转处理人页面) -->
                <li
                  v-if="item.flagList && item.flagList.userListFlag == 1"
                  class="clearfix"
                >
                  <span class="fl">待响应人：{{ item.optnamelist }}</span>
                  <svg-icon
                    :icon-class="'详情'"
                    @click="toDetail(item.optid)"
                    class="fl"
                    color="#cdcacd"
                  ></svg-icon>
                </li>
                <!-- 提报人 -->
                <li v-if="item.flagList && item.flagList.userListFlag == 2">
                  {{ item.adduser }}：<span
                    v-if="item && item.tel"
                    @click="callPhone(item.tel)"
                    >{{ item.tel }}</span
                  >
                  <span v-else>{{ item.tel }}</span>
                </li>
                <!-- 协同记录相关 -->
                <li v-for="(content, index) in item.conMapKey" :key="index">
                  <div
                    class="clearfix"
                    v-if="
                      item.conMap &&
                      item.conMap.get(content) != null &&
                      item.conMap.get(content) != ' '
                    "
                  >
                    <span class="fl">{{ content }}：</span>
                    <!-- 协同记录需要有展开收起动效linkFlag控制展开，收起（true） -->
                    <span
                      class="fl"
                      v-if="content == '协同记录' && item.conMap"
                      @click="showOrHid(item,modularindex)"
                    >
                      <svg-icon
                        :icon-class="item.flagList.linkFlag ? '收起' : '展开'"
                        color="#cdcacd"
                      ></svg-icon>
                    </span>
                    <span v-if="content != '协同记录' && item.conMap">{{
                      item.conMap.get(content)
                    }}</span>
                  </div>
                </li>
                <!-- 相关图片proima -->
                <li v-if="item.proima">
                  <img
                    v-for="(img, index) in item.proima.split(',')"
                    :key="index"
                    :src="getImgUrl(img)"
                    alt=""
                    class="proima-img"
                    :start-position="index"
                    @click="openImg(getDocUrlList(item.proima), index)"
                  />
                </li>
              </ul>
            </meta-card>
          </div>
        </div>
      </div>
      <!-- </meta-card> -->
    </div>
    <!-- 待响应人弹窗内容 -->
    <van-popup
      v-model:show="responderShow"
      round
      closeable
      position="bottom"
      :style="{ height: '60%' }"
    >
      <meta-member :optid="optid"></meta-member>
    </van-popup>
    <!-- <van-dialog v-model:show="responderShow" confirmButtonColor="#1D2088">
      <meta-member :optid="optid"></meta-member>
    </van-dialog> -->
  </div>
</template>
<script>
import {
  getFormatDateBySymbol,
  getEnumText,
  getDocUrl,
  callPhone,
} from "@/common/utils/tool";
import { ImagePreview } from "vant";
export default {
  name: "MetaAbnormalTimeline",
  props: {
    timelineList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    buttonList: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      responderShow: false, // 待响应人弹窗显示
      timeLineContent: [],
      titleMap: new Map(),
      titleType: {
        zzjg: "组织结构",
        rwcl: "任务处理",
        bxtr: "被协同人",
        cxyy: "撤销原因",
        bhyy: "驳回原因",
        cljg: "处理结果",
        clnr: "处理内容",
        jcms: "解除描述",
        bhly: "驳回理由",
        yjyy: "移交原因",
        byjr: "被移交人",
        ksms: "开始描述",
        xtjl: "协同记录",
        xtxx: "协同信息",
        zrr: "责任人",
      },
      optid: "",
    };
  },
  watch: {
    timelineList() {
      // titleMap赋值
      this.setTitleMap();
      this.timeLineContent = this.timelineList;
      this.onDealData();
    },
  },
  methods: {
    showOrHid(opt,index){
      let optList = this.timeLineContent[index].content;

      let flag = false;
      //当前opt要保存展开收起字段
      for (let idx in optList) {
        if (optList[idx].customid == opt['customid']) {
          optList[idx].flagList.linkFlag = !opt['flagList'].linkFlag;//详情改为收起，收起改为详情
          optList[idx].conMap.set(this.titleType.xtjl,optList[idx].flagList.linkFlag ? '收起' : '详情');
          flag = true;
          continue
        }
        //向下寻找需要收起展开的数据
        if (flag) {
          if (optList[idx].parentid != "" && optList[idx].parentid != null) {
            optList[idx].flagList.showFlag = !optList[idx].flagList.showFlag;
          } else {
            flag = false;
          }
        }
      }
      //将数据的显示或者隐藏字段进行设置
      this.timeLineContent[index].content = optList;
      console.log(this.timeLineContent)
    },
    // 呼叫手机号
    callPhone,
    // 图片预览
    openImg(imgarr, index) {
      ImagePreview({
        images: imgarr,
        startPosition: index,
      });
    },
    // 时间线处理图片成数组
    getDocUrlList(pra) {
      let thisImg = pra.split(",");
      let thisImgArr = [];
      thisImg.forEach((item) => {
        thisImgArr.push(getDocUrl(item));
      });
      return thisImgArr;
    },
    //字段的处理
    onDealData() {
      let optlists = this.timeLineContent;
      for(let i = optlists.length-1 ; i >= 0 ; i--){
        if (optlists[i]['addFlag'] || optlists[i].recordtype == '14') {
          optlists.splice(i,1);
        }
      }

      this.timeLineContent.filter((item, index) => {
        // 时间线的日期不要年并且日期与时间是分开的
        let timeList = item.addtime.split(" ");
        item.abndate = getFormatDateBySymbol(timeList[0], "m-d");
        item.abntime = timeList[1];
        let deptnameList = item.deptpathname.split(">");
        item.deptLastedname = deptnameList[deptnameList.length - 1];
        //为每个opt自定义唯一id
        item.customid = "custom" + index;
        //判断数据是否为手动添加
        // addFlag?
        // recordtype?
        if (!(item.addFlag || item.recordtype == "14")) {
          //加显示权限
          let flagList = this.setFlag(index, item);
          item.flagList = flagList;
          //内容列表数据
          item = this.setContentData(item);
          let length = this.timeLineContent.length;
          // 2022/03/15 李玫蓉 判断当前类型为0待响应 6手动升级 且存在索引值比当前索引值大的响应异常1
          let showflag = true;
          //判断当前是不为最后一条记录
          if (parseInt(index) < length - 1) {
            // 截取新的list
            let newlist = this.timeLineContent.slice(
              parseInt(index) + 1,
              length
            );
            newlist.forEach((newlistItem) => {
              if (newlistItem.recordtype == "1") {
                showflag = false;
                return;
              }
            });
          }
          // 新判断
          if ((item.recordtype == "0" || item.recordtype == "6") && showflag) {
            // if ((opt.recordtype == '0' && length - parseInt(idx) == 1) || (opt.recordtype == '6' && length - parseInt(idx) == 1)) {//
            //新建一个待响应的opt，数据从本条获取
            let newopt;
            newopt = this.setAddData(item);
            this.timeLineContent.push(newopt);
          }
        }
      });
      console.log(this.timeLineContent)
      this.filterData();
    },
    // 处理好数据做过滤，及按照分模块
    filterData() {
      let currentArr = []; // 所有的数据集
      let listArr = []; // 模块
      for (let i = 0; i < this.timeLineContent.length; i++) {
          listArr.push(this.timeLineContent[i]);
          if (this.timeLineContent[i].flagList.lineFlag) {
            // 代表要进行分模块
            currentArr.push({ showRecord: true, content: listArr });
            listArr = [];
          } else {
            if (i == this.timeLineContent.length - 1) {
              //当为最后一个元素时，将模块中数据保存出来
              currentArr.push({ showRecord: true, content: listArr });
            }
          }
      }
      this.timeLineContent = currentArr;
    },
    //按钮权限处理
    setFlag(idx, opt) {
      let flagList = {
        // lineFlag: false,//下划线(vue项目不需要)
        nodeNameFlag: false, //显示节点名称
        userListFlag: 3, //1：待响应人员集合，2：人员电话 3：不显示
        // optcolor: '#00FA9A', // 颜色显示
        showFlag: true, //是否显示记录
        linkFlag: false, // 收起为true 详情为false
        showlinkFlag: false, //是否需要显示收起详情，在响应状态是不一定的，当显示的时候再判断显示收起还是详情
      };
      let lastopt;
      let nextopt;
      nextopt =
        idx == this.timeLineContent.length - 1
          ? this.timeLineContent[this.timeLineContent.length - 1]
          : this.timeLineContent[parseInt(idx) + 1];
      // vue项目是用卡片来分割
      if (idx == "0" || nextopt.nodename != opt.nodename) {
        flagList.lineFlag = true;
      }
      // ？？
      lastopt =
        idx == "0"
          ? this.timeLineContent[0]
          : this.timeLineContent[parseInt(idx) - 1];
      if (lastopt.nodename != opt.nodename || idx == "1") {
        flagList.nodeNameFlag = true;
      }

      //显示人员
      if (lastopt.adduser != opt.adduser || idx == "0") {
        flagList.userListFlag = 2;
      }

      //显示是否显示详情收起
      if (nextopt.parentid != "" && nextopt.parentid != null) {
        flagList.showlinkFlag = true;
      }
      //是否显示协同数据
      if (
        this.timeLineContent[idx].parentid != "" &&
        this.timeLineContent[idx].parentid != null
      ) {
        flagList.showFlag = false;
      }
      return flagList;
    },
    // 内容列表数据
    setContentData(opt) {
      let conMap = new Map();
      let titleList = this.titleMap.get(opt.recordtype);
      if (titleList != null && titleList.length > 0) {
        for (let con of titleList) {
          let result = this.setContent(con, opt);
          if (
            result != null &&
            result != undefined &&
            result != "undefined" &&
            result != ""
          ) {
            conMap.set(con, this.setContent(con, opt));
          }
        }
        opt["conMap"] = conMap;
        let mapkeyList = new Array();
        for (let key of conMap.keys()) {
          mapkeyList.push(key);
        }
        opt["conMapKey"] = mapkeyList;
      }
      return opt;
    },
    // titleMap
    setTitleMap() {
      for (let i = 0; i <= 19; i++) {
        switch (i) {
          case 0: //新响应
            this.titleMap.set(i.toString(), [this.titleType.zzjg]);
            break;
          case 1: //响应异常
            this.titleMap.set(i.toString(), [
              this.titleType.zzjg,
              this.titleType.rwcl,
              this.titleType.xtjl,
            ]);
            break;
          case 2: //协同异常
            this.titleMap.set(i.toString(), [
              this.titleType.bxtr,
              this.titleType.xtxx,
            ]);
            break;
          case 3: //撤销协同异常
            this.titleMap.set(i.toString(), [
              this.titleType.zzjg,
              this.titleType.bxtr,
              this.titleType.cxyy,
            ]);
            break;
          case 4: //驳回协同异常
            this.titleMap.set(i.toString(), [
              this.titleType.zzjg,
              this.titleType.bhyy,
            ]);
            break;
          case 5: //完成
            this.titleMap.set(i.toString(), [this.titleType.cljg]);
            break;
          case 6: //升级
            this.titleMap.set(i.toString(), [this.titleType.clnr]);
            break;
          case 7: //解除
            this.titleMap.set(i.toString(), [this.titleType.jcms]);
            break;
          case 8: //取消
            this.titleMap.set(i.toString(), [
              this.titleType.zzjg,
              this.titleType.cxyy,
            ]);
            break;
          case 9: //驳回
            this.titleMap.set(i.toString(), [
              this.titleType.zzjg,
              this.titleType.bhly,
              this.titleType.xtjl
            ]);
            break;
          case 10: //移交
            this.titleMap.set(i.toString(), [
              this.titleType.yjyy,
              this.titleType.byjr,
              this.titleType.zzjg,
            ]);
            break;
          case 11: //开始
            this.titleMap.set(i.toString(), [
              this.titleType.ksms,
              this.titleType.xtjl,
            ]);
            break;
          case 12: //开始协同
            this.titleMap.set(i.toString(), [
              this.titleType.zzjg,
              this.titleType.ksms,
            ]);
            break;
          case 13: //结束协同
            this.titleMap.set(i.toString(), [
              this.titleType.zzjg,
              this.titleType.ksms,
            ]);
            break;
          case 14: //预警
            // this.titleMap.set(i,[this.titleType.yjyy,this.titleType.byjr,this.titleType.zzjg])
            break;
          case 19: //责任人
            this.titleMap.set("19", [this.titleType.zrr]);
            break;
        }
      }
    },
    setContent(key, opt) {
      let result = "";
      switch (key) {
        case this.titleType.zzjg: //组织结构
          result = opt["deptLastedname"];
          break;
        case this.titleType.rwcl: //任务处理
        case this.titleType.jcms: //解除描述
        case this.titleType.bhly: //驳回理由
        case this.titleType.cxyy: //撤销原因
        case this.titleType.xtxx: //协同信息
        case this.titleType.bhyy: //驳回原因
        case this.titleType.cljg: //处理结果
        case this.titleType.clnr: //处理内容
        case this.titleType.yjyy: //移交原因
        case this.titleType.ksms: //开始描述
          result = opt["submitcontent"];
          break;
        case this.titleType.bxtr: //被协同人
          result = opt["proUserName"];
          break;
        case this.titleType.byjr: //被移交人
          result = opt["proUserName"];
          break;
        case this.titleType.xtjl: //协同记录
          if (opt["flagList"].showlinkFlag) {
            result = opt["flagList"].linkFlag ? "收起" : "详情";
          }
          break;
        case this.titleType.zrr: //责任人
          result = opt["adduser"];
          break;
      }
      return result;
    },
    //新建一行数据
    setAddData(opt) {
      let newopt = {};
      newopt["recordtype"] = "0"; //待响应
      newopt["nodename"] = opt.nodename; //节点名称
      newopt["optnamelist"] = opt.optnamelist; //人员名称
      newopt["optid"] = opt.optid; //人员id
      newopt["addFlag"] = true; //手动添加标识
      newopt["addtime"] = opt.addtime; //时间
      if(newopt["addtime"]){
        let timeList = newopt["addtime"].split(" ");
        newopt["abndate"] = getFormatDateBySymbol(timeList[0], "m-d");
        newopt["abntime"] = timeList[1];
      }
      let flagList = {
        lineFlag: false, //下划线
        nodeNameFlag: true, //显示节点名称
        userListFlag: 1, //1：待响应人员集合，2：人员电话 3：不显示
        optcolor: "#00FA9A", // 颜色显示
        showFlag: true, //是否显示记录
        linkFlag: false, // 收起为true 详情为false
        showlinkFlag: false, //是否需要显示收起详情，在响应状态是不一定的，当显示的时候再判断显示收起还是详情
      };
      newopt["flagList"] = flagList; //按钮权限

      let conMap = new Map();
      let titleList = this.titleMap.get(newopt["recordtype"]);
      for (let con of titleList) {
        let result = this.setContent(con, opt);
        if (
          result != null &&
          result != undefined &&
          result != "undefined" &&
          result != ""
        ) {
          conMap.set(con, result);
        }
      }
      newopt["conMap"] = conMap;
      let mapkeyList = new Array();
      for (let key of conMap.keys()) {
        mapkeyList.push(key);
      }
      newopt["conMapKey"] = mapkeyList;
      return newopt;
    },
    getEnumCon(recordtype) {
      return getEnumText("recordtype", recordtype);
    },
    // 图片路径
    getImgUrl(url) {
      return getDocUrl(url);
    },
    // 处理人详情
    toDetail(optid) {
      this.responderShow = true;
      console.log(optid);
      this.optid = optid;
    },
  },
  mounted() {
    // titleMap赋值
    this.setTitleMap();
    this.timeLineContent = this.timelineList;
    this.onDealData();
    console.log(this.timeLineContent);
  },
};
</script>

<style lang="scss" scoped>
.meta-abnormalTimeline-wrap {
  font-size: 3.8vw;
  .card-list {
    padding: 0vw 10px;
    margin-top: 1.2vh;
    .time-line {
      display: flex;
      .all-item {
        margin-left: 3vw; /*用左边margin显示时间线*/
        width: 2vw;
        height: auto; /*高度由内容决定*/
        position: relative;
        cursor: pointer;
        line-height: 2vh;
      }
      .all-item::before {
        content: "";
        width: 3vw;
        height: 3vw;
        border-radius: 100%;
        background-color: #15ad31;
        position: absolute;
        left: -4.1vw;
        top: 0.8vh;
      }
      .item::after {
        content: "";
        width: 0.8vw;
        height: calc(100% + 0.8vw);
        background-color: #15ad31;
        position: absolute;
        top: 0.8vh;
        left: -3vw;
      }
      .record {
        //
        width: calc(100% - 5vw);
        padding-bottom: 1.4vh;
        line-height: 3vh;
        .date {
          color: #666666;
          margin-bottom: 0.6vh;
          margin-top: 0.2vh;
          padding-left: 0.8vw;
        }
        li {
          margin-bottom: 0.4vh;
          .proima-img {
            width: 16vw;
            height: 16vw;
            margin: 1vw;
          }
          svg {
            width: 3.73vw;
            height: 3.73vw;
            display: inline-block;
            margin-left: 2vw;
            margin-top: 1.4vw;
          }
        }
      }
    }
  }
}
</style>