<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="employeeId">
            <el-select v-model="formList.employeeId" filterable :filter-method="filterMethod"   @change="selectUser" @remove-tag="removetag" placeholder="请选择" >
              <el-option
                v-for="item in tableDataEmployee"
                :key="item.id"
                :label="item.name+' ('+item.telephone+')'+' ('+item.departName+')'"
                :value="item.id">
              </el-option>
            </el-select> 
            <div class="userInfolist" v-if="resultArr.length">
                <el-descriptions title="" >
                <el-descriptions-item label="姓名" :span='24'>{{resultArr&&resultArr[0].name}}</el-descriptions-item>
                <el-descriptions-item label="证件类型" :span='24'>{{resultArr&&resultArr[0].credentialType}}</el-descriptions-item>
                <el-descriptions-item label="证件号码" :span='24'>{{resultArr&&resultArr[0].credentialNumber}}</el-descriptions-item>       
                <el-descriptions-item label="现职业类型" :span='24'>{{resultArr&&resultArr[0].occupationType}}</el-descriptions-item>
            </el-descriptions>
            </div>
          </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 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-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 { employeeTableListApi,changeOccupationTypeApi } from "@/api/staffApi.js"
export default {
  props: ["showdialogOccType"],
  watch: {
    showdialogOccType() {
      this.dialogFormVisible = this.showdialogOccType;
      if(this.dialogFormVisible){  
        this.params={
          pageIndex:1,
          pageSize:10,
          keyword:'',             
          total:0
        }      
        console.log(this.params)
        this.employeeTableList()//员工列表
      }
    },   
  },
  components: {
  },
  data() {
    return {     
      title: `变更职业类型`,
      dialogFormVisible: this.showdialogOccType,
      OperType: 0, //0 新增  1修改
      formList: {
        employeeId:'',
        occupationType:''
      },
      rules: {
        employeeId: [{required: true, message: "请选择用户", trigger: "change" }],       
        occupationType:[{required: true, message: "请选择职业类型", trigger: "change"}],      
      },     
      params:{//搜索条件
        pageIndex:1,
        pageSize:10,
        keyword:'',             
        total:0
      },
      tableDataEmployee:[],
      resultArr:[],//选择用户下拉得到对应名称数组
      occupationTypeArr:[],
      homeTemplateBoradType:localStorage.getItem('homeTemplateBoradType')||'',    
    };
  },
  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: {   
    employeeTableList(){//列表表格-查询结果
        let obj2={domainId:this.$route.query.domainId}
        employeeTableListApi(this.params,obj2).then(response=>{
            if(response.data.data){
                this.tableDataEmployee=response.data.data
                this.params.total=response.data.total
            }
        })
    }, 
    filterMethod(val){//输入框过滤搜索
        console.log(val)//输入框关键词名称
        this.params.keyword=val
        let obj2={domainId:this.$route.query.domainId}
        employeeTableListApi(this.params,obj2).then(response=>{
            if(response.data.data){
                this.tableDataEmployee=response.data.data
                this.params.total=response.data.total
            }
        })
    }, 
    selectUser(val){//查询下拉框id对应的名称数组
        console.log(val)
        console.log(this.tableDataEmployee)
        let resultArr=[]
        resultArr=this.tableDataEmployee.filter(item=>{
           return val.indexOf(item.id)>-1
        })
        resultArr.forEach(its=>{
          this.resultArr.push(its)
        })
        let resultArr2=this.resultArr.filter(item=>{
           return val.indexOf(item.id)>-1
        })
        this.resultArr=resultArr2
        this.resultArr=[...new Set(this.resultArr)]
         console.log(this.resultArr)            
    },
    
    removetag(val){
      console.log(val)
      this.resultArr.forEach(item=>{
        if(item.id==val){
          this.resultArr.splice(item,1)
        }
      })
       console.log(this.resultArr)
    },
    submitForm() {  
      console.log(this.formList)
      let obj2={domainId:this.$route.query.domainId}     
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {          
            changeOccupationTypeApi(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:showdialogOccType", false);
      this.$nextTick(function () {
        this.$refs.ruleForm.resetFields(); //重置输入框提示
        this.resultArr=[]
      });
    },
  },
};
</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>