<template>
  <el-select
    :clearable="clearable"
    :disabled="disabled"
    filterable
    :value="value"
    @change="changeHandle"
    :multiple="multiple"
  >
    <slot></slot>
    <el-option
      v-for="(item, index) in dashboardArea"
      :key="index"
      :value="item.id"
      :label="item.areaName"
    ></el-option>
  </el-select>
</template>

<script>
import areaMixin from './mixin.js';

export default {
  name: 'dashboard-area-select',
  props: {
    size: String,
    value: {
      required: true,
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    disabled: Boolean,
    clearable: {
      type: Boolean,
      default: true,
    },
  },
  mixins: [areaMixin],
  methods: {
    changeHandle(val) {
      if (val) {
        if (val && val.length && val.indexOf(-1) > -1) {
          if (val.length === this.dashboardArea.length + 1) {
            this.$emit('input', []);
            return;
          } else {
            this.$emit('input', this.dashboardArea.map(item => item.id));
            return;
          }
        }
        // if (this.multiple && val.length == 0) {
        //   this.$emit('input', this.dashboardArea.map(item => item.id));
        // } else {
        this.$emit('input', val);
        // }
      } else {
        this.$emit('input', null);
      }
    },
  },
};
</script>