<template>
  <a-layout style="padding: 25px;max-height: 500px;background-color: #fff;">
    <a-timeline style="width:100%">
      <a-timeline-item
        v-for="(activity, index) in ProcInstHistory"
        :key="index"
        :color="activity.color"
      >
        <a-icon slot="dot" :type="activity.icon" :style="{color: activity.color}" style="font-size: 16px;" />
        <p>{{ activity.timestamp }}</p>
        <a-card v-if="!activity.size" style="position: relative">
          <img
            src="../../../assets/images/chong.png"
            style="position:absolute;z-index:1000;top:3px;right:3px;width: 25px;height:25px;margin-left: 20px;"
            v-if="activity.isDlyHeavy=='1'" />
          <img
            src="../../../assets/images/delay.png"
            style="position:absolute;z-index:1000;top:3px;right:3px;width: 25px;height:25px;margin-left: 20px;"
            v-else-if="activity.isDlyFlow=='1'" />
          <h5>{{ activity.name }}</h5>
          <!-- <h5>{{ activity.currentActivity }}</h5> -->
          <p style="font-size: 12px;padding-top: 5px;">{{ activity.content }}</p>
        </a-card>
        <p v-if="activity.size">{{ activity.content }}</p>
        <span
          v-if="activity.icon!='ellipsis' && isShow"
          style="position: absolute;z-index: 1000;right:40px;bottom:3px;color:dodgerblue;cursor:pointer;"
          @click="showFlowDialog(activity)">编辑</span>
        <span
          v-if="activity.icon!='ellipsis' && isShow"
          style="position: absolute;z-index: 1000;right:3px;bottom:3px;color:palevioletred;cursor:pointer;"
          @click="deleteLine(activity.id)">删除</span>
      </a-timeline-item>
    </a-timeline>
    <a-modal title="编辑流程" v-model="isflow" @ok="submitFlow()" @cancel="isflow = false" width="400px">
      <a-form :model="flowObj" :label-col="{span: 6}" :wrapper-col="{span: 18}">
        <a-form-item label="整改人">
          <a-input v-model:value="flowObj.moduserid" autocomplete="off" placeholder="整改人" style="width:90%;"/>
        </a-form-item>
        <a-form-item label="流程说明">
          <a-input v-model:value="flowObj.auditidea" autocomplete="off" placeholder="流程说明" style="width:90%;"/>
        </a-form-item>
        <a-form-item label="流程类型">
          <a-select v-model:value="flow" placeholder="流程日期" style="width:90%">
            <a-select-option value="0">无</a-select-option>
            <a-select-option value="1">延期</a-select-option>
            <a-select-option value="2">重新明确整改要求</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="流程时间">
          <a-date-picker v-model:value="flowObj.moddate" placeholder="流程时间" format="YYYY-MM-DD hh:mm:ss" show-time style="width: 90%;" />
        </a-form-item>
      </a-form>
    </a-modal>
  </a-layout>
</template>

