<template>
  <a-select
    v-model:value="currentValue"
    :size="size"
    style="width: 40%"
    :placeholder="props.placeholder"
    @change="onChange"
    :disabled="props.disabled"
  >
    <a-select-opt-group :label="conItem.categoryName" v-for="(conItem, conIndex) in props.conditionSelectList" :key="conIndex">
      <a-select-option :value="column.variableCode" v-for="column in conItem.variableInfoList" :key="column.variableCode">
        {{ column.variableName }}
      </a-select-option>
    </a-select-opt-group>
  </a-select>
</template>
<script setup>
import { ref, watch, onMounted } from 'vue';
// 接收属性
const props = defineProps({
  modelValue: {
    type: [Number, String],
    required: false
  },
  size: {
    type: String,
    default: 'large'
  },
  placeholder: {
    type: String,
    required: false,
    default: '字段'
  },
  // 是否禁用
  disabled: {
    type: Boolean,
    default: false
  },
  // 条件列表
  conditionSelectList: Array
});

// 值
const currentValue = ref(undefined);

/**
 * 监听值变化
 */
watch(
  () => props.modelValue,
  newVal => {
    initData(newVal);
  }
);

/**
 * 挂载后
 */
onMounted(() => {
  initData(props.modelValue);
});

watch(
  () => props.conditionSelectList,
  val => {
    initData(props.modelValue);
  },
  { deep: true }
);

/**
 * 初始数据
 * @param {*} value
 */
const initData = value => {
  if (value) {
    currentValue.value = value.toString();
  } else {
    currentValue.value = null;
  }
};

const emit = defineEmits(['update:modelValue', 'change']);
/**
 * 值发生改变
 * @param {*} value
 */
const onChange = value => {
  if (value) {
    emit('update:modelValue', value);
    emit('change', value);
  }
};
</script>
