<template>
  <div>
    <el-card>
      <!--流程审批-->
      <div class="about">
        <el-steps :active="data.lct.length" align-center finish-status="success">
          <el-step
            v-for="(item, index) in data.lct"
            :key="index"
            :title="item.activityName"
            :description="item.assigneeName"
            :status="statusArr[item.activityState]"
          />
        </el-steps>
      </div>
      <el-row
        v-show="
          (data.isCurrentUser &&
            flowStatus != 'REJECT' &&
            flowStatus != 'CANCEL' &&
            flowStatus != 'UN_SUBMIT' &&
            flowStatus != '0' &&
            flowStatus != '3' &&
            flowStatus != '4') ||
          zdShow
        "
      >
        <el-col style="margin-bottom: 10px; margin-top: 5px">

          <el-button
            @click="agreeFun"
            type="success"
            v-show="
              data.isCurrentUser &&
              flowStatus != 'REJECT' &&
              flowStatus != 'CANCEL' &&
              flowStatus != 'UN_SUBMIT' &&
              flowStatus != '0' &&
              flowStatus != '3' &&
              flowStatus != '4'
            "
            >同意</el-button
          >
          <el-button
            type="danger"
            @click="goReject"
            v-show="
              data.isCurrentUser &&
              flowStatus != 'REJECT' &&
              flowStatus != 'CANCEL' &&
              flowStatus != 'UN_SUBMIT' &&
              flowStatus != '0' &&
              flowStatus != '3' &&
              flowStatus != '4'
            "
            >驳回</el-button
          >
          <el-popconfirm
            @confirm="stops"
            confirm-button-text="确认"
            cancel-button-text="取消"
            title="是否确定要撤回?"
          >
            <template #reference>
              <el-button
                v-if="
                  zdShow &&
                  flowStatus != 'CANCEL' &&
                  flowStatus != 'UN_SUBMIT' &&
                  flowStatus != 'SUCCESS' &&
                  flowStatus != '0' &&
                  flowStatus != '2' &&
                  flowStatus != '4'
                "
                type="danger"
                :loading="data.isLoading"
                >撤回</el-button
              >
            </template>
          </el-popconfirm>
        </el-col>
      </el-row>
      <el-row>
        <el-table :data="data.historyActivityList" :border="props.border">
          <el-table-column prop="name" label="节点" />
          <el-table-column prop="assigneeName" label="审批人" />
          <el-table-column prop="type" label="处理类型" />
          <el-table-column prop="startTime" label="开始时间" />
          <el-table-column prop="endTime" label="结束时间" />

          <el-table-column
            prop="comment"
            label="审批意见"
            show-overflow-tooltip
          >

          </el-table-column>
        </el-table>
      </el-row>
      <edit
        :show="data.isShow"
        :recommendation="data.Recommendation"
        @clone="clone"
        @submit="handleComplete"
        @reject="handleReject"
      />
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import {
  complete,
  getCurrentNodeInfo,
  getHistoryActivityList,
  transition,
  stop,
} from '../api/flow/flow'
import { defineEmits, reactive, watch, ref } from 'vue'

import edit from './edit.vue'
const emit = defineEmits(['complete', 'goFlowAgree', 'stops', 'flowCanEdit'])
let form = ref({})
const props = defineProps({
  flowId: Number,
  flowStatus: {
    type: String,
    default: 'TO_CHECK'
  },
  flowCategory: String, //流程分类标题
  customEvent: Boolean, // 自定义提交事件
  passSendEmail: Object,
  border: {
    type: Boolean,
    default: true
  }
})
let statusArr = ref(['success', 'process', 'wart'])
let isShow = ref(false)
const data = reactive({
  isLoading: false,
  imgUrl: null,
  isShow: false,
  flowFormProperties: [],
  Recommendation: '',
  comment: '', // 审批意见
  historyActivityList: [], // 历史审批列表
  isCurrentUser: false,
  lct: [],
  validatorForm: [],
  isAssignee: false, // 是否当前节点受理人
  hasReject: false, // 是否有驳回操作
  nodeName: '' // 当前审批节点
})
const zdShow = ref(false)


let dialogFormVisible = ref(false)
const getFlowImageF = () => {

}
async function onComplete(cb) {
  try {
    data.isLoading = true
    await complete(props.flowId, true, data.comment)
    // this.$message.success('操作成功')
    cb && cb()
    data.isLoading = false
  } catch (error) {
    data.isLoading = false
  }
  refresh()
}
async function agr() {
  isShow.value = true
}
const agreeFun = () => {
  emit('goFlowAgree')
}
const getUserId = (val) => {
  form.value.username = val
}
const goReject = () => {
  data.isShow = true
  data.Recommendation = 'aso_reject'
}
async function handleComplete(val: string) {
  data.isShow = false
  if (props.customEvent) {
    emit('complete')
  } else {
    data.isLoading = true
    data.comment = val

    complete(props.flowId, true, data.comment)
      .then((response) => {
        refresh()
        emit('complete')
      })
      .finally(() => {
        data.isLoading = false
      })
  }
}
const a = () => {
  data.isShow = true
  data.Recommendation = 'aso_success'
}

const handleTransition = () => {
  // this.$refs.tableDialog.handleClick()
  emit('complete')
  dialogFormVisible.value = true
}
const handleReject = (val) => {
  data.isShow = false
  data.isLoading = true
  data.comment = val
  complete(props.flowId, 'false', data.comment)
    .then((response) => {

      refresh()
    })
    .finally(() => {
      data.isLoading = false
    })
}

//const { wsCache } = useCache()
const userInfo = {username:'guoxianhui'}//wsCache.get('userInfo')
const getHistoryActivityListF = () => {
  getHistoryActivityList(props.flowId).then((response) => {
    data.historyActivityList = response.data.nodeInfoList
    /***
    data.lct = response.data.flowNodeList
    if (
      data.lct[0].assignee == userInfo.username &&
      response.data.flowNodeList[response.data.flowNodeList.length - 1].activityState != 3
    ) {
      zdShow.value = true
    } else {
      zdShow.value = false
    }
    data.lct = data.lct.filter((item) => item.activityName != null)
    console.log(data.lct)
        ***/
  })
}
const getCurrentNodeInfoF = () => {
  getCurrentNodeInfo(props.flowId).then((response) => {
    // 是否当前节点受让人
    data.isAssignee = response.data.isAssignee
    data.hasReject = response.data.hasReject
    data.nodeName = response.data.nodeName
    data.isCurrentUser = false
    if (data.isAssignee) {
      data.isCurrentUser = true
    }
    if (data.hasReject) {
      data.isCurrentUser = true
    }
    emit('flowCanEdit', data)
    if (!data.isCurrentUser) {
      emit('setRead')
    }
  })
}
const refresh=() =>{
  debugger
  if (!props.flowId || props.flowId == 0) {
    data.historyActivityList = []
    data.lct = []
    data.isAssignee = false
    return
  }
  getFlowImageF()
  getHistoryActivityListF()
  getCurrentNodeInfoF()
}
const clone = () => {
  data.isShow = false
  data.lct = []
}

const confirmAdmin = (row) => {
  transition(props.flowId, form.value.username).then(() => {
    dialogFormVisible.value = false
    // this.$message.success('操作成功')
    refresh()
  })
}
/**
 * 中断
 */
const stops = () => {
  data.isLoading = true
  stop(props.flowId, props.comment)
    .then(() => {
      refresh()
      emit('stops')
    })
    .finally(() => {
      data.isLoading = false
    })
}
defineExpose({
  refresh,a
})
</script>
