<template>
  <div class="HuoQingDetailTiltButton">
    <div
      class="radioButton"
      v-for="(item, index) in option.dataset"
      :key="item.key"
      @click="clickBtn(item, index)"
    >
      <Button :item="item" :index="index" :clickIndex="clickIndex" :dataStyle="option.dataStyle" />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { PropType, toRefs, ref, reactive, watch } from 'vue';
  import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
  import { useChartDataFetch } from '@/hooks';
  import { eventHandlerHook } from '@/hooks/eventHandler.hook';
  import { CreateComponentType } from '@/packages/index.d';
  import Button from './svg/button.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.buttonWidth,
    () => {
      option.dataStyle.buttonHeight = (option.dataStyle.buttonWidth * 23) / 81;
    },
    {
      immediate: true,
      deep: true,
    },
  );

  const clickIndex = ref(-1);

  const clickBtn = (val, index) => {
    if (clickIndex.value != index) {
      clickIndex.value = index;
    } else {
      clickIndex.value = -1;
    }
    eventHandlerHook(
      chartEditStore.getComponentList,
      props.chartConfig.events.interactConfigEvents,
      'click',
      val,
    );
  };

  // 数据callback处理（预览时触发）
  useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
    option.dataset = resData;
  });
</script>

<style lang="scss" scoped>
  .HuoQingDetailTiltButton {
    background: v-bind('`${option.dataStyle.backgroud}`');
    width: v-bind('`${w}px`');
    height: v-bind('`${h}px`');
    padding-left: v-bind('`${option.dataStyle.marginLeft}px`');
    padding-right: v-bind('`${option.dataStyle.marginLeft}px`');

    // 页面不能被选中
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
    user-select: none;
  }

  .radioButton {
    display: inline-block;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    margin-top: v-bind('`${option.dataStyle.marginTop}px`');
    margin-left: v-bind('`${option.dataStyle.buttonGap}px`');
  }
</style>
