<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;">Clay</span>
          </div>
          <div class="top_right">
             <div style="margin-bottom: 12px">
               <span style="font-size: 15px;margin-right: 15px">财务</span>
               <el-tag style="font-size: 12px" size="mini">进行中</el-tag>
             </div>
            <div>
              <span style="color: rgb(108, 108, 108);" >编号: d69e9582-873f-11ed-b0e7-fa28000d2c27</span>
            </div>
          </div>
        </div>
        <div style="height: 15px;background:#f5f5f5;"></div>
        <form-render-view ref="taskViewForm" :form-items="taskData.formItems"
                          v-model="taskData.formData"/>
        <!--        <process-diagram-viewer/>-->
        <div style="height: 15px;background:#f5f5f5;"></div>
        <footer class="footer">
          <div class="footer_comment" @click="$refs.comment.show()">
            <i class="el-icon-chat-line-round" style="font-size: 18px;"></i>
            <span style="font-size: 12px;">评论</span>
          </div>
          <div style="margin-right: 20px;">
            <el-dropdown>
              <span class="el-dropdown-link" style="color: #2a99ff">
                更多<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-s-custom">转交</el-dropdown-item>
                <el-dropdown-item icon="el-icon-s-release">退回</el-dropdown-item>
                <el-dropdown-item icon="el-icon-s-check">加签</el-dropdown-item>
                <el-dropdown-item icon="el-icon-refresh-left">撤销</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-button type="danger" size="mini" plain round style="margin-left: 20px">拒绝</el-button>
            <el-button type="primary" size="mini" round @click="submitTask()">同意</el-button>
          </div>
          <!--          <el-button type="success" @click="submitTask()">通过</el-button>-->
          <!--          <el-button type="success" @click="$refs.comment.show()">评论</el-button>-->
        </footer>
      </div>
    </el-drawer>
    <comment ref="comment" :max-size="5" :attachment-max-size="10" @ok="commentConfirm"/>
  </div>
</template>

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

export default {
  name: "DisposalTask",
  components: {Comment, FormRenderView, ProcessDiagramViewer},
  data() {
    return {
      approveOpen: false,
      selectTask: {},
      tableData: [],
      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.runningList = [];
      this.$store.state.endList = [];
      this.$store.state.noTakeList = [];
      this.$store.state.diagramMode = "viewer";
      this.$store.state.preview = false;
    },
    loadProcessTask(taskId) {
      let that = this;
      this.init();
      getTaskInfo(taskId).then(res => {
        that.taskData = res.data;
        that.$store.state.design = that.taskData;
        that.$store.state.runningList = that.taskData.runningList;
        that.$store.state.endList = that.taskData.endList;
        that.$store.state.noTakeList = that.taskData.noTakeList;
        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);
      });
    },
    commentConfirm(data) {
      this.$set(data, "taskId", this.selectTask.taskId);
      addComment(data).then(res => {
        this.$message.success(res.msg);
      });
    }
  }
};
</script>

<style scoped lang="scss">
.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 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30px;
  padding: 15px 0;
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 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;
  }

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