<template>
  <div style="margin-top: 10px">
    <a-tag
      v-for="(org, index) in value"
      :key="org.id || index"
      :color="getTagColor(org.type)"
      closable
      @close="removeOrgItem(index)"
      style="margin: 5px"
    >
      {{ org.name }}
    </a-tag>
  </div>
</template>

<script>
export default {
  name: 'OrgItemsView',
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    removeOrgItem(index) {
      // 克隆数组，避免直接修改 props
      const newList = this.value.slice();
      newList.splice(index, 1);
      this.$emit('input', newList); // 发回上层
    },
    getTagColor(type) {
      switch (type) {
        case 'dept':
          return 'default';
        case 'user':
          return 'blue';
        case 'role':
          return 'green';
        default:
          return 'blue';
      }
    }
  }
};
</script>
