<template>
  <template v-if="editable">
    <el-select-v2
      v-if="isDiscipline"
      v-model="localValue"
      :options="disciplineOptions"
      :size="size"
      :placeholder="$t('通用.请选择')"
      filterable
      v-bind="$attrs"
    />
    <el-input
      v-else
      v-model="localValue"
      :size="size"
      :placeholder="$t('通用.请输入')"
      v-bind="$attrs"
    />
  </template>
  <span v-else class="plain-label">{{ displayLabel }}</span>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { CommonStore } from '@/stores/common';
import { NODE_TYPE } from '@/utils/enum/node';

interface Props {
  modelValue?: string;
  nodeType?: string;
  editable?: boolean;
  size?: '' | 'large' | 'default' | 'small';
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: '',
  nodeType: '',
  editable: false,
  size: 'default',
});

const emits = defineEmits(['update:modelValue']);
const commonStore = CommonStore();

const localValue = computed({
  get: () => props.modelValue,
  set: (val) => emits('update:modelValue', val),
});

const isDiscipline = computed(() => props.nodeType === NODE_TYPE.DISCIPLINE);

const disciplineOptions = computed(() => {
  const res = commonStore.getDictData('DISCIPLINE_TYPE');
  return res?.A || [];
});

const displayLabel = computed(() => {
  if (isDiscipline.value) {
    const option = disciplineOptions.value.find((item: any) => item.value === props.modelValue);
    return option?.label || props.modelValue;
  }
  return props.modelValue;
});
</script>

<style lang="scss" scoped>
.plain-label {
  display: inline-block;
}
</style>
