<template>
  <van-cell
    class="employee_cell"
    :title="title"
    :value="value"
    :label="label"
    :icon="icon"
    :url="url"
    :border="border"
    :required="required"
    @click="show_dept_selector=true"
    is-link
  >
    <template slot="default">
      <div style="display: inline;" class="employee_cell_value" v-if="selected_data.dept.length <= 2">
        <span v-for="(item, index) in selected_data.dept" :key="index"><em v-show="index > 0">，</em><Wxopendata type="departmentName" :openid="item.dept_name"></Wxopendata></span>
      </div>

      <div style="display: inline;" class="employee_cell_value" v-if="selected_data.dept.length > 2">
        <span v-for="(item, index) in selected_data.dept" v-if="index < 2" :key="index"><em v-show="index > 0">，</em><Wxopendata type="departmentName" :openid="item.dept_name"></Wxopendata></span>
        等{{selected_data.dept.length}}个
      </div>
    </template>
    <EmployeeSelector :multi="false" :max="max" :close_clear_data="false" ref="selector" :can_select_employee="false" :can_select_dept="true" :dept_multi.sync="multi" @confirm="confirm"
                      :visible.sync="show_dept_selector" :selected.sync="selected_data" :append_body="true"></EmployeeSelector>
  </van-cell>
</template>

<script>
  import EmployeeSelector from '@/components/common/EmployeeSelector'
  export default {
    name: "EmployeeSelectorCell",
    components: {
      EmployeeSelector
    },
    model: {
      prop: 'selected',
      event: 'value'
    },
    props: {
      multi: {
        type: Boolean,
        default: true
      },
      selected: {
        type: Array,
        default: () => {
          return []
        }
      },
      title: {
        type: String,
        default: ''
      },
      value: {
        type: String,
        default: ''
      },
      label: {
        type: String,
        default: ''
      },
      icon: {
        type: String,
        default: ''
      },
      url: {
        type: String,
        default: ''
      },
      border: {
        type: Boolean,
        default: true
      },
      required: {
        type: Boolean,
        default: false
      },
      max: {
        type: Number,
        default: 0
      }
    },
    watch: {
      selected(val){
        let selected_data = {employee: [], dept: []}
        selected_data.dept = val
        this.selected_data = selected_data
      },
      selected_data(val){

      }
    },
    data(){
      return {
        show_dept_selector: false,
        selected_data: {dept: [], employee: []}
      }
    },
    methods: {
      confirm(data){
        this.$emit('value', data.dept)
      }
    },
    created(){
      this.$nextTick(() => {
        let selected_data = {dept: [], employee: []}
        selected_data.dept =  this.selected
        this.selected_data = selected_data
        document.body.appendChild(this.$refs['selector'].$el)
      })
    }
  }
</script>

<style scoped>
  /deep/ .van-cell__value{
    -webkit-box-flex: unset;
    -webkit-flex: none;
    flex: none;
    width:4rem !important;
  }
</style>
