<!-- 审核流程 -->
<template>
  <div class="app-container examineProcess">
    <div class="page-container examineProcessPage" v-if="pageType === 1">
      <div class="examineProcessPage-left">
        <p class="title-left-p">审核流程配置</p>
        <p class="table-button" :class="leftTableType == 1 ? 'check-table' : ''" @click="leftTableButton(1)">
          申购审核流程
        </p>
        <!--<p class="table-button" :class="leftTableType == 2 ? 'check-table' : ''" @click="leftTableButton(2)">-->
          <!--申领审核流程-->
        <!--</p>-->
      </div>
      <div class="examineProcessPage-right">
        <div class="title-right-box">
          <p class="table-button" :class="configType == 1 ? 'check-table' : ''" @click="rightTableButton(1)">
            管制类
          </p>
          <p class="table-button" :class="configType == 2 ? 'check-table' : ''" @click="rightTableButton(2)">
            非管制类
          </p>
          <p class="null-p"></p>
          <p class="page-submit-common-style-button table-right-button" v-hasPermiRouter="['audit:config:add']" @click="submitForm">提交</p>
        </div>
        <div class="container-box scrollbar-box">
          <div class="form-title-max-box">
            <div class="form-title-box">
              <div class="title-box">
                <img src="@/assets/ZDimages/chemicalManage/icon_splc_fqr.png">
                <p>发起人</p>
              </div>
              <p class="title-name">申购人</p>
            </div>
            <p class="link-p"></p>
            <p class="add-item-p el-icon-circle-plus"
               @click="addItem(0,'top')"></p>
          </div>
          <div class="form-for-max-box" v-for="(item,index) in newDataList" :key="index">
            <img class="arrow-img" src="@/assets/ZDimages/chemicalManage/arrow.png">
            <div class="form-for-big-box">
              <div class="form-for-title-box">
                <img src="@/assets/ZDimages/chemicalManage/icon_splc_spr.png">
                <p>审批人</p>
                <p class="el-icon-error" @click="delItem(index)"></p>
              </div>
              <div class="form-for-node-box">
                <p>*</p>
                <p>审核节点</p>
                <el-input
                  class="form-for-node-input"
                  v-model="item.auditNode"
                  placeholder="请输入审核节点"
                  style="width:235px;height:40px;"
                  maxLength='10'>
                </el-input>
              </div>
              <div class="form-for-user-box">
                <div class="form-for-user-select-box">
                  <p>*</p>
                  <p>审核人</p>
                  <p @click="dialogOpen(index)">{{item.actAuditUserModelList[0]?'已选择'+item.actAuditUserModelList.length+'个':'请选择审批人'}}</p>
                </div>
                <div class="form-for-user-check-box">
                  <div class="check-img-box" @click="auditTypeClick(1,index)">
                    <img v-if="item.auditType==1" src="@/assets/ZDimages/basicsModules/icon_xzqx_xz.png" alt="" >
                    <img v-else src="@/assets/ZDimages/basicsModules/icon_xzqx_zc.png" alt="">
                    <p>依次审批</p>
                  </div>
                  <div class="check-img-box" @click="auditTypeClick(2,index)">
                    <img v-if="item.auditType==2" src="@/assets/ZDimages/basicsModules/icon_xzqx_xz.png" alt=""  >
                    <img v-else src="@/assets/ZDimages/basicsModules/icon_xzqx_zc.png" alt="">
                    <p>或签</p>
                  </div>
                </div>
              </div>
            </div>
            <p class="link-p"></p>
            <p class="add-item-p el-icon-circle-plus"
               @click="addItem(index,'bottom')"></p>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="选择人员" :visible.sync="examineProcessDialogType" :close-on-click-modal="false" v-if="examineProcessDialogType"
               width="1300px" append-to-body id="examineProcess-dialog-box">
      <div class="user-max-big-box">
        <div class="user-big-left-box">
          <div class="title-max-box">
            <div class="input-box">
              <p class="left-table" :class="examineType == 1 ? 'check-p' : ''" @click="examineButton(1)">身份列表</p>
              <p class="right-table" :class="examineType == 2 ? 'check-p' : ''" @click="examineButton(2)">指定人员</p>
              <el-input class="input-user" placeholder="请搜索选择节点审批人" v-model="queryParams.searchValue"></el-input>
              <p class="input-icon el-icon-search" @click="handleQuery"></p>
            </div>
          </div>
          <div class="user-max-box scrollbar-box">
            <div class="user-for-box" v-for="(item,index) in userListLeft" :key="index">
              <img v-if="item.identity == true" src="@/assets/ZDimages/chemicalManage/icom_xzspr_sf.png">
              <img v-if="item.identity == false && !item.avatar" src="@/assets/ZDimages/basicsModules/tx_cion.png">
              <img v-if="item.identity == false && item.avatar" :src="item.avatar">
              <p class="user-for-name">{{item.auditUserName}}</p>
              <p class="user-for-add el-icon-circle-plus-outline" @click="addMinItem(index)"></p>
            </div>
          </div>
          <div class="user-bottom-box">
            <pagination :page-sizes="[20, 30, 40, 50]"
                        v-show="total>0"
                        :total="total"
                        :page.sync="queryParams.page"
                        :limit.sync="queryParams.pageSize"
                        @pagination="getList"
            />
          </div>
        </div>
        <div class="user-big-right-box">
          <div class="title-max-box">
            <p>已选：</p>
          </div>
          <div class="user-max-box">
            <div class="user-for-box" v-for="(item,index) in userListRight" :key="index">
              <img v-if="item.identity == true" src="@/assets/ZDimages/chemicalManage/icom_xzspr_sf.png">
              <img v-if="item.identity == false && !item.avatar" src="@/assets/ZDimages/basicsModules/tx_cion.png">
              <img v-if="item.identity == false && item.avatar" :src="item.avatar">
              <p class="user-for-name">{{item.auditUserName}}</p>
              <p class="user-for-del el-icon-circle-close" @click="delMinItem(index)"></p>
            </div>
          </div>
          <div class="user-bottom-box">
            <p></p>
            <p @click="clearEserListRight">清除</p>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer dialog-footer-box">
        <p class="dialog-footer-button-null"></p>
        <p class="dialog-footer-button-info" @click="dialogOut">取消</p>
        <p class="dialog-footer-button-primary" @click="dialogSubmit">提交</p>
        <p class="dialog-footer-button-null"></p>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  systemPostSelect,
  systemPostSelectByPage,
  systemUserSelectByPage,
  systemUserSelectUser
} from '@/api/commonality/noPermission'
import { updateCheckRecord } from '@/api/securityCheck'
import { chemicalAuditConfigAdd, chemicalAuditConfigGetConfigList } from '@/api/chemicalManage'

  export default {
    name: 'index',
    data () {
      return {
        pageType:1,
        leftTableType:1,
        configType:1,
        currentIndex:0,//当前节点索引
        newDataList:[
          {
            auditNode:'',
            actAuditUserModelList:[],
            auditType:1,//1依次审批2或签
          },
        ],
        //人员选择页面开关
        examineProcessDialogType:false,
        //身份/人员类型
        examineType:1,
        queryParams:{
          searchValue:'',
          page:1,
          pageSize:20,
        },
        total:10,
        userListLeft:[],
        userListRight:[],

      }
    },
    created () {

    },
    mounted () {
      this.chemicalAuditConfigGetConfigList();
      this.getList();
    },
    methods: {
      //身份查询
      getList(){
        let self=this;
        let list=[];
        if (self.examineType==1){//身份
          systemPostSelectByPage(this.queryParams).then(response => {
            if (response.data.records[0]){
              response.data.records.forEach(function(item) {
                list.push( {
                  identity:true,//身份true 人员false
                  avatar:'',
                  auditUserName:item.postName,
                  auditUserId:item.postId,
                })
              })
              this.$set(this,'userListLeft',list);
              this.$set(this,'total',response.data.total);
            }
          });
        }else if (self.examineType==2){//人员
          systemUserSelectByPage(this.queryParams).then(response => {
            if (response.data.records[0]){
              response.data.records.forEach(function(item) {
                list.push( {
                  identity:false,//身份true 人员false
                  avatar:item.avatar,
                  auditUserName:item.userName,
                  auditUserId:item.userId,
                })
              })
              this.$set(this,'userListLeft',list);
              this.$set(this,'total',response.data.total);
            }
          });
        }
      },
      //配置查询接口
      chemicalAuditConfigGetConfigList(){
        let self=this;
        chemicalAuditConfigGetConfigList({configType:self.configType}).then( response => {
          if (response.data[0]){
            let list=[];
            for (let i=0;i<response.data.length;i++){
              let list2=[];
              for (let b=0;b<response.data[i].actAuditUserVoList.length;b++){
                list2.push({identity:response.data[i].actAuditUserVoList[b].identity,
                            avatar:response.data[i].actAuditUserVoList[b].avatar,
                            auditUserName:response.data[i].actAuditUserVoList[b].auditUserName,
                            auditUserId:response.data[i].actAuditUserVoList[b].auditUserId,
                          })
              }
              list.push({auditNode:response.data[i].auditNode,auditType:response.data[i].auditType,actAuditUserModelList:list2})
            }
            this.$set(this,'newDataList',list)
          }
        });
      },
      //提交
      submitForm(){
        let self=this;
        let obj={
          configType:self.configType,//1是管控类，2是非管控类
          actAuditConfigModelList:this.newDataList
        }
        chemicalAuditConfigAdd(obj).then( response => {
          self.msgSuccess("提交成功")
        });
      },
      //左侧选项卡切换
      leftTableButton(type){
        if(this.leftTableType != type){
          this.$set(this,'leftTableType',type);

        }
      },
      //右侧选项卡切换
      rightTableButton(type){
        if(this.configType != type){
          this.$set(this,'configType',type);
          this.chemicalAuditConfigGetConfigList();
        }
      },
      //添加人员/身份
      addMinItem(index){
        let isIdentity= null;
        for (let i=0;i<this.userListRight.length;i++){
          if (this.userListRight[i].identity==true){
            isIdentity=true;
          }
        }
        if (this.userListLeft[index].identity && isIdentity){
          this.msgError('身份仅可选1个!')
        }else{
          let obj = JSON.parse(JSON.stringify(this.userListLeft[index]))
          this.userListLeft.splice(index,1);
          this.userListRight.push(obj)
        }

      },


      //删除人员/身份
      delMinItem(index){
        let obj = JSON.parse(JSON.stringify(this.userListRight[index]))
        this.userListRight.splice(index,1);
        this.userListLeft.push(obj)
      },
      //清除已选中人员
      clearEserListRight(){

        this.userListRight=[]
      },
      //添加流程
      addItem(index,type){
        if (this.newDataList[4]){
          this.msgError('流程最大不能超过5级')
          return
        }
        if(type == 'top'){
          this.newDataList.splice(index, 0, {
            auditNode:'',
            actAuditUserModelList:[],
            auditType:1,
          })
        }else{
          this.newDataList.splice(index+1, 0, {
            auditNode:'',
            actAuditUserModelList:[],
            auditType:1,
          })
        }
      },
      //删除流程
      delItem(index){
        let self = this;
        if(!self.newDataList[1]){
          this.msgError('至少要保留1级流程')
          return
        }
        this.$confirm('是否确认删除审核流程?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          self.newDataList.splice(index,1)
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(() => {});
      },
      //依次审批/或签选择
      auditTypeClick(type,index){
        this.$set(this.newDataList[index],'auditType',type);
      },

      //***********************************人员相关***********************************
      dialogOpen(index){
        this.currentIndex=index;
        this.$set(this,'userListRight',this.newDataList[index].actAuditUserModelList);
        this.$set(this,'examineProcessDialogType',true);
      },
      //关闭弹窗
      dialogOut(){
        this.$set(this,'examineProcessDialogType',false);
      },

      //弹窗提交
      dialogSubmit(){
        this.$set(this.newDataList[this.currentIndex],'actAuditUserModelList',this.userListRight);
        this.$set(this,'examineProcessDialogType',false);

      },
      //身份/人员切换
      examineButton(type){
        if(type != this.examineType){
          this.$set(this,'examineType',type)
          this.$set(this,'userListLeft','');
          this.getList();
        }
      },
      //节点审批人查询
      handleQuery(){
        this.$set(this.queryParams,'page',1);
        this.getList();
      },
      //添加身份
      addStanding(){
        // '最多可选1个身份'
      },
      //添加人员
      addUser(){
        // '最多可选20个人'
      },
      //删除已选
    },
  }
</script>
<style scoped lang="scss">
  .examineProcess{
    .examineProcessPage{
      flex:1;
      display: flex;
      flex-direction: row;
      overflow: hidden;
      .examineProcessPage-left{
        width:270px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border-right:1px solid #dedede;
        .title-left-p{
          font-size:18px;
          color:#0045AF;
          line-height: 80px;
          text-align: center;
          border-bottom:1px solid #dedede;
        }
        .table-button{
          width:200px;
          height:60px;
          line-height:60px;
          text-align: center;
          font-size:16px;
          border:1px solid #dedede;
          border-radius:4px;
          color:#333;
          margin:30px 35px 0;
          cursor: pointer;
        }
        .check-table{
          background-color: #0045AF;
          border:1px solid #0045AF;
          color:#fff;
        }
      }
      .examineProcessPage-right{
        flex:1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        .title-right-box{
          display: flex;
          height:80px;
          .null-p{
            flex:1;
          }
          .table-button{
            width:130px;
            height:40px;
            line-height:40px;
            text-align: center;
            font-size:14px;
            border:1px solid #dedede;
            border-radius:4px;
            color:#333;
            margin-top:40px;
            cursor: pointer;
          }
          .table-button:nth-child(1){
            margin-left:60px;
            border-right:none;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
          }
          .table-button:nth-child(2){
            border-left:none;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
          }
          .check-table{
            background-color: #0045AF;
            border:1px solid #0045AF;
            color:#fff;
          }
          .table-right-button{
            width:80px;
            margin:40px 40px 0 0;
          }
        }
        .container-box{
          flex:1;
          padding-bottom:40px;
          .form-title-max-box{
            margin:50px 0 0 475px;
            .form-title-box{
              width:350px;
              height:90px;
              .title-box{
                height:40px;
                background-color: #0183FA;
                border:1px solid #0183FA;
                border-top-left-radius:4px;
                border-top-right-radius:4px;
                border-bottom:none;
                display: flex;
                img{
                  display: block;
                  width:24px;
                  height:24px;
                  margin:8px 8px 8px 20px;
                }
                p{
                  font-size:16px;
                  line-height:40px;
                  color:#fff;
                }
              }
              .title-name{
                height:50px;
                border:1px solid #dedede;
                border-bottom-left-radius:4px;
                border-bottom-right-radius:4px;
                border-top:none;
                font-size:14px;
                line-height:50px;
                text-align: center;
              }
            }
            .link-p{
              width:1px;
              height:16px;
              background-color: #dedede;
              margin:0 174px;
            }
            .add-item-p{
              margin:0 163px;
              color:#0045AF;
              width:24px;
              height:24px;
              line-height:24px;
              text-align: center;
              font-size:24px;
              cursor: pointer;
            }
          }
          .form-for-max-box{
            margin-left:475px;
            .arrow-img{
              width:13px;
              height:46px;
              margin:-1px 168px;
            }
            .form-for-big-box{
              .form-for-title-box{
                width:350px;
                height:40px;
                display: flex;
                background-color: #FFA50A;
                border:1px solid #FFA50A;
                border-top-right-radius: 4px;
                border-top-left-radius: 4px;
                border-bottom:none;
                position: relative;
                img{
                  display: block;
                  width:24px;
                  height:24px;
                  margin:8px 8px 8px 20px;
                }
                p:nth-child(2){
                  font-size:16px;
                  line-height:40px;
                  color:#fff;
                }
                p:nth-child(3){
                  position: absolute;
                  top: 5px;
                  right:5px;
                  width:30px;
                  height:30px;
                  line-height:30px;
                  text-align: center;
                  cursor: pointer;
                  font-size:20px;
                  color:#FF0000;
                }
              }
              .form-for-node-box{
                padding-top:10px;
                width:350px;
                border:1px solid #dedede;
                border-top:none;
                border-bottom:none;
                display: flex;
                p{
                  line-height:60px;
                  font-size:14px;
                }
                p:nth-child(1){
                  color:#FF0000;
                  margin-left:20px;
                }
                p:nth-child(2){
                  color:#333333;
                  margin-left:2px;
                }
                .form-for-node-input{
                  margin:10px 0 0 10px;
                }
              }
              .form-for-user-box{
                width:350px;
                border:1px solid #dedede;
                border-bottom-right-radius: 4px;
                border-bottom-left-radius: 4px;
                border-top:none;
                .form-for-user-select-box{
                  width:350px;
                  height:40px;
                  display: flex;
                  p{
                    line-height:40px;
                    font-size:14px;
                  }
                  p:nth-child(1){
                    color:#FF0000;
                    margin-left:34px;
                  }
                  p:nth-child(2){
                    color:#333333;
                    margin-left:2px;
                  }
                  p:nth-child(3){
                    width:235px;
                    height:40px;
                    line-height:38px;
                    padding:0 15px;
                    margin:0 0 0 10px;
                    border-radius:4px;
                    border:1px solid #dedede;
                    color:#C0C4CC;
                    cursor: pointer;
                  }
                }
                .form-for-user-check-box{
                  display: flex;
                  padding:10px 20px;
                  .check-img-box{
                    margin-left:40px;
                    display: flex;
                    cursor: pointer;
                    img{
                      width:16px;
                      height:16px;
                      margin:12px;
                    }
                    p{
                      line-height:40px;
                      font-size:14px;
                    }
                  }
                }
              }
            }
            .link-p{
              width:1px;
              height:16px;
              background-color: #dedede;
              margin:0 174px;
            }
            .add-item-p{
              margin:0 163px;
              color:#0045AF;
              width:24px;
              height:24px;
              line-height:24px;
              text-align: center;
              font-size:24px;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
</style>
<style lang="scss">
  #examineProcess-dialog-box{
    .el-dialog__body{
      padding:20px 50px 0;
    }
    .user-max-big-box{
      height:500px;
      display: flex;
      .user-big-left-box{
        flex:1;
        display: flex;
        flex-direction:column;
        margin-right:30px;
        .title-max-box{
          display: flex;
          height:40px;
          margin-bottom:10px;
          .input-box{
            border:1px solid #dedede;
            height:40px;
            display: flex;
            overflow: hidden;
            border-radius:4px;
            .left-table{
              width:80px;
              line-height:38px;
              text-align: center;
              cursor: pointer;
              color:#C0C4CC;
            }
            .right-table{
              width:80px;
              line-height:38px;
              text-align: center;
              cursor: pointer;
              color:#C0C4CC;
            }
            .input-user{
              width:382px;
              border-left:1px solid #dedede;
              input{
                border:none;
              }
            }
            .input-icon{
              width:40px;
              height:40px;
              line-height:40px;
              text-align: center;
              cursor: pointer;
              font-size:14px;
            }
            .input-icon:hover{
              color:#fff;
              background-color: #0183FA;
            }
            .check-p{
              border:1px solid #0183FA!important;
              background-color: #0183FA;
              color:#fff;
            }
          }
        }
        .user-max-box{
          border:1px solid #dedede;
          flex:1;
          padding-top:20px;
          .user-for-box{
            display: flex;
            cursor: pointer;
            padding:5px 0;
            img{
              margin:0 20px 0 20px;
              display: block;
              width:30px;
              height:30px;
              border-radius:50%;
            }
            .user-for-name{
              line-height:30px;
              font-size:16px;
              flex:1;
            }
            .user-for-add{
              line-height:30px;
              font-size:20px;
              color:#0183FA;
              margin-right:20px;
            }
          }
          .user-for-box:hover{
            background-color: rgba(30,144,255,0.1);

          }
        }
        .user-bottom-box{
          height:60px;
          .pagination-container{
            padding:15px 20px!important;
          }
        }
      }
      .user-big-right-box{
        flex:1;
        display: flex;
        flex-direction:column;
        .title-max-box{
          display: flex;
          height:40px;
          margin-bottom:10px;
          padding:0 20px;
          p{
            font-size:16px;
            height:40px;
            line-height:40px;
          }
          p:nth-child(1){
            flex:1;
          }
        }
        .user-max-box{
          border:1px solid #dedede;
          flex:1;
          padding-top:20px;
          .user-for-box{
            display: flex;
            cursor: pointer;
            padding:5px 0;
            img{
              margin:0 20px 0 20px;
              display: block;
              width:30px;
              height:30px;
              border-radius:50%;
            }
            .user-for-name{
              line-height:30px;
              font-size:16px;
              flex:1;
            }
            .user-for-del{
              line-height:30px;
              font-size:20px;
              color:#0183FA;
              margin-right:20px;
            }
          }
          .user-for-box:hover{
            background-color: rgba(30,144,255,0.1);

          }
        }
        .user-bottom-box{
          height:60px;
          display: flex;
          p:nth-child(1){
            flex:1;
          }
          p:nth-child(2){
            width:80px;
            text-align: center;
            height:40px;
            line-height:40px;
            font-size:16px;
            color:#0183FA;
            margin-top:10px;
            cursor: pointer;
          }
        }
      }
    }
  }
</style>
