<template>
  <div>
    <el-table :data="tableData"
              @row-click="clickRow"
              style="width: 100%">
      <el-table-column
          prop="processName"
          label="审批类型"
          width="180">
      </el-table-column>
      <el-table-column
          prop="initiatorName"
          label="发起人"
          width="180">
      </el-table-column>
      <el-table-column
          prop="createdDate"
          label="提交时间">
      </el-table-column>
      <el-table-column
          prop="taskName"
          label="当前节点">
      </el-table-column>
      <el-table-column
          prop="arriveDate"
          label="任务到达时间">
      </el-table-column>
      <el-table-column
          prop="state"
          label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.state == 1">待处理</el-tag>
          <el-tag v-if="scope.row.state == 4" type="success">已同意</el-tag>
          <el-tag v-if="scope.row.state == 3" type="danger">已拒绝</el-tag>
          <el-tag v-if="scope.row.state == 2" type="warning">已退回</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <el-drawer
        title="审批详情"
        size="500px"
        :visible.sync="approveOpen"
        direction="rtl">
      <div v-loading="loading">
        <div class="top">
          <div class="top_left">
            <el-avatar size="large" :src="avatar"></el-avatar>
            <span style="text-align: center;color: #19191a;font-size: 14px;">{{ selectTask.initiatorName }}</span>
          </div>
          <div class="top_right">
            <div style="margin-bottom: 12px">
              <span style="font-size: 15px;margin-right: 15px">{{ selectTask.processName }}</span>
              <el-tag style="font-size: 12px" size="mini">进行中</el-tag>
            </div>
            <div>
              <span style="color: rgb(108, 108, 108);">编号: {{ selectTask.taskId }}</span>
            </div>
          </div>
        </div>
        <div style="height: 15px;background:#f5f5f5;"></div>
        <form-render v-if="!loading" ref="taskViewForm" :form-items="taskData.formItems"
                          v-model="taskData.formData"/>
        <div style="height: 15px;background:#f5f5f5;"></div>
        <el-footer class="footer">
          <div class="footer_comment" @click="showCommentBox">
            <i class="el-icon-chat-line-round" style="font-size: 18px;"></i>
            <span style="font-size: 12px;">评论</span>
          </div>
<!--          <process-diagram-viewer/>-->
          <div style="margin-right: 20px;">
            <el-dropdown>
              <span class="el-dropdown-link" style="color: #2a99ff;cursor: pointer">
                更多<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-s-custom" @click.native="showTransferBox()">转交</el-dropdown-item>
                <el-dropdown-item icon="el-icon-s-release" @click.native="showBackNodeBox()">退回</el-dropdown-item>
                <el-dropdown-item icon="el-icon-s-check" @click.native="showAddApprovalBox()">加签</el-dropdown-item>
                <el-dropdown-item icon="el-icon-refresh-left"  @click.native="showRevocationBox()">撤销</el-dropdown-item>
              </el-dropdown-menu>
            </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>
        </el-footer>
      </div>
    </el-drawer>
    <comment ref="comment"
             :title="commentInfo.title"
             :type="commentInfo.type"
             :max-size="5"
             :attachment-max-size="20" @ok="commentConfirm"/>
  </div>
</template>

<script>
import Comment from "../../components/common/Comment";
import FormRender from "@/views/common/form/FormRender";
import ProcessDiagramViewer from "../admin/layout/ProcessDiagramViewer";
import {addComment, completeTask, getTaskInfo, getTaskList, refuseTask,rollBackTask} from "@/api/task";

