<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.employee.length <= 2">
        <span v-for="(item, index) in selected_data.employee" :key="index">
          <em v-show="index > 0">，</em>
          <Wxopendata type="userName" :openid="item.name"></Wxopendata>
        </span>
      </div>

      <div style="display: inline;" class="employee_cell_value" v-if="selected_data.employee.length > 2">
        <span v-for="(item, index) in selected_data.employee" v-if="index < 2" :key="index">
          <em v-show="index > 0">，</em>
          <Wxopendata type="userName" :openid="item.name"></Wxopendata>
        </span>
        等{{ selected_data.employee.length }}人
      </div>
    </template>
   <EmployeeSelector
      :title="bar_title"
      :show_manager_only="show_manager_only"
      :use_employee_list="use_employee_list"
      :include_self="include_self"
      :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"
      :selected_all="selected_all"
      :append_body="true"
      :selectedQuitEmployee="selectedQuitEmployee"
      :is_filtration_creator="is_filtration_creator"
    >
      <template slot="footer">
        <slot name="footer"></slot>
      </template>
    </EmployeeSelector>
  </van-cell>
</template>

<script>
import EmployeeSelector from '@/components/common/EmployeeSelector'
export default {
  name: 'EmployeeSelectorCell',
  components: {
    EmployeeSelector
  },
  model: {
    prop: 'selected',
    event: 'value'
  },
  props: {
    bar_title: { // bar_title
      type: String,
      default: ''
    },
    show_manager_only: { // 是否只显示管理者列表
      type: Boolean,
      default: false
    },
    position: {
      type: String,
      default: 'bottom'
    },
    employee_not_select: {
      type: Array,
      default: () => {
        return []
      }
    },
    multi: {
      type: Boolean,
      default: true
    },
    selected: {
      type: Array,
      default: () => {
        return []
      }
    },
    employee_list: { // employee_list
      type: Array,
      default: () => {
        return null
      }
    },
    use_employee_list: { // 为true时，employee_list才生效
      type: Boolean,
      default: false
    },
    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
    },
    include_self: { // 是否显示当前登录的员工信息
      type: Boolean,
      default: true
    },
    selected_all: {
      type: Boolean,
      default: false
    },
    selectedQuitEmployee: {
      type: Boolean,
      default: true
    },
    is_filtration_creator: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    selected (val) {
      let selected_data = { employee: [], dept: [] }
      selected_data.employee = val
      this.selected_data = selected_data
      if (this.selected_data.employee.length > 2) {
        this.$emit('captain', this.selected_data)
      }
    }
  },
  data () {
    return {
      show_dept_selector: false,
      selected_data: { dept: [], employee: [] }
    }
  },
  methods: {
    confirm (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/ .employee_selector_popup .van-search .van-cell__value {
  -webkit-box-flex: unset;
  -webkit-flex: none;
  flex: none;
  width: calc(100% - 0.5rem) !important;
}
</style>