<script>
import moment from 'moment';
import request from '../../../utils/gw_ajax_request';
import { formatDateTime, formatDateTime2 } from '../../../utils/gw_date';
import {
  formatWorkflowStat,
  requestPblmProcInstHistory,
} from '../Common/rectify_api';
export default {
  name: 'PblmRectifyTimeLine',
  props: ['pblmId', 'pType', 'pblmCurrentWorkflowStat', 'city', 'zgXianOrgId'],
  data() {
    return {
      isFinish: ['28', '2208', '2103'],
      ProcInstHistory: [],
      flowObj: {
        moduserid: '',
        auditidea: '',
        moddate: '',
      },
      isflow: false,
      flow: '',
      moment,
    };
  },
  created() {
    this.getPblmProcInstHistory();
  },
  computed: {
    formatDateTime() {
      return formatDateTime2;
    },
    formatWorkflowStat() {
      return formatWorkflowStat;
    },
    isShow() {
      return (
        localStorage.getItem('persId') == 'ff2d65f546b84447b7501523cc460df0'
      );
    },
  },
  methods: {
    submitFlow() {
      if (this.flow == '2') {
        this.flowObj.isDlyHeavy = '1';
        this.flowObj.isDlyFlow = '0';
      } else {
        if (this.flow == '1') {
          this.flowObj.isDlyFlow = '1';
          this.flowObj.isDlyHeavy = '0';
        } else {
          this.flowObj.isDlyFlow = '0';
          this.flowObj.isDlyHeavy = '0';
        }
      }
      this.$confirm({
        title: '提示',
        content: '确认要提交吗？, 是否继续?',
        okType: 'warning',
        onOk: () => {
          request
            .post(`/dc/insp/pblmAudit/updateAuditInfo`, this.flowObj)
            .then((res) => {
              if (res.success) {
                this.ProcInstHistory = [];
                this.getPblmProcInstHistory();
                this.isflow = false;
              } else {
                this.$message.warning(res.message);
              }
            });
        },
        onCancel: () => {
          this.$message.info('已取消');
        },
      });
    },
    showFlowDialog(data) {
      this.flowObj.moduserid = data.moduserid;
      this.flowObj.auditidea = data.auditidea;
      this.flowObj.moddate = moment(data.moddate);
      this.flowObj.id = data.id;
      if (data.isDlyHeavy == '1') {
        this.flow = '2';
      } else {
        if (data.isDlyFlow == '1') {
          this.flow = '1';
        } else {
          this.flow = '0';
        }
      }
      this.isflow = true;
    },
    deleteLine(id) {
      this.$confirm({
        title: '提示',
        content: '确认要删除吗？, 是否继续?',
        okType: 'warning',
        onOk: () => {
          request.get(`/dc/insp/pblmAudit/delAuditInfo/${id}`).then((res) => {
            if (res.success) {
              this.ProcInstHistory = [];
              this.getPblmProcInstHistory();
            } else {
              this.$message.warning(res.message);
            }
          });
        },
        onCancel: () => {
          this.$message.info('已取消');
        },
      });
    },
    // 获取待下发问题列表数据
    getPblmProcInstHistory() {
      this.loading = true;
      requestPblmProcInstHistory(this.pblmId).then((res) => {
        this.loading = false;
        if (res.data !== null) {
          const historyData = res.data;
          if (historyData.length > 0) {
            this.$emit('changeBtn', res.data[0].moduserid);
            for (let i = historyData.length - 1; i >= 0; i--) {
              const activityData = {};
              // 审批意见如果是系统默认只则不显示意见 add by Jonas 20200718
              let actComment = historyData[i].auditidea;
              if (historyData[i].workflowStat == '27-2') {
                actComment = actComment
                  ? actComment
                      .replace('- 系统默认-同意', '')
                      .replace('系统默认-同意', '')
                      .replace('- 同意', '')
                      .replace('-同意', '')
                  : actComment;
              }

              if (actComment) {
                activityData.content =
                  historyData[i].moduserid + ' - ' + actComment;
              } else {
                activityData.content = historyData[i].moduserid;
              }
              // actComment = actComment.indexOf('系统默认')>=0?actComment.split('-')[0]:actComment;

              activityData.currentActivity = historyData[i].name;
              activityData.name = historyData[i].name;
              activityData.icon = 'check-circle';
              activityData.color = '#0bbd87';
              activityData.timestamp = formatDateTime2(historyData[i].moddate);
              activityData.isDlyFlow = historyData[i].isDlyFlow;
              activityData.isDlyHeavy = historyData[i].isDlyHeavy;
              activityData.moduserid = historyData[i].moduserid;
              activityData.id = historyData[i].id;
              activityData.auditidea = historyData[i].auditidea;
              activityData.moddate = historyData[i].moddate;
              this.ProcInstHistory.push(activityData);
              if (
                i === 0 &&
                (this.pblmCurrentWorkflowStat === '28' ||
                  this.pblmCurrentWorkflowStat === '2208' ||
                  this.pblmCurrentWorkflowStat === '2103')
              ) {
                // 添加归档结束节点
                const endProc = {};
                endProc.content =
                  '系统 - ' +
                  formatWorkflowStat(
                    this.pblmCurrentWorkflowStat,
                    this.zgXianOrgId,
                  );
                endProc.currentActivity = formatWorkflowStat(
                  this.pblmCurrentWorkflowStat,
                  this.zgXianOrgId,
                );
                endProc.name = '系统归档销号';
                endProc.icon = 'check-circle';
                endProc.color = '#0bbd87';
                endProc.timestamp = formatDateTime2(historyData[i].moddate);
                this.ProcInstHistory.push(endProc);
              }
            }
            if (
              this.pblmCurrentWorkflowStat !== '28' &&
              this.pblmCurrentWorkflowStat !== '2208' &&
              this.pblmCurrentWorkflowStat !== '2103'
            ) {
              const currentAct = {};
              currentAct.content =
                this.pblmCurrentWorkflowStat == '110'
                  ? '系统-问题销号'
                  : '正在进行中 ';
              currentAct.currentActivity = formatWorkflowStat(
                this.pblmCurrentWorkflowStat,
                this.zgXianOrgId,
              );
              currentAct.name = formatWorkflowStat(
                this.pblmCurrentWorkflowStat,
                this.zgXianOrgId,
              );
              currentAct.icon = 'check-circle';
              currentAct.type = 'primary';
              currentAct.timestamp = formatDateTime(new Date());
              this.ProcInstHistory.push(currentAct);
            }
          } else {
            if (
              this.pblmCurrentWorkflowStat !== '28' &&
              this.pblmCurrentWorkflowStat !== '2208' &&
              this.pblmCurrentWorkflowStat !== '2103'
            ) {
              const startAct = {};
              startAct.content = '正在进行中 ';
              startAct.currentActivity = formatWorkflowStat(
                this.pblmCurrentWorkflowStat,
                this.zgXianOrgId,
              );
              startAct.name = formatWorkflowStat(
                this.pblmCurrentWorkflowStat,
                this.zgXianOrgId,
              );
              startAct.icon = 'ellipsis';
              startAct.type = 'primary';
              startAct.timestamp = formatDateTime(new Date());
              this.ProcInstHistory.push(startAct);
            }
          }
        } else {
          this.ProcInstHistory = [];
        }
      });
    },
  },
};
</script>

<style lang='less' scoped>

</style>
