<template>
  <div  >
    <form-col　:options.sync="dataLeft" ref="ruleForm1"   />
    <div class="interval"  :style="'width:'+intervalWidth " ></div>
    <form-col :options.sync="dataRight" ref="ruleForm2"  />
    <!-- <div class="button-submit" @click="submitForm" ><span  >提 交</span></div> -->
       <slot></slot>
    <dialog-box :dialogVisible.sync="dialogVisible" >
        <template v-slot:show-errtitle>{{dialogErrTltle}}</template>
      <template v-slot:show-text>{{dialogVisibleIf}}</template>
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </dialog-box>
    
  </div>
</template>

<script>
import FormCol from '@/common/components/FormCol.vue'
import DialogBox from '../../common/components/DialogBox.vue'

export default {
  name: 'ContentFormAdd',
  data(){
    return{ 
      dataLeft: [
            {
              name:'操作用户名：',
              type: 'input',
              placeholder: '请输入',
              required: true,   //是否需要验证
              required_type: 'phone', //验证方式
              value: '',
              prop: '',
              rules: 'user',
              maxlength: 6 //限制长度
            },
            {
              name:'姓名：',
              type: 'input',
              placeholder: '请输入',
              required: true,
              value: '',
              rules: 'name',
              maxlength: 32
            },
            {
              name:'性别：',
              type: 'select',
              placeholder: '请输入',
              required: true,
              options: [{
                value: '男',
                label: '男'
                },{
                  value: '女',
                  label: '女'
                }],
                value: '男',
                rules: 'selectType'
              },
              {
              name:'证件类型：',
              type: 'select',
              placeholder: '请输入',
              required: true,
              options: [{
                value: '2',
                label: '身份证'
                }],
                value: '2',
               rules: 'selectType',
              },

              {
              name:'证件号码：',
              type: 'input',
              placeholder: '请输入',
              required: true,
              value: '',
              rules: 'peopleID',
              maxlength: 18 //限制长度
              },
              {
                name:'部门：',
                type: 'input',
                placeholder: '请输入',
                required: false,
                value: '',
                rules: 'dataNull'
              },
              {
                name:'岗位/职务：',
                type: 'input',
                placeholder: '请输入',
                required: false,
                value: '',
                rules: 'dataNull'
              }
      ], 
      dataRight:[
              {
              name:'办公电话：',
              type: 'input',
              placeholder: '请输入',
              required: false,
              value: ''
            },{
              name:'手机：',
              type: 'input',
              placeholder: '请输入',
              required: true,
              value: '',
              rules: 'checkPhone',
              maxlength: 11 //限制长度
            },{
              name:'传真：',
              type: 'input',
              placeholder: '请输入',
              required: false,
              options: [],
              value: ''
            },{
              name:'电子邮箱：',
              type: 'input',
              placeholder: '请输入',
              required: true,
              value: '' ,
              rules: 'checkEmail'
            },{
              name:'业务类型：',
              type: 'select_checkbox',  
              placeholder: '请输入',
              required: true,       //是否表单验证
              options: [],        //下拉框数据
              option_label: 'RIGHT_CODE', //option显示数据 
              option_value: 'RIGHT_CODE', //option实际数据 
              value: [],       //绑定的value
              ifShowAs: true,   //是否显示别名 true则跟（this.$store.state.rightDict里字典对应）false则
              getObjTypeValue: [],  //选中多选数据  获取整个obj 放到Arr里
               rules: 'arrayType',
            },{
              name:'角色配置：',
              type: 'select_checkbox',
              placeholder: '请输入',
              required: true,
              options: this.role,
              option_label: 'ROLE_NAME', //option显示数据 
              option_value: 'ROLE_ID', //option实际数据 
              value: [],
              ifShowAs: false,   //是否显示别名
              getObjTypeValue: [],  //选中多选数据  获取整个obj 放到Arr里
              rules: 'arrayType'
              
      }],
      ruleForm: false, //重置
       dialogVisible: false,  //是否显示弹框
       dialogErrTltle : '',
       dialogVisibleIf: '成功'  //是否显示弹框
    }
  },
  methods:{
   
    testGetChildRef(){  //判断表单是否符合规范
      let isform = true
      let childRef1 = this.$refs.ruleForm1.$refs.ruleForm
      let childRef2 = this.$refs.ruleForm2.$refs.ruleForm
      for(let i = 0 ;i<childRef1.length;i++){
         childRef1[i].validate((valid) => {
           if(valid==false){
             isform = false
           }
          });
        }
      for(let i = 0 ;i<childRef2.length;i++){
         childRef2[i].validate((valid) => {
           if(valid==false){
             isform = false
           }
          });
        }
        return isform
    },
    resetForm(){  //表单重置
      let childRef1 = this.$refs.ruleForm1.$refs.ruleForm
      let childRef2 = this.$refs.ruleForm2.$refs.ruleForm
      for(let i = 0 ;i<childRef1.length;i++){
         childRef1[i].resetFields()
        }
      for(let i = 0 ;i<childRef2.length;i++){
         childRef2[i].resetFields()
        }
    }
  },
  computed:{
    userForm(){
        const resGetUserInfo =  this.$store.state.userInfo     
      return{ 
        CUST_CODE: this.dataLeft[0].value, //操作者(一般供柜员操作才传，客户不用传)  操作用户名
        USER_FNAME: this.dataLeft[1].value, //用户姓名
        // IDNO_TYPE: this.dataLeft[3].value, //证件类型
        IDNO_TYPE: "2", //证件类型
        ID_NO: this.dataLeft[4].value,  //证件号
        MOBILE: this.dataRight[1].value, //手机号
        EMAIL: this.dataRight[3].value,  //邮箱
        SEX: this.dataLeft[2].value,  //性别
        // SEX: "男",  //性别
        DEPT: this.dataLeft[5].value,  //部门
        POSITION: this.dataLeft[6].value, //职务/岗位
        FAX: this.dataRight[2].value,  //传真
        TEL: this.dataRight[0].value,  //办公电话
        INST_IDNO_TYPE: '', //机构证件类型
        INST_ID_NO: '',  //机构证件号
        INST_NAME: '',  //机构名称
        ROLE_ID: this.dataRight[5].value,  //角色ID
        // ROLE_ID: "R003,R004",  //角色ID
        SYSTEM_ID: '79',  //子系统编号
            USER_CODE: resGetUserInfo.USERCODE,
        INST_USER_CODE: resGetUserInfo.USERCODE,
        // BUSIN_TYPE: this.dataRight[4].value.join(','),  //业务类型
        BUSIN_TYPE: this.dataRight[4].value,  //业务类型
        OPER_FLAG: 'A',  //创建/修改标志
        ACTION_TYPE: '1',  //操作类型
        OPERATOR: resGetUserInfo.USER_CUSTID //操作员
      }
    }
  },
  watch:{
    // 监听角色是否更改
    role(){
      this.dataRight[5].options = this.role
    },
    //监听业务类型是否更改
    userInformation(){
      this.dataRight[4].options = this.userInformation
    },
    userForm(val){
      this.$emit('user-form', val)
    }
  },
  components:{
      FormCol,
    DialogBox
  },
  props: {
    intervalWidth: {
      type: [String,Number],
      default: '40px'
    },
    role: {  //获取角色
      type: Array,
      default(){
        return []
      }
    },
    userInformation: {  //获取业务类型
      type: Array,
      default(){
        return []
      }
    }
  }

}
</script>

<style scoped >
.interval{
  display: inline-block;
}
/* 提交按钮Style */

/* 取消 确认 按钮居中 */
.el-dialog__wrapper >>> .el-dialog .el-dialog__footer {
  text-align: center ;
}
/* 取消 确认 样式 */
.dialog-footer .el-button{
  width: 118px;
  height: 32px;
  border: 1px solid #979797;
  border-radius: 2px;
  box-sizing: border-box;
  padding: 0;
  font-family: SourceHanSansCN-Medium;
  font-size: 14px;
  letter-spacing: 0;
  font-weight: 500;
  }
/* 取消和确认边距 */
.el-button+.el-button {
    margin-left: 16px;
}

</style>
