<template>
  <el-dialog
    v-dialogDrag
    :title="title"
    :visible="dialogFormVisible"
    @close="cancelForm"
    :close-on-click-modal="false"
    class="el-dialog-single"
  >
    <el-form
      label-width="90px"
      :model="formList"
      :rules="rules"
      ref="ruleForm"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="姓名：" prop="name">
            <span>{{formList.name}}</span>           
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="手机号：" prop="telephone">
            <span>{{formList.telephone}}</span>           
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="证件类型：" prop="credentialType">
            <span>{{formList.credentialType}}</span> 
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="证件号码：" prop="credentialNumber">
            <span>{{formList.credentialNumber}}</span> 
          </el-form-item>
        </el-col>
      </el-row> 

      <el-row>
        <el-col :span="24">
          <el-form-item :label="departlabel" prop="departId" >
              <selectTree
                ref="selectTreeParent"
                @getValue="checkChangeParent"
                @selectClickT="selectClickT"
                :curValue="defaulDataParent"
                :data="getTreeDepartlist"     
                :obj="{                  
                    id: 'id',
                    label: 'name',
                    children: 'children',
                }"
                checkStrictly 
                clearable	
                filterable	
                collapseTags	
                ></selectTree>            
          </el-form-item>
        </el-col>
      </el-row>


      <el-row>
        <el-col :span="24">
          <el-form-item label="职业类型：" prop="occupationType">
            <el-select v-model="formList.occupationType" placeholder="请选择职业类型" clearable :disabled="occupationTypeDisabled">
              <el-option v-for="(item,index) in occupationTypeArr" :label="item.label" :value="item.value" :key="index"></el-option>  
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="入职日期：" prop="hiredDate">
            <el-date-picker
             v-model="formList.hiredDate"
             type="date"
             format="yyyy-MM-dd"
             value-format="yyyy-MM-dd"
             style="width:100%"
             clearable
             :disabled="disabledhiredDate"
             placeholder="选择日期">
           </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

        

    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm()">确 定</el-button>
      <el-button @click="cancelForm()">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import selectTree from "@/components/SelectTree";
