<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.rule">
        选择了{{selected_data.rule.length}}条规则
      </div>
    </template>

    <RuleCategorySelector :multi.sync="multi" :max="max" :close_clear_data="false" ref="selector" :can_select_rule="true" :can_select_category="false" :category_multi="false" @confirm="confirm"
                      :visible.sync="show_dept_selector" :selected.sync="selected_data" :append_body="true"><template slot="append">
      <slot name="append"></slot>
    </template></RuleCategorySelector>
  </van-cell>
</template>

<script>
  import RuleCategorySelector from '@/components/common/RuleCategorySelector'
  export default {
    name: "RuleCategorySelectorCell",
    components: {
      RuleCategorySelector
    },
    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 = {cate: [], rule: []}
        selected_data.rule = val
        this.selected_data = selected_data
      },
      selected_data(val){
      }
    },
    data(){
      return {
        show_dept_selector: false,
        selected_data: {cate: [], rule: []}
      }
    },
    methods: {
      confirm(data){
        this.$emit('value', data.rule)
      }
    },
    created(){
      this.$nextTick(() => {
        let selected_data = {rule: [], cate: []}
        selected_data.rule =  this.selected
        this.selected_data = selected_data
        document.body.appendChild(this.$refs['selector'].$el)
      })
    }
  }
</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>
