<template>
  <n-button
    :style="{ width: `${w}px`, height: `${h}px` }"
    :type="buttonType"
    :dashed="buttonDashed"
    :ghost="buttonGhost"
    :color="buttonColor"
    @click="onClick(useChartEditStore().getPageConfig)"
  >
    <span :style="`font-weight:${buttonTextBold}`" class="button-text-color">{{ dataset }}</span>
  </n-button>
</template>

<script setup lang="ts">
import { PropType, toRefs, shallowReactive, watch, onMounted, ref } from 'vue'
import cloneDeep from 'lodash/cloneDeep'
import { CreateComponentType } from '@/packages/index.d'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useChartInteract } from '@/hooks/external/useButtonPageChangeInteract.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 { buttonType, buttonDashed, buttonGhost, buttonColor, buttonTextColor, buttonTextSize, dataset, buttonTextBold } = toRefs(
  props.chartConfig.option
)

const option = shallowReactive({
  value: cloneDeep(props.chartConfig.option)
})

const interactPageId = ref('')

const onClick = (v: any) => {
  // useChartInteract(
  //   props.chartConfig,
  //   useChartEditStore,
  //   { [ComponentInteractParamsEnum.DATA]: v },
  //   InteractEventOn.CHANGE,
  //   status
  // )
  interactPageId.value = v
  useChartInteract(
    props.chartConfig,
    useChartEditStore,
    { [ComponentInteractParamsEnum.DATA]: v },
    InteractEventOn.PAGE_CHANGE,
  )
}

onMounted(() => {
  // onClick(option.value.selectTargetItems)
  // onClick(useChartEditStore().getPageConfig)
})

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

watch(()=>interactPageId.value,(newValue:Recordable)=>{
  useChartInteract(
    props.chartConfig,
    useChartEditStore,
    { [ComponentInteractParamsEnum.DATA]: newValue },
    InteractEventOn.PAGE_CHANGE,
  )
},
{
  deep:true
})
</script>

<style lang="scss" scoped>
.button-text-color {
  color: v-bind('buttonTextColor');
  font-size: v-bind('`${buttonTextSize}px`');
}
</style>