<template>
  <el-dialog :title="openTitle" :visible.sync="visible" @close="handleClose"  @open="open"
             custom-class="common-dialog  demand-dialog" :close-on-click-modal="false"  >
      <el-form :model="paramForm" :disabled=" openType=='view' " :rules="rules"  ref="formRef" label-width="120px"
          size="small" class="demo-ruleForm"  label-position="left">
        <el-row :gutter="50">
          <el-col :span="12">
            <el-form-item  label="流程定义 ID"  prop="processRefId">
                <el-input v-model="paramForm.processRefId" v-inputFilter:trim placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item  label="流程名称"  prop="processName">
                <el-input v-model="paramForm.processName" v-inputFilter:trim  placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="启动流程标题" prop="processTitle">
              <el-input v-model="paramForm.processTitle" v-inputFilter:trim  placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
           <el-form-item  label="流程组ID"  prop="processGroupId">
                <el-input v-model="paramForm.processGroupId" v-inputFilter:trim  placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item  label="流程版本"  prop="processVersion">
                <el-input v-model="paramForm.processVersion"  v-inputFilter:trim  placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item  label="唯一标识"  prop="processSign">
                <el-input v-model="paramForm.processSign"  v-inputFilter:trim   placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>


    <div  class="btn-wrap" v-show="openType !='view'">
      <el-button   @click="handleAdd" size="mini" type="primary" >新增</el-button>
      <el-button  @click="deleteRows"  size="mini" type="primary"  plain>删除</el-button>
    </div>
   <div class="table-wrap">
      <el-table :data="tableData" ref="tableRef"  size="small"   stripe   border  height="100%" >
        <el-table-column type="index" show-overflow-tooltip   width="50"  label="序号">
        </el-table-column>
        <el-table-column type="selection"    width="50"  label="#">
        </el-table-column>

        <el-table-column  prop="nodeName"  label="节点名称" min-width="100" >
            <template slot-scope="scope">
               <el-input v-model="scope.row.nodeName" :disabled=" openType=='view' "
                  v-inputFilter:trim
                  size="mini" placeholder="请输入(必填)" />
            </template>
        </el-table-column>
       <el-table-column  prop="taskDefId"  label="节点定义 ID" min-width="100" >
            <template slot-scope="scope">
               <el-input v-model="scope.row.taskDefId" :disabled=" openType=='view' "
                  v-inputFilter:trim
                  size="mini"  placeholder="请输入(必填)" />
            </template>
        </el-table-column>
        <el-table-column  prop="approvalGroupId"  label="审批人" min-width="150" >
            <template slot-scope="scope">
              <common-select v-model="scope.row.approvalGroupId"
                  :disabled=" openType=='view' "
                  dictType="crm_Process_Group" size="mini" >
              </common-select>
            </template>
        </el-table-column>
        <el-table-column  prop="status"  label="状态" min-width="100" >
          <template slot-scope="scope">
            <common-select v-model="scope.row.status"
                           :disabled=" openType=='view' "
                           dictType="Crm_IsValid_Status" size="mini" >
            </common-select>
          </template>
        </el-table-column>
        <el-table-column  prop="sortBy"  label="排序" min-width="100" >
          <template slot-scope="scope">
            <el-input v-model="scope.row.sortBy"  v-input-filter:int size="mini"
              v-inputFilter:trim
              :disabled=" openType=='view' "  placeholder="请输入" />
          </template>
        </el-table-column>

      </el-table>
    </div>
    <div  class="btn-wrap btns"  v-show=" openType !='view' ">
      <el-button size="mini" type="warning" @click="handleSure">确认</el-button>
      <el-button size="mini" type="info" plain @click="visible=false">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>

