<template>
<section>
  <el-dialog
    v-dialogDrag
    :title="title"
    :visible="dialogFormVisible"
    @close="cancelForm"
    :close-on-click-modal="false"
    class="el-dialog-double el-dialog-moveSuper"
  >
   <!-- 备注区域 -->
    <section class="remarkBox">
        <div class="remarkInfo">
            <i class="el-icon-warning-outline el-icon-flag"></i>
            <span>
            1. 要离职的{{$SuperviseStr.employee}}中以下人员为其他{{$SuperviseStr.employee}}的上级，请先转移上级身份到新的{{$SuperviseStr.employee}}或选择删除上级身份后再离职。<br/>
            2. 删除上级身份后，原下级{{$SuperviseStr.employee}}的“上级”信息将被清空，转为无上级状态。
            </span>
        </div>
    </section>

    <el-form
      label-width="90px"
      :model="formList"
      :rules="rules"
      ref="ruleForm"
    > 

     <el-table :data="newRowData" ref="districtTable"  max-height="750" >
           <el-table-column
                label="姓名"
                prop="name"
                width="200">                
            </el-table-column>
            <el-table-column
                label="转移给新上级"
                prop=""
                width="300">
                <template slot-scope="scope">
                    <el-select v-model="scope.row.newSuperiorId" filterable :filter-method="filterMethod" clearable  @change="selectUser" :disabled="scope.row.newdisabled" placeholder="请选择">
                      <el-option
                        v-for="item in tableDataEmployee"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                      </el-option>
                    </el-select> 
                </template>
            </el-table-column>
            <el-table-column
                label=""
                prop=""
                width=""> 
                <template slot-scope="scope">
                    <span><el-checkbox v-model="scope.row.check" @change="delCheck(scope.row)">删除上级身份</el-checkbox></span>
                </template>               
            </el-table-column>
     </el-table>      

    </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>

</section>  
</template>
<script>
import selectTree from "@/components/SelectTree";
import { employeeTableListApi,AddUserEmplyeeLeaveMoveSuperApi } 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: ["showdialogMoveSuper", "getTreeDepartlist"],
  watch: {
    showdialogMoveSuper() {
      this.dialogFormVisible = this.showdialogMoveSuper;
      this.defaulDataParent=[]
    },
  },
  components: {
    selectTree //注册组件
  },
  data() {
    return {     
      title: "转移上级身份",
      dialogFormVisible: this.showdialogMoveSuper,
      OperType: 0, //0 新增  1修改
      formList: {},
      params:{//搜索条件
        pageIndex:1,
        pageSize:10,
        keyword:'',             
        total:0
      },
      rules: {
        // employeeIds: [{required: true, message: "请选择用户", trigger: "blur" }],
        // expectedDate:[{required: true, message: "请选择离职日期", trigger: "blur"}],
        // note:[{required: true, message: "请输入离职原因", trigger: "blur"}],       
      },
      defaulDataParent:'',//上级部门默认回选数据
      defaulData:[],
      tableDataEmployee:[],
      newRowData:[]  
    };
  },
  methods: {     
    getTableRow(data, type) {       
      let newRowData = JSON.parse(JSON.stringify(data)); //拷贝一份存储对象
      console.log(newRowData)//返回一个数组，用户id与名称
      this.newRowData=newRowData
      this.newRowData.forEach(item=>{
        this.$set(item,"check",false)
        this.$set(item,"newdisabled",false)
        this.$set(item,"newSuperiorId",null)
        this.$set(item,"originalSuperiorId",item.id)         
      })
      console.log(this.newRowData)
      // this.formList = newRowData; //拷贝一份存储对象引用不同地址
      this.OperType = type;  
      // this.getTreeData(this.getTreeDepartlist)
      this.employeeTableList()//员工列表
    },    
    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)  
             }
         })
    },   
    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){
        console.log(val)        
    },
    delCheck(row){
      console.log(row)
      if(row.check){
        row.newdisabled=true
        row.newSuperiorId=null
      }else{
        row.newdisabled=false
      }
    },
    submitForm() {    
      let arr=[]    
      this.newRowData.forEach(item=>{
            let obj={}
            obj.originalSuperiorId=item.originalSuperiorId
            obj.newSuperiorId=item.newSuperiorId
            arr.push(obj)        
      })
      let obj2={domainId:this.$route.query.domainId}     
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {       
          this.$confirm(`即将对选择的${$SuperviseStr.employee}进行离职,提交后无法恢复，是否继续?`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
            })
            .then(() => {                    
                AddUserEmplyeeLeaveMoveSuperApi(arr,obj2).then((response) => {                
                  //新增
                  if (response.status==200) {                  
                      let newobj = JSON.parse(JSON.stringify(this.newRowData));
                      this.$emit("refurlist", newobj); //确定后发送$emit绑定父数据
                      this.cancelForm();
                  }                  
                }); 
            })
            .catch(error => {
                console.log(error)
                console.log(error.response)
            });    
        } else {
          return false;
        }
      });
    },
    cancelForm() {
      //取消关闭
      this.$emit("update:showdialogMoveSuper", false);
      this.$nextTick(function () {
        this.$refs.ruleForm.resetFields(); //重置输入框提示
      });
    },
  },
};
</script>
<style lang="scss">
.el-dialog-moveSuper{
  .el-dialog__body{padding: 30px 20px;}
  .remarkBox{
       margin-bottom: 20px;
      .remarkInfo{
          background: #fafafa;              
          color: #666666;
          border: 1px solid #ebeef5;
          border-radius: 4px;
          line-height: 30px;
          padding: 10px;
          display: flex;
          text-align: left;
          .el-icon-flag{margin-top:9px;color: #ffc108;margin-right:10px;}
      } 
  }
}
</style>