<template>
  <el-dialog
    title="任务催办"
    :visible.sync="taskUrgentDialog"
    :close-on-click-modal="false"
  >
    <table cellspacing="0" cellpadding="0" border="0" class="form-table">
      <tbody>

        <tr v-if="nodeList && nodeList.length>1">
          <th style="width: 140px;">
            <span class="xh-star">*</span>催办节点：
          </th>
          <td>
              <el-radio v-model="selectNodeId" v-for="item in nodeList" :key="item.nodeId" :label="item.nodeId">{{item.name}}</el-radio>
          </td>
        </tr>

        <tr>
          <th style="width: 140px;">
            <span class="xh-star">*</span>被催办人：
          </th>
          <td>
            <el-checkbox-group v-if="nodeDefMap[selectNodeId]" v-model="appointee">
              <el-checkbox v-for="item in nodeDefMap[selectNodeId].assigneeUsers" :label="item" :key="item.id">{{item.fullname}}</el-checkbox>
            </el-checkbox-group>
            <span style="color:red;" v-if="nodeDefMap[selectNodeId] && nodeDefMap[selectNodeId].assigneeUsers.length==0 && isTaskUser">请先选择催办节点</span>
            <span style="color:red;" v-if="!isTaskUser">要催办的任务无审批人</span>
          </td>
        </tr>

        <tr>
          <th style="width: 140px;">
            <span class="xh-star"></span>是否催办秘书：
          </th>
          <td>
            <el-radio v-model="appointeeSecretary" label="0">否</el-radio>
            <el-radio v-model="appointeeSecretary" label="1">是</el-radio>
          </td>
        </tr>

        <tr>
          <th style="width: 140px;">
            <span class="xh-star">*</span>催办方式：
          </th>
          <td>
            <el-radio v-model="type" label="mail">邮箱</el-radio>
            <el-radio v-if="nodeDefMap[selectNodeId] && !nodeDefMap[selectNodeId].localProperties.allowSmsApproval" v-model="type" label="sms">短信</el-radio>
            <el-radio v-if="nodeDefMap[selectNodeId] && nodeDefMap[selectNodeId].localProperties.allowSmsApproval" v-model="type" label="smsApproval">短信审批</el-radio>
            <el-dropdown size="mini" class="dropdown" split-button type="primary"  @command="handleCommand">
              可选变量
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="{催办人:promoter}">催办人</el-dropdown-item>
                <el-dropdown-item command="{被催办人:appointee}">被催办人</el-dropdown-item>
                <el-dropdown-item command="{流程编号:instId}">流程编号</el-dropdown-item>
                <el-dropdown-item command="{流程标题:subject}">流程标题</el-dropdown-item>
                <el-dropdown-item command="{流程发起人:sponsor}">流程发起人</el-dropdown-item>
                <el-dropdown-item command="{任务节点名称:nodeName}">任务节点名称</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </td>
        </tr>
        
        <tr v-if="type!='smsApproval'" >
          <th style="width: 140px;">
            <span class="xh-star">*</span>催办内容：
          </th>
          <td colspan="3">
            <el-input v-if="type=='mail'" type="textarea" :autosize="{ minRows: 4, maxRows: 8}"
              placeholder="请输入催办内容" v-model="contentMail"></el-input>
            <el-input v-if="type=='sms' || type=='smsApproval'" type="textarea" :autosize="{  minRows: 4, maxRows: 8}"
              placeholder="请输入催办内容" v-model="contentSms"></el-input>
          </td>
        </tr>

        <tr v-if="type=='smsApproval'" >
          <th style="width: 140px;">
            <span class="xh-star">*</span>短信审批备注：
          </th>
          <td colspan="3">
            <el-input  type="textarea" :autosize="{ minRows: 4, maxRows: 8}"
              placeholder="短信审批备注会显示在发出的短信内容中,可在备注中对流程信息做补充说明,但请勿涉及敏感内容。" v-model="contentSms"></el-input>
              注意：因为短信渠道未加密，发送的短信内容中不会包含详细批呈信息，请在短信催办前先与审批处理人做好沟通。
          </td>
        </tr>
      </tbody>
    </table>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="confirm" size="small">确 定</el-button>
      <el-button @click="cancel" size="small">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { debuglog } from 'util';
