<template>
  <n-select
    clearable
    :multiple="multiple"
    v-model:value="option.value.selectValue"
    :options="option.value.dataset"
    :style="`width:${w}px;`"
    @update:value="onChange"
  />
</template>

<script setup lang="ts">
import { PropType, toRefs, shallowReactive, watch } from 'vue'
import { CreateComponentType } from '@/packages/index.d'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useChartInteract } from '@/hooks/external/useChartSelectInteract.hook'
import { InteractEventOn } from '@/enums/eventEnum'
import { ComponentInteractParamsEnum } from './interact'
import { useChartDataFetch } from '@/hooks'

const props = defineProps({
  chartConfig: {
    type: Object as PropType<CreateComponentType>,
    required: true
  }
})

const { w, h } = toRefs(props.chartConfig.attr)

const { multiple } = toRefs(props.chartConfig.option)

const option = shallowReactive({
  value: {
    selectValue: props.chartConfig.option.selectValue,
    dataset: props.chartConfig.option.dataset
  }
})

// 监听事件改变
const onChange = (v: string[] | string) => {
  // 存储到联动数据
  useChartInteract(
    props.chartConfig,
    useChartEditStore,
    { [ComponentInteractParamsEnum.DATA]: v },
    InteractEventOn.CHANGE
  )
}

// 手动更新
watch(
  () => props.chartConfig.option,
  (newData: any) => {
    option.value = newData
    onChange(newData.selectValue)
  },
  {
    immediate: true,
    deep: true
  }
)

// 数据更新 (默认更新 dataset，若更新之后有其它操作，可添加回调函数) 解决给另一个下拉框赋值
useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any) => {
  option.value.dataset = resData
})
</script>

<style lang="scss" scoped>
@include deep() {
  .n-base-selection-label {
    height: v-bind('h + "px"');
    display: flex;
    align-items: center;
  }
}
</style>