<template>
  <el-drawer
      title="审批详情"
      size="500px"
      v-model="approveOpen"
      direction="rtl">
    <div v-loading="loadingDetails">
      <div v-if="!loadingDetails">
        <div class="top">
          <div class="top_left">
            <el-avatar size="large" :src="processTask.userInfo.avatar"></el-avatar>
            <span
                style="text-align: center;color: #19191a;font-size: 14px;">{{ processTask.userInfo.name }}</span>
          </div>
          <div class="top_right">
            <div style="margin-bottom: 12px">
              <span style="font-size: 15px;margin-right: 15px;">{{ task.processName }}</span>
              <tag dict-type="process_state" :value="task.state"/>
            </div>
            <div>
              <span style="color: rgb(108, 108, 108);">编号: {{ task.taskId }}</span>
            </div>
          </div>
        </div>
        <div style="height: 15px;background:#f5f5f5;"></div>
        <form-render ref="taskViewForm" :form-items="processTask.formItems"
                     v-model:value="processTask.formData"/>
        <div style="height: 15px;background:#f5f5f5;"></div>
        <operation-render :operation-list="processTask.operationList"
                          :state="task.state"/>
      </div>
    </div>
    <template #footer>
      <el-footer style="display: flex;justify-content: right;align-items: center ">
        <div style="margin-right: 20px;">
          <el-dropdown>
              <span style="color: #2a99ff;cursor: pointer;margin-top: 8px;">
                更多<el-icon style="margin-left: 5px"><ArrowDown/></el-icon>
              </span>
            <template #dropdown>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="Avatar" @click.native="showTransferBox()">转交</el-dropdown-item>
                <el-dropdown-item icon="Failed" @click.native="showBackNodeBox()">退回</el-dropdown-item>
                <el-dropdown-item icon="Stamp" @click.native="showAddApprovalBox()">加签</el-dropdown-item>
                <el-dropdown-item icon="RefreshLeft" @click.native="showRevocationBox()">撤销</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-button type="danger" size="mini" plain round style="margin-left: 20px"
                     @click="showRefuseBox()">拒绝
          </el-button>
          <el-button type="primary" size="mini" round @click="submitTask()">同意</el-button>
        </div>
        <div @click="showCommentBox" style="display: flex;align-items: center">
          <el-icon size="18"><ChatLineRound /></el-icon>
          <span style="font-size: 14px;margin-left: 5px">评论</span>
        </div>
      </el-footer>
    </template>
  </el-drawer>

  <comment ref="comment"
           :title="commentInfo.title"
           :type="commentInfo.type"
           :max-size="5"
           :attachment-max-size="20" @ok="commentConfirm"/>

</template>

<script setup>
import FormRender from '@/views/workflow/form/FormRender.vue'
import OperationRender from '@/views/workflow/common/OperationRender.vue'
import Comment from '@/views/workflow/common/Comment.vue'
import Tag from '@/components/Tag.vue'
import {getTaskInfo, refuseTask, rollBackTask, addComment, completeTask} from "@/api/workflow/process-task.js";
import {defineProps, defineExpose, defineEmits} from 'vue'
import {ElMessage} from "element-plus";
import {useProcessStore} from '@/stores/processStore.js'

const processStore = useProcessStore()
import {useCacheStore} from '@/stores/cache.js'

useCacheStore().setCacheKey(['process_state'])
const emit = defineEmits()

const props = defineProps({
  task: {
    type: Object,
    default: {}
  }
})

const comment = ref()
const approveOpen = ref()
const commentInfo = ref({
  title: null,
  type: null, //1 添加评论 2 拒绝
})
const loadingDetails = ref(true)
const processTask = ref()
const taskViewForm = ref()


const submitTask = () => {
  taskViewForm.value.validate(valid => {
    if (valid) {
      let params = {
        taskId: props.task.taskId,
        formData: JSON.stringify(processTask.value.formData)
      };
      completeTask(params).then(res => {
        approveOpen.value = false;
        emit("refresh")
        ElMessage.success(res.msg);
      });
    }
  })
}

const loadProcessTask = async (taskId) => {
  getTaskInfo(taskId).then(res => {
    processTask.value = res.data
    processStore.setDesign(res.data)
    processStore.userTaskOption.value = res.data.userTaskOption;
    nextTick(() => {
      loadingDetails.value = false;
    })
  })
}


const showCommentBox = () => {
  commentInfo.value = {
    title: "添加评论",
    type: 1
  }
  commentShow()
}

const showRefuseBox = () => {
  commentInfo.value = {
    title: "拒绝任务",
    type: 2
  }
  commentShow()
}

const showTransferBox = () => {
  commentInfo.value = {
    title: "转交给其他人审批",
    type: 3
  }
  commentShow()
}
const showBackNodeBox = () => {
  commentInfo.value = {
    title: "退回到之前节点",
    type: 4
  }
  commentShow()
}
const showAddApprovalBox = () => {
  commentInfo.value = {
    title: "加签",
    type: 5
  }
  commentShow()
}
const showRevocationBox = () => {
  commentInfo.value = {
    title: "撤销当前流程",
    type: 6
  }
  commentShow()
}
const commentShow = () => {
  nextTick(() => {
    comment.value.show()
  })
}

/**
 * 评论回调
 * @param data
 * @param type
 */
const commentConfirm = (data, type) => {
  console.log(data, type)
  switch (type) {
    case 1:
      submitComment(data);
      break;
    case 2:
      submitRefuse(data);
      break;
    case 4:
      submitRollBack(data);
      break;
    default :
      break;
  }
}
/**
 * 拒绝任务
 * @param data
 */
const submitRefuse = (data) => {
  let params = {
    taskId: props.task.taskId,
    comment: data
  };
  refuseTask(params).then(res => {
    approveOpen.value = false;
    emit("refresh")
    ElMessage.success(res.msg);
  })
}
/**
 * 回退
 */
const submitRollBack = (data) => {
  let params = {
    taskId: props.task.taskId,
    rollBackId: data.rollBackId,
    comment: data,
  };
  rollBackTask(params).then(res => {
    approveOpen.value = false;
    emit("refresh")
    ElMessage.success(res.msg);
  })
}
/**
 * 提交评论
 * @param data
 */
const submitComment = (data) => {
  data['taskId'] = props.task.taskId
  addComment(data).then(res => {
    approveOpen.value = false;
    ElMessage.success(res.msg);
  });
}


const init = () => {
  approveOpen.value = true
  loadingDetails.value = true
  loadProcessTask(props.task.taskId)
}

defineExpose({
  init
})

</script>
