<template>
  <div class="HuoQingDetailRadio">
    <div
      class="radioButton"
      v-for="(item, index) in option.dataset"
      :key="item.key"
      @click="clickBtn(item, index)"
    >
      <div :class="index == navsIndex ? 'titleChoose' : 'title'">{{ item.label }}</div>
      <span class="navsNum" v-if="item.value != 0">
        {{ Number(item.value) > 99 ? '99+' : Number(item.value) }}
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { PropType, toRefs, ref, reactive } 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';

  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,
  });

  const navsIndex = ref(0);

  const clickBtn = (val, index) => {
    showAlllModal(val);
    navsIndex.value = index;
    eventHandlerHook(
      chartEditStore.getComponentList,
      props.chartConfig.events.interactConfigEvents,
      'click',
      val,
    );
  };

  function showAlllModal(val) {
    // 点击的按钮序号
    const index = option.dataset.findIndex((item) => item.label === val.label);
    chartEditStore.getComponentList.forEach((element) => {
      // 火情弹窗所在的分组
      if (element.isGroup && element?.groupList?.some((li) => li.key == 'HuoQingDetailModal')) {
        element.groupList?.forEach((item) => {
          if (
            option.dataStyle.list[index].includes('HuoQingDetailModal') &&
            item.key == 'HuoQingDetailModal'
          ) {
            // 火情弹窗只展示左侧
            item.option.dataStyle.onlyShowLeftFrame = false;
          } else {
            // 火情弹窗全展示
            item.option.dataStyle.onlyShowLeftFrame = true;
          }
          if (option.dataStyle.list[index].includes(item.key)) {
            // 选中的显示
            item.status.hide = false;
          }
          if (
            option.dataStyle.list
              .slice(0, index)
              .flat()
              .concat(option.dataStyle.list.slice(index + 1).flat())
              .filter((item) => item !== 'HuoQingDetailModal')
              .includes(item.key) &&
            !option.dataStyle.list[index].includes(item.key)
          ) {
            // 其他未选中的隐藏
            item.status.hide = true;
          }
        });
      } else if (
        option.dataStyle.list[index].includes('HuoQingDetailModal') &&
        element.key == 'HuoQingDetailModal'
      ) {
        // 未分组
        // 火情弹窗只展示左侧
        element.option.dataStyle.onlyShowLeftFrame = false;
        // } else {
        //   // 火情弹窗全展示
        //   element.option.dataStyle.onlyShowLeftFrame = true;
      }
      if (option.dataStyle.list[index].includes(element.key)) {
        // 选中的显示
        element.status.hide = false;
      }
      if (
        option.dataStyle.list
          .slice(0, index)
          .flat()
          .concat(option.dataStyle.list.slice(index + 1).flat())
          .filter((item) => item !== 'HuoQingDetailModal')
          .includes(element.key) &&
        !option.dataStyle.list[index].includes(element.key)
      ) {
        // 其他未选中的隐藏
        element.status.hide = true;
      }
    });
  }

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

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

    // 页面不能被选中
    -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;
    border: v-bind('`${option.dataStyle.borderWidth}px`') solid
      v-bind('`${option.dataStyle.borderColor}`');
    height: v-bind('`${h - 30}px`');
    width: v-bind('`${(w - 40) / option.dataset.length}px`');
    cursor: pointer;
    position: relative;

    .title {
      display: flex;
      align-items: center;
      justify-content: center;

      background: v-bind('`${option.dataStyle.titleBackgroud}`');
      color: v-bind('`${option.dataStyle.titleColor}`');
      font-size: v-bind('`${option.dataStyle.titleFontSize}px`');
      width: 100%;
      height: 100%;
    }

    .titleChoose {
      display: flex;
      align-items: center;
      justify-content: center;

      background: v-bind('`${option.dataStyle.chooseBackgroud}`');
      color: v-bind('`${option.dataStyle.chooseColor}`');
      font-size: v-bind('`${option.dataStyle.chooseFontSize}px`');
      width: 100%;
      height: 100%;
    }

    .navsNum {
      background: v-bind('`${option.dataStyle.navsNumBackgroud}`');
      width: 20px;
      height: 20px;
      border-radius: 20px;
      text-align: center;
      line-height: 20px;
      color: v-bind('`${option.dataStyle.navsNumColor}`');
      font-size: v-bind('`${option.dataStyle.navsNumFontSize}px`');
      position: absolute;
      top: 0px;
      right: 0px;
      margin-top: -10px;
    }
  }
</style>
