<template>
  <div class="es-enterprise">
    <es-button size="medium" @click="visible = true">
      <slot>{{ text }}{{ countText }}</slot>
    </es-button>
    <es-dialog
      :visible.sync="visible"
      :title="text"
      :width="width"
      :height="height"
    >
      <es-sizer
        v-bind="$attrs"
        @change="handleChange"
        @confirm="handleConfirm"
        @cancel="handleCancel"
      ></es-sizer>
    </es-dialog>
  </div>
</template>
<script>
export default {
  name: 'EsEnterprise',
  inheritAttrs: false,
  props: {
    value: null,
    text: {
      type: String,
      default: '选择单位范围'
    },
    width: {
      type: [String, Number],
      default: '500px'
    },
    height: {
      type: [String, Number],
      default: '600px'
    }
  },
  computed: {
    countText() {
      return this.count ? `(已选单位${this.count}家)` : '';
    }
  },
  data() {
    return {
      count: 0,
      visible: false
    };
  },
  methods: {
    handleChange(res) {
      this.$emit('input', res);
      this.$emit('change', res);
    },
    handleConfirm(res) {
      let { count } = res;
      this.count = count;
      this.$emit('confirm', res);
    },
    handleCancel() {
      this.$emit('cancel');
    }
  }
};
</script>
