<template>
  <el-dialog
    title="跟踪设置"
    :visible.sync="followDialog"
    :close-on-click-modal="false"
  >
    <table cellspacing="0" cellpadding="0" border="0" class="form-table">
      <tbody>
        <tr>
          <th style="width: 100px;">
            <span class="xh-star">*</span>跟踪节点：
          </th>
          <td>
            <el-checkbox-group v-model="checkedNodes">
              <el-checkbox  v-for="node in nodes"  :label="node.nodeId" :key="node.nodeId" @change="selectOne(node.nodeId)">
                {{node.name}}
              </el-checkbox>
            </el-checkbox-group>
          </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 { Message } from "element-ui";
export default {
  name: "taskFollow",
  props: ["instId","defId"],
  components: {},
  data() {
    return {
      followDialog: false,
      proInst: this.instId
    };
  },
  computed:{
    nodes:{
      get: function () {
          return this.$store.state.storeProcess.nodes;
      },
      set: function () {
      }
    },
    checkedNodes: {
      get: function () {
          return this.$store.state.storeProcess.checkedNodes;
      },
      set: function () {
      }
    }
  },
  methods: {
    //选择跟踪的任务节点
    selectOne(value){
      if(this.checkedNodes.indexOf(value)>-1){
           for (var i = 0; i < this.checkedNodes.length; i++) {
                if(this.checkedNodes[i]==value){
                    this.$store.dispatch("storeProcess/setCheckedSplice",i);
                    return;
                }
           }
        }else{
          this.$store.dispatch("storeProcess/setCheckedPush",value);
        }
    },
    //鼠标点击页面其他其他位置不关闭弹框
    handleClose(done) {
      this.followDialog = true;
    },
    //打开跟踪设置弹出框并查询可跟踪的任务节点
    handleOpen(){
      this.followDialog = true;
      let data = {"defId":this.defId,"proInst":this.instId}
      this.$store.dispatch("storeProcess/taskNode",data);
    },
    //取消
    cancel() {
      this.followDialog = false;
    },
    //确认
    confirm() {
      let data = {"taskId":""};
      if(this.checkedNodes.length==0){
        Message.warning("请选择跟踪节点");
        return;
      }
      for (var i = 0; i < this.checkedNodes.length; i++) {
          data.taskId = data.taskId+ this.checkedNodes[i]+",";
      }
      data.proInst = this.instId;
      //新增,更新任务跟踪表数据
      this.$store.dispatch("storeProcess/taskFollowSave",data).then(()=>{
           this.followDialog = false;//父组件调用子组件方法
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
.el-dialog__footer {
    padding: 10px 20px;
    padding-top: 10px;
    text-align: right;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
label.el-checkbox {
  margin: 10px 30px 0 0;
}

div.el-checkbox-group[aria-invalid='true'] {
  border: 1px solid #f56c6c;
  padding: 0 0 10px 10px;
}
.form-table {
  width: 100%;
  border-top: 1px solid #ebeef5;
  border-left: 1px solid #ebeef5;
}

.form-table th {
  text-align: right;
  color: #666;
}

.form-table th > span {
  color: #f00;
}

.form-table th, .form-table td {
  border-right: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
  padding: 10px;
  min-width: 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
}

.xh-star {
  color: red;
}
</style>