<template>
  <el-dialog
    v-dialogDrag
    title="批量转移成员"
    :visible="dialogFormVisible"
    @close="cancelForm"
    :close-on-click-modal="false"
    class="el-dialog-single el-dialog-colum"
  >
    <el-form
      label-width="130px"
      :model="formList"
      :rules="rules"
      ref="ruleForm"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="要转移的成员：" prop="employeeIds">
             <span v-for="(item,index) in multipleArr" :key="item.id">
               <em>{{item.name}}</em>
               <b v-if="index!==multipleArr.length-1">, </b>
             </span>             
          </el-form-item>
        </el-col>
      </el-row>

      <el-row >
        <el-col :span="24">
          <el-form-item :label="departlabel" prop="destDepartId">
              <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-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 { batchMoveUserApi } from "@/api/staffApi.js"
export default {
  props: ["showdialogMove"],
  watch: {
    showdialogMove() {
      this.dialogFormVisible = this.showdialogMove;
    },
  },
  components: {
    selectTree //注册组件
  },
  data() {
    return {     
      title: "",
      dialogFormVisible: this.showdialogMove,
      OperType: 0, //0 新增  1修改
      formList: {},
      rules: {
        destDepartId: [{required: true, message: `请选择转移的新${$SuperviseStr.depart}`, trigger: "blur" }],        
      },
      defaulDataParent:'',//上级部门默认回选数据
      defaulData:[],
      parentIdShow:true,
      multipleArr:[],
      getTreeDepartlist:[],
      departlabel:`转移的新${$SuperviseStr.depart}：`
    };
  },
  methods: {   
    selectClickT(val){
        console.log(val)
        this.getTreeDepartlist=val
    },   
    getTableRow(data, type) {   
      console.log(data) 
      this.multipleArr=data 
      this.defaulDataParent=[]
      // this.getTreeData(this.getTreeDepartlist)
    },
    checkChangeParent(key, data) {//selectTree组件-复选框选中的数据
        console.log(key)
        console.log(data)
        this.$set(this.formList,"destDepartId",key)
    },
    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() {
      console.log(this.formList.employeeIds)
      let employeeIds=[]
      this.multipleArr.forEach(item=>{
           employeeIds.push(item.id)
      })
      let obj2={domainId:this.$route.query.domainId}      
      this.$refs.ruleForm.validate((valid) => {
        if (valid) { 
           this.$confirm(`即将批量转移成员到新${$SuperviseStr.depart},提交后无法恢复，是否继续?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
            .then(() => {
                batchMoveUserApi(this.formList,employeeIds,obj2).then((response) => {
                  if (response.status==200) {
                    let newobj = JSON.parse(JSON.stringify(this.formList));
                    this.$emit("refurlist", newobj); //确定后发送$emit绑定父数据
                    this.cancelForm();
                  }
                });  
            })
            .catch(() => {
                // this.radio = ""; //清空选中
            });   

                    
        } else {
          return false;
        }
      });
    },
    cancelForm() {
      //取消关闭
      this.$emit("update:showdialogMove", 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;}
//   }
// }
</style>