<template>
  <el-card shadow="hover">
    <el-tag type="info" v-for="(item, index) in selected_data.employee" :key="index">{{item.name}}</el-tag>
    <el-tag class="tag-point" @click="show_dept_selector = true">{{title}}</el-tag>
    <EmployeeSelector :employee_not_select.sync="employee_not_select" :employee_list="employee_list" :multi.sync="multi" :max="max" :close_clear_data="false" ref="selector" :can_select_employee="true" :can_select_dept="false" :dept_multi="false" @confirm="confirm"
                      :visible.sync="show_dept_selector" :selected.sync="selected_data" :append_body="true"></EmployeeSelector>
  </el-card>
</template>

<script>
  import EmployeeSelector from '@/views/common/EmployeeSelector'
  export default {
    name: "EmployeeSelectorCard",
    components: {
      EmployeeSelector
    },
    model: {
      prop: 'selected',
      event: 'value'
    },
    props: {
      employee_not_select: {
        type: Array,
        default: () => {return []}
      },
      multi: {
        type: Boolean,
        default: true
      },
      selected: {
        type: Array,
        default: () => {
          return []
        }
      },
      title: {
        type: String,
        default: ''
      },
      employee_list: {
        type: Array,
        default: () => {
          return []
        }
      },
      max: {
        type: Number,
        default: 0
      }
    },
    watch: {
      selected(val){
        let selected_data = {employee: [], dept: []}
        selected_data.employee = val
        this.selected_data = selected_data
      }
    },
    data(){
      return {
        show_dept_selector: false,
        selected_data: {dept: [], employee: []}
      }
    },
    methods: {
      confirm(data){
        let selected_data = {employee: [], dept: []}
        selected_data.employee = data.employee
        this.selected_data = selected_data
        this.$emit('value', data.employee)
      }
    },
    created(){
      this.$nextTick(() => {
        let selected_data = {dept: [], employee: []}
        selected_data.employee =  this.selected
        this.selected_data = selected_data
        try{
          document.body.appendChild(this.$refs['selector'].$el)
        }catch (e) {

        }
      })
    }
  }
</script>

<style scoped>
  /deep/ .tag-point{cursor: pointer;}
  /deep/ .el-tag{margin:5px;}
</style>