import { AddUserEmplyeeBackApi } from "@/api/staffApi.js"
export function validatePhone(rule,value,callback){//校验手机号
  setTimeout(() => {
     if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(value)) {
      callback(new Error('请输入正确的手机号'))
    } else {
      callback()
    }
  }, 500);
}
export default {
  inject:['permissions'],
  computed:{
    permissionsStr(){
        return this.permissions()
    },
    isNoSecurityUser() {
        return this.institutionalCode && !this.institutionalCode.startsWith('01')
    }
  },
  props: ["showdialogBack"],
  watch: {
    showdialogBack() {
      this.dialogFormVisible = this.showdialogBack;
      this.defaulDataParent=[]
    },
    "formList.departId"(){
       if(this.formList.departId){
         this.$refs.ruleForm.clearValidate(['departId']); //清空提示
       }
    }
  },
  components: {
    selectTree //注册组件
  },
  data() {
    return {     
      title: "复职确认",
      dialogFormVisible: this.showdialogBack,
      OperType: 0, //0 新增  1修改
      formList: {},
      rules: {      
        departId:[{required: true, message: `请选择新入职${$SuperviseStr.depart}`, trigger: "blur"}],
        occupationType:[{required: true, message: "请选择职业类型", trigger: "change"}],
        hiredDate:[{required: true, message: "请选择入职日期", trigger: "blur"}],       
      },
      defaulDataParent:'',//上级部门默认回选数据
      defaulData:[],
      occupationTypeArr:[],
      getTreeDepartlist:[],
      departlabel:`新入职${$SuperviseStr.depart}：`,
      homeTemplateBoradType:localStorage.getItem('homeTemplateBoradType')||'',
      disabledhiredDate:false,
      occupationTypeDisabled:false,
      institutionalCode:localStorage.getItem('institutionalCode')||'',//机构类型      
    };
  },
  mounted(){
     if(this.homeTemplateBoradType=='rtpayTemplate'){
         this.occupationTypeArr=[{label:'一般职员',value:'Normal'}]
     }else if(localStorage.getItem('appidSupervise')&&JSON.parse(localStorage.getItem('appidSupervise')).appId=='__d1qEDy3wYq8VF5KvUoE'){//监控端--机构用户管理
        this.occupationTypeArr=[{label:'一般职员',value:'Normal'},{label:'保安员',value:'SecurityGuard'},{label:'警官',value:'Police'}]
     }
     else{
         this.occupationTypeArr=[{label:'一般职员',value:'Normal'},{label:'保安员',value:'SecurityGuard'}]
     }
  },
  methods: {     
    selectClickT(val){
       console.log(val)
       this.getTreeDepartlist=val
    },   
    getTableRow(data, type) {       
      let newRowData = JSON.parse(JSON.stringify(data)); //拷贝一份存储对象
      this.formList = newRowData; //拷贝一份存储对象引用不同地址
      this.OperType = type;  
      let now=new Date()
      let y=now.getFullYear()
      let m=now.getMonth()+1<10?'0'+(now.getMonth()+1):now.getMonth()+1
      let d=now.getDate()<10?'0'+now.getDate():now.getDate()
      let nowDate=y+'-'+m+'-'+d
      console.log(nowDate)
      this.$nextTick(()=>{
        this.$set(this.formList,'hiredDate',nowDate) //入职日期默认选择当天
        console.log(this.permissionsStr)
        if(this.permissionsStr&&this.permissionsStr.indexOf('hiredDatedLimited')>-1){//北京地区限制编辑入职时间
          this.disabledhiredDate=true              
        }else{
          this.disabledhiredDate=false
        }
      })
      this.getTreeData(this.getTreeDepartlist)
      if(this.institutionalCode=='0601'){
        this.occupationTypeDisabled=true
        this.$set(this.formList,'occupationType','Normal')
      }
      if(this.isNoSecurityUser){ //保安行业
        this.occupationTypeDisabled=true
        this.$set(this.formList,'occupationType','Normal')
      }
      if(this.institutionalCode&&this.institutionalCode.startsWith('04')){//内保行业
        this.occupationTypeDisabled=true
        this.$set(this.formList,'occupationType','Normal')
     }
     if((this.institutionalCode&&this.institutionalCode.endsWith('07'))||(this.institutionalCode&&this.institutionalCode.endsWith('08'))||(this.institutionalCode&&this.institutionalCode.endsWith('09'))){//人口监管组织
        this.occupationTypeDisabled=true
        this.$set(this.formList,'occupationType','Normal')
     }
     if(this.institutionalCode&&this.institutionalCode.startsWith('02')){
        this.occupationTypeDisabled=true
        this.$set(this.formList,'occupationType','Normal')
     }
    },
    checkChangeParent(key, data) {//selectTree组件-复选框选中的数据
        console.log(key)
        console.log(data)
        this.$set(this.formList,"departId",key)
        console.log(this.formList.departId)
    },
    checkChange(key, data) {//selectTree组件-复选框选中的数据
        // console.log(key)
        // console.log(data)
        // this.$set(this.formList,"allowedDepartIds",key)
    },
    getTreeData(arr){//递归遍历部门
        arr.forEach(item=>{
             item.label=item.name;
             item.value=item.id;
             if(item.children&&item.children.length<1){
                 item.children=undefined
             }else if(item.children&&item.children.length>0){
               this.getTreeData(item.children)  
             }
         })
    },     
    submitForm() {  
      let credential={
        number:this.formList.number,
        type:this.formList.type
      }
      this.formList.credential=credential
      console.log(this.formList)
      let obj2={domainId:this.$route.query.domainId}     
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {          
            AddUserEmplyeeBackApi(this.formList,obj2).then((response) => {
              //新增
              if (response.status==200) {
                let newobj = JSON.parse(JSON.stringify(this.formList));
                this.$emit("refurlist", newobj); //确定后发送$emit绑定父数据
                this.cancelForm();
              }
            });          
        } else {
          return false;
        }
      });
    },
    cancelForm() {
      //取消关闭
      this.$emit("update:showdialogBack", false);
      this.$nextTick(function () {
        this.$refs.ruleForm.resetFields(); //重置输入框提示
      });
    },
  },
};
</script>
<style lang="scss">
// .el-dialog-single{
//   .el-form-item{
//     display: flex;
//     flex-direction: column;
//     .el-form-item__content{margin-left:20px!important;}
//   }
// }
.elradioLineheight{
    margin-top:5px; 
  .el-radio{display: block; line-height: 30px;}
}
</style>