<template>
  <div style="max-width: 350px">
    <div v-if="mode === 'DESIGN'">
      <a-button type="primary" size="small" disabled>
        选择部门
      </a-button>
      <span class="placeholder">{{ placeholder }}</span>
    </div>
    <div v-else>
      <a-button
        type="primary"
        size="small"
        @click="handleSelectClick"
      >
        选择部门
      </a-button>

      <OrgPicker
        ref="orgPickerRef"
        :title="pickerTitle"
        :multiple="multiple"
        :type="orgPickerType"
        :selected="orgPickerSelected"
        @confirm="onSelected"
      />

      <span class="placeholder">{{ placeholder }}</span>

      <div style="margin-top: 5px">
        <a-tag
          v-for="(dept, i) in internalValue"
          :key="i"
          closable
          @close="delDept(i)"
          style="margin: 5px"
        >
          {{ dept.name }}
        </a-tag>
      </div>
    </div>
  </div>
</template>

<script>
import OrgPicker from '@comp/OrgPicker/OrgPicker.vue'

export default {
  name: 'DeptPicker',
  model: {
    prop: 'value',
    event: 'update:value'
  },
  components: {
    OrgPicker,
  },
  props: {
    mode: {
      type: String,
      default: 'DESIGN'
    },
    multiple: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: '请选择部门'
    },
    readerMode: {
      type: Boolean,
      default: false
    },
    value: {
      type: Array,
      default() {
        return [];
      }
    },
    showOrgSelect: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      orgPickerType: 'dept',
      orgPickerSelected: [],
    };
  },
  computed: {
    internalValue: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('update:value', val);
      }
    },
    pickerTitle() {
      switch (this.orgPickerType) {
        case 'user':
          return '请选择人员';
        case 'dept':
          return '请选择选择部门';
        default:
          return '-';
      }
    }
  },
  methods: {
    handleSelectClick() {
      this.$refs.orgPickerRef && this.$refs.orgPickerRef.show();
    },
    delDept(index) {
      const copy = [...this.internalValue];
      copy.splice(index, 1);
      this.internalValue = copy;
    },
    onSelected(values) {
      this.internalValue = values;
    }
  }
};
</script>

<style scoped>
.placeholder {
  margin-left: 10px;
  color: #adabab;
  font-size: 12px;
}
.a-button {
  padding: 0 20px;
  font-size: 12px;
  color: #ffffff;
}
</style>