import { Message } from "element-ui";
export default {
  name: "taskUrgent",
  props: ["instId","defId","subject"],
  components: {},
  data() {
    return {
        isTaskUser:true,//是否有任务审批人
        taskUrgentDialog:false,
        excutor:[],//节点审批人集合
        appointee:[],//被催办人
        type:"mail", //催办方式
        contentMail:"",//邮件催办内容
        contentSms:"",//短信催办内容
        selectNodeId:'',
        appointeeSecretary:"0",
        nodeList:[],
        nodeDefMap:{}
    };
  },
  methods: {
    //鼠标点击页面其他其他位置不关闭弹框
    handleClose(done) {
        this.appointee=[];
        this.taskUrgentDialog=true;
        this.isTaskUser = true;
        //根据流程实例ID获取当前任务节点审批人
        let this_ =this;
        this.$store.dispatch("storeProcess/getExcutorNameByInstId", this.instId).then(res => {
          if(res){
             this_.nodeList = res;
             if(res.length==1){
                this_.selectNodeId =res[0].nodeId;
             }
             res.forEach(nodeDef => {
               this_.nodeDefMap[nodeDef.nodeId] = nodeDef;
             });
          }
          //要催办的任务无审批人
          if(res.length==0){
            this.isTaskUser=false;
          }
        });
        //根据流程定义id获取流程信息
        this.$store.dispatch("storeProcess/defGet", this.defId).then(res => {
          if(res.urgentMailTel){
              this.contentMail = res.urgentMailTel;
          }
          if(res.urgentSmsTel){
              this.contentSms = res.urgentSmsTel;
          }
        });
    },
    //可选变量
    handleCommand(command) {
        if(this.type=="mail"){
            this.contentMail =this.contentMail+command;
        }else if(this.type=="sms" || this.type=="smsApproval"){
            this.contentSms =this.contentSms+command;
        }
    },
    //取消
    cancel() {
      this.taskUrgentDialog = false;
    },
    //确认
    confirm() {
        let content = "";//催办内容
        if(this.type=="mail"){
            content=this.contentMail;
        }else if(this.type=="sms"){
            content=this.contentSms;
        }

        if(!this.selectNodeId){
            Message.warning("被催办人不能为空");
            return;
        }

        if(this.appointee.length==0){
            Message.warning("请选择被催办人");
            return;
        }
        if(content==""){
            Message.warning("请输入催办内容");
            return;
        }
        let isAppointeeSecretary = false;
        if(this.appointeeSecretary == "1"){
          isAppointeeSecretary = true;
        }
        let appointeeId = "";//被催办人ID
        let appointeeName = "";//被催办人
        for(let i=0;i<this.appointee.length;i++){
            appointeeId = appointeeId+this.appointee[i].userId+",";
            appointeeName = appointeeName+this.appointee[i].fullname+",";
        }
        let data = {"subject":this.subject,"type":this.type,"instId":this.instId,"content":content,"appointeeId":appointeeId.substring(0, appointeeId.length - 1),
        "appointee":appointeeName.substring(0, appointeeName.length- 1),'nodeName':this.nodeDefMap[this.selectNodeId].name,'nodeId':this.selectNodeId,
        "promoterId":JSON.parse(sessionStorage.getItem("currentUser")).userId,"promoter":JSON.parse(sessionStorage.getItem("currentUser")).username,"appointeeSecretary":isAppointeeSecretary};
        this.$store.dispatch("storeProcess/sendBpmTaskUrgent",data).then(()=>{
           this.taskUrgentDialog = false;
        });
    }
  },
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/element-variables.scss";
.dropdown{
  float :right;
  margin:-8px;
}
>>>.el-checkbox {
    color: $--color-text-regular;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-right: 30px;
    margin-left: 0px !important;
}
</style>