<!-- 选择部门 -->

<template>
  <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :title="$t('form.selectMember')" :visible.sync="open" width="800px" append-to-body>
    <el-row>
      <el-col :span="12" class="select-user-left">
        <el-input
          :placeholder="$t('form.placeholderInput')"
          v-model="filterText"
          style="margin-bottom:10px">
        </el-input>

        <el-tree
          class="filter-tree"
          :data="list"
          :props="defaultProps"
          :default-expand-all="true"
          :default-expanded-keys="selected.length===0 ? []:selectedIds"
          :filter-node-method="filterNode"
          ref="tree"
          node-key="id"
          >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <!-- <el-checkbox :ref="'checkbox'+data.id" v-if="data.type===7" :checked="isCheck(data.id)" @change="handleChange(data)" class="select-dept-user-check-radio-box">{{ $i18n.locale === 'zh_CN'?data.name:data.nameEn }}</el-checkbox> -->
            <el-checkbox :ref="'checkbox'+data.id" v-if="data.type===7" :checked="isCheck(data.id)" @change="handleChange(data)" class="select-dept-user-check-radio-box">{{ data.name }}</el-checkbox>
            <!-- <span v-else>{{ $i18n.locale === 'zh_CN'?data.name:data.nameEn }}</span> -->
            <span v-else>{{ data.name }}</span>
          </span>
        </el-tree>
      </el-col>
      <el-col :span="12" class="select-user-right">
        <div>已选</div>
        <div class="select-user-selected" v-if="selected.length>0">
          <div class="select-user-selected-item" v-for="(item,index) in selected" :key="index">
            <!-- <div class="select-user-selected-name">{{$i18n.locale === 'zh_CN'?item.name:item.nameEn}}</div> -->
            <div class="select-user-selected-name">{{item.name}}</div>
            <div class="select-user-selected-del"><i class="el-icon-delete" @click="delSelected(item)"></i></div>
          </div>
        </div>
      </el-col>
    </el-row>
    

    <div slot="footer" class="dialog-footer">
      <el-button @click="open=false">{{$t('form.cancel')}}</el-button>
      <el-button type="primary" @click="save">{{$t('form.saveConfirm')}}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { deptUserList } from "@/api/system/user"
export default {
  name: "SelectDeptUserDialog",
  components: {},
  props: {
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  data() {
    return {
      open:false,

      selected:[],
      selectedIds:[],

      listData: [],
      list: [],
      filterText:'',
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    };
  },
  mounted() {
    
  },
  methods: {
    show(list){
      this.getList()
      this.selected = []
      this.selectedIds = []
      _.forEach(list,(item)=>{
        let id = item.id ?((item.id+'').indexOf('u_')>-1? item.id:('u_'+item.id)):''
        this.selectedIds.push(id)
        this.selected.push({
          id : id,
          name:item.name,
          nameEn:item.nameEn,
        })
      })
      this.open = true
      this.filterText = ''
    },
    isCheck(id){
      return this.selectedIds.indexOf(id)>-1
    },
    filterNode(value, data) {
      if (!value) return true;
      // return $i18n.locale === 'zh_CN'?(data.name.indexOf(value) !== -1):(data.nameEn.indexOf(value) !== -1);
      return data.name.indexOf(value) !== -1;
    },
    getList() {
      this.listData = []
      this.list = []
      deptUserList().then(response => {
        this.listData = response.data
        this.list = this.handleTree(response.data, "id")
      })
    },
    handleChange(data) {
      if(data && data.type===7){
        let isSelect = this.$refs['checkbox'+data.id].$el.querySelector('input').checked
        if(!isSelect){
          //之前是否已选中
          let index = _.findIndex(this.selected,(item)=>{
            return item.id===data.id
          })
          this.selected.splice(index,1)
          this.selectedIds.splice(index,1)
        }else{
          this.selected.push({id:data.id,name:data.name,nameEn:data.nameEn})
          this.selectedIds.push(data.id)
        }
        // this.$refs['checkbox'+data.id].$el.querySelector('input').checked = !isSelect
      }
    },
    // getName(id){
    //   let name = ''
    //   let arr =  _.filter(this.listData, (o)=> { return o.id===id })
    //   if(arr && arr.length>0){
    //     name = arr[0].name
    //   }
    //   return name
    // },
    save(){
      let backList= []
      for(let i=0;i<this.selected.length;i++){
        backList.push({
          id:this.selected[i] && this.selected[i].id?this.selected[i].id.replace('u_',''):'',
          name:this.selected[i].name,
          nameEn:this.selected[i].nameEn,
        })
      }
      this.$emit('change', backList)
    },
    close(){
      this.open = false
    },
    delSelected(row){
      // let index = _.findIndex(this.selected,(item)=>{
      //   return item.id===row.id
      // })
      // this.selected.splice(index,1)
      // this.selectedIds.splice(index,1)
      this.$refs['checkbox'+row.id].$el.querySelector('input').checked = false
      this.$refs['checkbox'+row.id].$el.querySelector('input').dispatchEvent(new Event('change'));
      // this.$refs['checkbox'+row.id].$el.querySelector('input').checked = false
    }
  }
};
</script>