<template>
  <div class="ZhiGan_HeadMoreButton">
    <n-button text :color="option.dataStyle.color" size="large" @click="clickBtn">
      <span :style="{ fontSize: option.dataStyle.fontSize + 'px' }">{{
        option.dataset.value
      }}</span>
      <Title v-if="option.dataStyle.iconFlag" class="title" :dataStyle="option.dataStyle" />
    </n-button>
  </div>
</template>

<script setup lang="ts">
  import { computed, PropType, toRefs, watch, reactive, ref } from 'vue';
  import { CreateComponentType } from '@/packages/index.d';
  import { icon } from '@/plugins';
  import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
  import { useChartDataFetch } from '@/hooks';
  import { eventHandlerHook } from '@/hooks/eventHandler.hook';
  import Title from './svg/title.vue';

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

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

  const option = reactive({
    dataset: props.chartConfig.option.dataset,
    dataStyle: props.chartConfig.option.dataStyle,
  });

  watch(
    () => option.dataStyle.iconWidth,
    () => {
      option.dataStyle.iconHeight = (option.dataStyle.iconWidth * 15) / 12;
    },
    {
      immediate: true,
      deep: true,
    },
  );

  // 单击交互
  const clickBtn = (val) => {
    eventHandlerHook(
      chartEditStore.getComponentList,
      props.chartConfig.events.interactConfigEvents,
      'click',
      val,
    );
  };
</script>

<style lang="scss" scoped>
  .ZhiGan_HeadMoreButton {
    display: flex;
    justify-content: center;
    text-align: center;
    width: v-bind('`${w}px`');
    height: v-bind('`${h}px`');
  }

  .title {
    margin-left: v-bind('`${option.dataStyle.iconMarginLeft}px`');
  }
</style>