export default {
    name: "dialog_demand_list",
    created(){

    },
    mounted(){

    },
    methods: {
      handleAdd(){
          this.tableData.push(
            {nodeName: '', taskDefId: '', approvalGroupId: '' ,status: 'Y', sortBy: this.tableData.length}
          )
      },

      //删除
      deleteRows: function () {
        var selectRows = this.$refs.tableRef.selection;
        if (selectRows.length > 0) {
          this.$confirm('确定删除?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
              for (let r of selectRows) {
                  var index = this.tableData.findIndex(item => {
                      if (item === r) {
                          return true
                      }
                  })
                  this.tableData.splice(index, 1)
              }
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
          }).catch(() => {

            this.$refs.tableRef.clearSelection();  //清空选中项
          });
        } else {
           this.$message('请选择要删除的行数据');
           return
        }
      },
      open () {
        if(this.openType !== 'add'){
          this.getProcessGroup();
        } else {
          this.tableData = [];
        }
      },
      //查询流程分组数据及其对应的节点数据
      getProcessGroup(){
        this.$ajax.post({
          domain: 'crmUrl',
          url: 'process.getProcessGroup',
          data: JSON.stringify(this.paramForm),
          requestType: 'body',
          showLoad: true,
          success: function (res) {
            if (res.errorCode === 200) {
               this.tableData =res.data.processNodeList || [];
               // this.tableData.forEach(item=>{
               //   if(item.status === "Y"){
               //     item.status = '有效';
               //   } else {
               //     item.status = '无效';
               //   }
               // })
            }
          }.bind(this),
          error: function (res) {
            this.$message({
              type: 'error',
              message: res.body.msg || res.msg
            })
          }.bind(this)
        })
      },
      //确认
      handleSure() {
          this.$refs['formRef'].validate((valid) => {
              if(!valid){return;}

              //校验流程节点表格
              for(let i=0; i<this.tableData.length; i++){
                if(!this.tableData[i].nodeName){
                  this.$message({type: 'error', message: `请输入第${i+1}行节点名称`} );
                  return;
                }
                if(!this.tableData[i].taskDefId){
                  this.$message({type: 'error', message: `请输入第${i+1}行节点定义Id`});
                  return;
                }
                if(!this.tableData[i].approvalGroupId){
                  this.$message({type: 'error', message: `请选择第${i+1}行审批人`});
                  return;
                }
              }
              let param = JSON.parse(JSON.stringify(this.paramForm));
              param.processNodeList = JSON.parse(JSON.stringify(this.tableData));
              // param.processNodeList.forEach(item=>{
              //   if(item.status ==='有效'){
              //     item.status = 'Y';
              //   } else {
              //     item.status = 'N';
              //   }
              // });
              this.$ajax.post({
                domain: 'crmUrl',
                url: 'process.saveOrUpdateProcessGroup',
                data: JSON.stringify(param),
                requestType: 'body',
                showLoad: true,
                success: function (res) {
                  if (res.errorCode === 200) {
                      this.$message({
                        type: 'success',
                        message: '保存成功'
                      });
                      this.$parent.doQuery();
                      this.visible = false;
                  }
                }.bind(this),
                error: function (res) {
                  this.$message({
                    type: 'error',
                    message: res.body.msg || res.msg
                  })
                }.bind(this)
              })
           });
      },
      //关闭弹窗
      handleClose() {
          this.$refs['formRef'].resetFields() //清空表单校验
          for(var item in this.paramForm){
              this.paramForm[item] = '';
          }
          this.visible = false;
      },
    },
    data() {
        return {
          visible: false,
          openTitle: '',
          openType: '',

          tableData: [],

          paramForm: {
            processRefId: '',
            processName: '',
            processTitle: '',
            processVersion: '',
            processGroupId: '',
            startTaskActionName: '',
            startTaskId: '',
            processSign: '',
            status: 'Y',
          },
          rules: {
               processRefId: [ { required: true, message: '请输入', trigger: 'blur' } ],
               processName: [ { required: true, message: '请输入', trigger: 'blur' } ],
               processTitle: [ { required: true, message: '请输入', trigger: 'blur' } ],
               processGroupId: [ { required: true, message: '请输入', trigger: 'blur' } ],
               processVersion: [ { required: true, message: '请输入', trigger: 'blur' } ],
               processSign: [ { required: true, message: '请输入', trigger: 'blur' } ],
          },

        };
    },


}
</script>

<style type="text/css"   lang="scss">
.demand-dialog{
    margin-top: 8vh!important;
    height: 76vh;
    max-height: 850px;
    width: 74vw;
    max-width: 1250px;
    display: flex;
    flex-direction: column;
    .el-dialog__body {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 25px 15px;
      .el-form-item {
          margin-bottom: 12px;
      }

    }
    .btn-wrap{
      display: flex;
      justify-content: flex-end;
      padding: 5px 0;
    }
    .btns{
      justify-content: center;
      padding-top: 10px;
    }
    .el-table .el-table__empty-block {
        min-height: unset;
    }

}
</style>
