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

      <div style="display: inline;" class="employee_cell_value" v-if="selected_data.cate.length > 2">
        <span v-for="(item, index) in selected_data.cate" v-if="index < 2" :key="index"><em v-show="index > 0">，</em>{{item.name}}</span>
        等{{selected_data.cate.length}}个
      </div>
    </template>
    <RuleCategorySelector @get_items="get_items" :append_body="true" :cate_multi.sync="multi" :max="max" :close_clear_data="false" ref="selector" :can_select_rule="false" :can_select_category="true" :category_multi="false" @confirm="confirm"
                      :visible.sync="show_dept_selector" :selected.sync="selected_data" :cycle_type="cycle_type"></RuleCategorySelector>
  </van-cell>

</template>

<script>
  import RuleCategorySelector from '@/components/common/RuleCategorySelector'
  export default {
    name: "SelectorCell",
    components: {
      RuleCategorySelector
    },
    model: {
      prop: 'selected',
      event: 'value'
    },
    props: {
      multi: {
        type: Boolean,
        default: true
      },
      cycle_type:{
        type: Number,
        default: 1
      },
      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 = {rule: [], cate: []}
        selected_data.cate = val
        this.selected_data = selected_data
      },
      selected_data(val){
        //console.log(val)
      }
    },
    data(){
      return {
        show_dept_selector: false,
        items: [],
        selected_data: {cate: [], rule: []}
      }
    },
    methods: {
      get_items(data){
        this.$emit('get_items', data)
      },
      confirm(data){
        this.$emit('value', data.cate)
      }
    },
    created(){
      this.$nextTick(() => {
        let selected_data = {rule: [], cate: []}
        selected_data.cate =  this.selected
        this.selected_data = selected_data
      })
    }
  }
</script>

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