export default {
  name: "DisposalTask",
  components: { Comment, FormRender, ProcessDiagramViewer},
  data() {
    return {
      approveOpen: false,
      selectTask: {},
      tableData: [],
      commentInfo: {
        title: null,
        type: null, //1 添加评论 2 拒绝
      },
      loading: false,
      taskData: {
        formData: {},
        formItems: [],
        processList: []
      },
      avatar: require("@/assets/image/avatar.png")
    };
  },
  created() {
    this.getList();
  },
  methods: {
    clickRow(row) {
      this.approveOpen = true;
      this.loadProcessTask(row.taskId);
      this.selectTask = row;

    },
    getList() {
      getTaskList().then(res => {
        let data = res.data;
        this.tableData = data.rows;
      });
    },
    init() {
      this.taskData = {
        formData: {},
        formItems: [],
        processList: []
      };
      this.loading = true;
      this.$store.state.design = this.taskData;
      this.$store.state.diagramMode = "viewer";
      this.$store.state.preview = false;
    },
    loadProcessTask(taskId) {
      let that = this;
      this.init();
      getTaskInfo(taskId).then(res => {
        let data=res.data
        data.formItems.map(item=>{
          if(item.props.required){
            item.props.required=!item.props.required
          }
          return item
        })
        that.taskData = res.data;
        that.$store.state.design = that.taskData;
        that.$store.state.userTaskOption = that.taskData.userTaskOption;
        this.loading = false;
      });
    },
    submitTask() {
      let params = {
        taskId: this.selectTask.taskId,
        formData: JSON.stringify(this.taskData.formData)
      };
      completeTask(params).then(res => {
        this.approveOpen = false;
        this.getList();
        this.$message.success(res.msg);
      });
    },
    showCommentBox() {
      this.commentInfo = {
        title: "添加评论",
        type: 1
      }
      this.commentShow()
    },
    showRefuseBox() {
      this.commentInfo = {
        title: "拒绝任务",
        type: 2
      }
      this.commentShow()
    },
    showTransferBox() {
      this.commentInfo = {
        title: "转交给其他人审批",
        type: 3
      }
      this.commentShow()
    },
    showBackNodeBox() {
      this.commentInfo = {
        title: "退回到之前节点",
        type: 4
      }
      this.commentShow()
    },
    showAddApprovalBox() {
      this.commentInfo = {
        title: "加签",
        type: 5
      }
      this.commentShow()
    },
    showRevocationBox() {
      this.commentInfo = {
        title: "撤销当前流程",
        type: 6
      }
      this.commentShow()
    },
    commentShow() {
      this.$refs.comment.show()
    },
    /**
     * 拒绝提交
     * @param data
     */
    submitRefuse(data) {
      let params = {
        taskId: this.selectTask.taskId,
        comment: data
      };
      refuseTask(params).then(res => {
        this.approveOpen = false;
        this.getList();
        this.$message.success(res.msg);
      })
    },
    /**
     * 评论回调
     * @param data
     * @param type
     */
    commentConfirm(data, type) {
      switch (type) {
        case 1:
          this.submitComment(data);
          break;
        case 2:
          this.submitRollBack(data);
          break;
        case 3:
          this.submitRefuse(data);
          break;
        default :
          break;
      }
    },
    submitRollBack(data){
      let params = {
        taskId: this.selectTask.taskId,
        rollBackId: data.rollBackId,
        comment: data,
      };
      rollBackTask(params).then(res=>{
        this.$message.success(res.msg);
      })
    },
    /**
     * 提交评论
     * @param data
     */
    submitComment(data) {
      this.$set(data, "taskId", this.selectTask.taskId);
      addComment(data).then(res => {
        this.$message.success(res.msg);
      });
    }
  }
};
</script>

<style scoped lang="less">
.top {
  padding: 0 10px 10px 10px;
  display: flex;

  .top_left {
    display: flex;
    flex-direction: column;
    width: 50px;
    align-items: center;
  }

  .top_right {
    display: flex;
    flex-direction: column;
    //justify-content: space-between;
    font-size: 13px;
    margin-left: 10px;
  }
}

.footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30px;
  padding: 15px 0;
  z-index: 99;
  background: #fff;
  border-top: 1px solid #dcdfe6;
  box-shadow: 0 0 15px 0 #dad8d8;

  .footer_comment {
    text-align: center;
    display: flex;
    flex-direction: column;
    margin-left: 20px;
    cursor: pointer;
  }

  /deep/ .el-dropdown-menu {
    top: -5px !important;
  }
}

.el-dropdown-link, .footer_comment {
  cursor: pointer;
}
</style>
