<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=='IdCard'?'居民身份证/户口簿':''}}
              {{formList.credentialType=='IdCardOfXiangGang'?'香港特区护照/身份证':''}}
              {{formList.credentialType=='IdCardOfAoMen'?'澳门特区护照/身份证明':''}}
              {{formList.credentialType=='IdCardOfTaiwan'?'台湾居民来往大陆通行证':''}}
              {{formList.credentialType=='Passport'?'外国护照':''}}
              {{formList.credentialType=='Arms'?'退伍军人证':''}}
              {{formList.credentialType=='PoliceNo'?'警号':''}}
            </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>
              <el-option label="一般职员" value="Normal"></el-option>
              <el-option label="保安员" value="SecurityGuard"></el-option>
              <el-option label="警官" value="Police"></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
             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 {
  props: ["showdialogBack"],
  watch: {
    showdialogBack() {
      this.dialogFormVisible = this.showdialogBack;
      this.defaulDataParent=[]
    },
  },
  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: "blur"}],
        hiredDate:[{required: true, message: "请选择入职日期", trigger: "blur"}],       
      },
      defaulDataParent:'',//上级部门默认回选数据
      defaulData:[],
      getTreeDepartlist:[],
      departlabel:`新入职${$SuperviseStr.depart}：`
    };
  },
  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;  
      // this.getTreeData(this.getTreeDepartlist)
    },
    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>