<template>
  <n-select
    multiple
    v-model:value="option.value.selectValue"
    :options="option.value.dataset"
    :style="`width:${w}px;`"
    :to="false"
    @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'

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

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

const {
  textColor,
  textBackgroundColor,
  iconColor,
  textBackgroundColorAlpha,
  textSelectModalBackgroundColor,
  textSelectModalTextColor
} = toRefs(props.chartConfig.option.selectStyleOptions) as any

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

// 监听事件改变
const onChange = (v: 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
  }
)
</script>

<style lang="css"></style>

<style lang="scss" scoped>
@include deep() {
  .n-base-selection-label {
    height: v-bind('h + "px"');
    display: flex;
    align-items: center;
    background: v-bind('textBackgroundColor') !important;
    opacity: v-bind('textBackgroundColorAlpha') !important;
  }
  .n-base-selection-input__content {
    color: v-bind('textColor');
  }
  .n-base-icon {
    color: v-bind('iconColor') !important;
  }
  .n-select-menu {
    background: v-bind('textSelectModalBackgroundColor') !important;
  }
  .n-base-select-option__content {
    color: v-bind('textSelectModalTextColor') !important;
  }
}
</style>