<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="departlabel" prop="fromDepartIds">
             <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="通讯录权限：" prop="permissionType">
             <el-radio-group v-model="formList.permissionType" class="elradioLineheight">
                <el-radio label="JustOnDepart">可见所在{{$SuperviseStr.depart}}成员</el-radio>
                <el-radio label="JustSelf">可见自己</el-radio>
                <el-radio label="OnDepartAndSub">可见所在{{$SuperviseStr.depart}}及下级{{$SuperviseStr.depart}}成员</el-radio>
                <el-radio label="Whole">可见全部成员</el-radio>
                <el-radio label="Special">可见指定{{$SuperviseStr.depart}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row v-if="formList.permissionType=='Special'">
        <el-col :span="24">
            <el-form-item label="" prop="allowedDepartIds">
                <selectTree
                ref="selectTree"
                @getValue="checkChange"
                @selectClickT="selectClickT"
                :curValue="defaulData"
                :data="getTreeDepartlist"     
                :obj="{                  
                    id: 'id',
                    label: 'name',
                    children: 'children',
                }"
                checkStrictly 
                clearable	
                filterable	
                multiple		
                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 { batchImDepartmentsApi } from "@/api/staffApi.js"
export default {
  props: ["showdialogIm"],
  watch: {
    showdialogIm() {
      this.dialogFormVisible = this.showdialogIm;
    },
  },
  components: {
    selectTree //注册组件
  },
  data() {
    return {     
      title: "",
      dialogFormVisible: this.showdialogIm,
      OperType: 0, //0 新增  1修改
      formList: {},
      rules: {
        permissionType:[{required: true, message: "请选择通讯录权限", 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.$set(this.formList,"permissionType","JustOnDepart") 
      this.multipleArr=data 
      // 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.departIds)
      let departIds=[]
      this.multipleArr.forEach(item=>{
           departIds.push(item.id)
      })

      let obj2={domainId:this.$route.query.domainId}
      if (this.OperType == 0) {
        //新增
      }
      this.$refs.ruleForm.validate((valid) => {
        if (valid) { 
           this.$confirm(`即将批量设置${$SuperviseStr.depart}成员的通讯录权限,提交后无法恢复，是否继续?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
            .then(() => {
                batchImDepartmentsApi(this.formList,departIds,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:showdialogIm", 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>