<template>
  <van-button
    @click="show_dept_selector=true"
  >
    <template v-if="selected_data.dept.length > 0">
<!-- {{selected_data.dept[0].dept_name}} -->
    <!-- <span style="width:2rem;height:30px;overflow:hidden;display:inline-block;"></span> -->
      <Wxopendata type="departmentName" :openid="selected_data.dept[0].dept_name"></Wxopendata><van-icon name="arrow-down" />
    </template>
    <template v-if="selected_data.dept.length == 0">
{{title}} <van-icon name="arrow-down" />
    </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-button>
</template>

<script>
  import EmployeeSelector from '@/components/common/EmployeeSelector'
  export default {
    name: "EmployeeSelectorBtn",
    components: {
      EmployeeSelector
    },
    model: {
      prop: 'selected',
      event: 'value'
    },
    props: {
      multi: {
        type: Boolean,
        default: true
      },
      selected: {
        type: Array,
        default: () => {
          return []
        }
      },
      title: {
        type: String,
        default: ''
      },
      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>
