<template>
  <ifbp-page>
      <ifbp-breadcrumb name="决策会任务"></ifbp-breadcrumb>
      <ifbp-button-area>
        <el-tabs v-model="activeName" @tab-click="handleTabClick">
          <el-tab-pane label="待办" name="todo"></el-tab-pane>
          <el-tab-pane label="已办" name="done"></el-tab-pane>
        </el-tabs>
      </ifbp-button-area>
      <ifbp-main-area>
        <el-table
          :data="tableData"
          :highlight-current-row="true">
          <el-table-column label="任务标题">
            <template scope="scope">
              <span class="textApprove" @click="textApprove(scope)">{{scope.row.processInstanceName}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="taskName" label="流程环节"></el-table-column>
          <el-table-column prop="startParticipantName" label="发起人"></el-table-column>
          <el-table-column prop="startTime" label="发起时间"></el-table-column>
          <el-table-column prop="state" label="流程状态"></el-table-column>
          <el-table-column label="操作" v-if="showButton" >
            <template scope="scope">
              <el-button type="primary" size="mini" @click="handleAgreeClick('agree',scope)">同意</el-button>
              <el-button type="primary" size="mini" @click="handleAgreeClick('disagree',scope)">不同意</el-button>              
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            class="fr"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalElement">
        </el-pagination>
        <el-dialog
            title="提示"
            :visible="dialogVisible"
            size="tiny">
            <el-input type="textarea" placeholder="请输入审批意见" v-model="comment"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="handleClick">确 定</el-button>
            </span>
        </el-dialog>
      </ifbp-main-area>
      
  </ifbp-page>
</template>
<script>
export default {
  data() {
      return{
          activeName: 'todo',
          tableData: [],
          currentPage: 1,
          pageSize: 10,
          totalElement:0,
          type: 'todo',
          showButton: true,
          dialogVisible: false,
          comment:'',
          relPk: [],
          scope:'',
          action:'',
      }
  },
  methods:{
    // 跳转审批
    textApprove(scope){
      const self = this;
      var row = scope.row;
      var processKey = row.processKey,
          processInstanceId = row.processInstanceId,
          processDefinitionId = row.processDefinitionId,
          processTaskId=row.id,
          TaskId=row.id,
          activityId=row.activityId,
          processDefinitionName=row.processDefinitionName,
          processInstanceName=row.processInstanceName,
          stateFlage=$('.cur-state').attr('id'),
          formKey = row.formKey,
          billId = row.businessKey;//单据id
      var FormCodeurl='/ifbp-bpm-service/task/queryFormCode?processKey='+ processKey + '&formKey=' + formKey;
        if(formKey === undefined || billId === undefined){
          this.$message({
            type: 'error',
            message: '请配置审批面板url'
          });
          return;
        }
      this.$http({
        url: FormCodeurl,
        method: 'GET'
      }).then((res) => {
        debugger;
        if(res.data.status === '1'){
          var url = res.data.url;
          var u1 = '';
          u1 = billId +
              '&processKey=' + encodeURIComponent(processKey) +
              '&processInstanceId=' + encodeURIComponent(processInstanceId) +
              '&processDefinitionId=' + encodeURIComponent(processDefinitionId) +
              '&task_id=' + encodeURIComponent(TaskId) +
              '&activityId=' + encodeURIComponent(activityId) +
              '&processDefinitionName=' + encodeURIComponent(processDefinitionName) +
              '&processInstanceName=' + encodeURIComponent(processInstanceName) +
              '&stateFlage=' + encodeURIComponent(stateFlage) +
              '&approveUrl=' + url +
              '&businessKey=' + encodeURIComponent(billId);
          var u2 =billId+
              '?processKey=' + encodeURIComponent(processKey) +
              '&processInstanceId=' + encodeURIComponent(processInstanceId) +
              '&processDefinitionId=' + encodeURIComponent(processDefinitionId) +
              '&task_id=' + encodeURIComponent(TaskId) +
              '&activityId=' + encodeURIComponent(activityId) +
              '&processDefinitionName=' + encodeURIComponent(processDefinitionName) +
              '&processInstanceName=' + encodeURIComponent(processInstanceName) +
              '&stateFlage=' + encodeURIComponent(stateFlage) +
              '&approveUrl=' + url +
              '&businessKey=' + encodeURIComponent(billId);
          if( url.indexOf("{1}") > -1){
            url = url.replace("{1}",u1);
          }
          if(url.indexOf("{2}") > -1){
            url = url.replace("{2}",u2);
          }else if(url.indexOf("?") > -1){
            var urlstr = url + u1;
          }else{
            var urlstr = url + u2;
          }
          try {
            let index =  {};  
            window.top.vueInstance.$children[0].addEditableTabs(urlstr,index);
          } catch (e) {
            this.$router.push(urlstr);
          }
        }
      }).catch(() => {
        this.$message({
          type: 'error',
          message: '请求出错'
        });
      });   
      },
      // 切换标签
      handleTabClick(tab){
        this.activeName = tab.name;
        if(tab.name === 'done'){
          this.type = 'his';
          this.showButton = false;
        } else if(tab.name === 'todo'){
          this.type = 'todo';
          this.showButton = true;
        }
        this.requestData(this.currentPage,this.pageSize,this.type);
      },
      // 切换标签请求数据
      requestData(ps,pn,type){
        var start;
        const self = this;
        start = (ps-1)*pn; 
        this.$http({
          url: '/ifbp-bpm-service/task/queryTasks?start='+start+'&size='+pn+'&taskFlag='+type+'&inPresident=' + this.relPk.toString(),
          method: 'GET'
        }).then((res) => {
          if(res.data.status === 1){
            var resData = JSON.parse(JSON.stringify(res.data.data.data));
            resData.forEach((v) => {
              if(v.startTime){
                self.$set(v,'startTime',(v.startTime.substring(0,10) + ' '+v.startTime.substring(11,16)));
              }
            });
            if(type === 'todo'){
              resData.forEach((v) => {
                if(v){
                  self.$set(v,'state','运行');
                }
            });
            }
            self.tableData = resData;
            self.totalElement = parseInt(res.data.data.total);
          }
        }).catch((res) => {
          this.$message({
            type: 'error',
            message: ''
          });
        });
      },
      // 获取relPk
      getRelPk(){
        const self = this;
        this.$http({
          url: '/ifbp-app-sm/tag/tag_include_rel/jchpk',
          method: 'GET'
        }).then((res) => {
          if(res.data.tagRels){
           res.data.tagRels.forEach((v) =>{
             self.relPk.push(v.relPk)
           });
            this.requestData(this.currentPage,this.pageSize,this.type);
          }
        }).catch(() => {
          this.$message({
            type: 'error',
            message: '获取决策会pk失败'
          });
        })
      },
      // 点击同意不同意
      handleAgreeClick(action,scope){
        this.dialogVisible = true;
        this.action = action;
        this.scope = scope;
      },
      // 点击确认
      handleClick(){
        const self = this;
        var scope,action,url;
        if(this.comment === ''){
          this.$message({
              type: 'error',
              message: '请输入审批意见'
          });
          return;
        }
        scope = this.scope;
        action = this.action;
        if(action === 'agree'){
          url = '/ifbp-bpm-service/approval/agreeAction';
        } else {
          url = '/ifbp-bpm-service/approval/refuseAction';
        }
        var submitData = {
          taskId: scope.row.id,
          action: action,
          comment: this.comment,
          processInstanceId: scope.row.processInstanceId,
          processDefinitionId: scope.row.processDefinitionId,
          processKey: scope.row.processKey,
          businessKey: scope.row.businessKey,
          assignInfo:""
        };
        this.$http({
          url: url,
          method: 'POST',
          data: submitData
        }).then((res) => {
          if(res.data.status === 1){
            self.tableData.splice(scope.$index,1);
            self.$message({
              type: 'success',
              message: res.data.msg
            });
          } else{
            self.$message({
              type:'error',
              message: res.data.msg 
          });
          }
          self.dialogVisible = false;
          self.comment = '';
        }).catch(() => {
          this.$message({
            type:'error',
            message: '请求失败' 
          });
        });
      },
      cancel(){
        this.dialogVisible = false;
        this.comment = '';
      },
      // 当分页的数量发生变化
      handleSizeChange(pageSize){
        this.pageSize = pageSize;
        this.requestData(this.currentPage,this.pageSize,this.type);
      },
      // 当当前页发生变化
      handleCurrentChange(currentPage){
        this.currentPage = currentPage;
        this.requestData(this.currentPage,this.pageSize,this.type);
      },
  },
  created(){
    this.getRelPk();
  }
}
</script>
<style scoped>
.textApprove:hover{
  text-decoration:underline;
  color:#5CB0E6;
  cursor:pointer;
}
</style>

