<template>
  <div class="ZhiGan_SheXiangTouLeiXing">
    <div class="list">
      <div v-for="(item, index) in option.dataset" :key="item.title" @click="clickBtn(item)">
        <div class="item">
          <Tupian1 v-if="checkType(item, index) == 0" :item="item" :dataStyle="option.dataStyle" />
          <Tupian2 v-if="checkType(item, index) == 1" :item="item" :dataStyle="option.dataStyle" />
          <Tupian3 v-if="checkType(item, index) == 2" :item="item" :dataStyle="option.dataStyle" />
          <Tupian4 v-if="checkType(item, index) == 3" :item="item" :dataStyle="option.dataStyle" />
          <Tupian5 v-if="checkType(item, index) == 4" :item="item" :dataStyle="option.dataStyle" />
          <Tupian6 v-if="checkType(item, index) == 5" :item="item" :dataStyle="option.dataStyle" />
          <Tupian7 v-if="checkType(item, index) == 6" :item="item" :dataStyle="option.dataStyle" />
          <Tupian8 v-if="checkType(item, index) == 7" :item="item" :dataStyle="option.dataStyle" />
          <Tupian9 v-if="checkType(item, index) == 8" :item="item" :dataStyle="option.dataStyle" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { 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 Tupian1 from './svg/tupian1.vue';
  import Tupian2 from './svg/tupian2.vue';
  import Tupian3 from './svg/tupian3.vue';
  import Tupian4 from './svg/tupian4.vue';
  import Tupian5 from './svg/tupian5.vue';
  import Tupian6 from './svg/tupian6.vue';
  import Tupian7 from './svg/tupian7.vue';
  import Tupian8 from './svg/tupian8.vue';
  import Tupian9 from './svg/tupian9.vue';
  import dayjs from 'dayjs';

  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,
    status: props.chartConfig.status,
  });

  watch(
    () => option.dataStyle.width,
    () => {
      option.dataStyle.height = (option.dataStyle.width / 113) * 112;
    },
    {
      immediate: true,
      deep: true,
    },
  );

  // 确定类型
  function checkType(item, index) {
    if (item.title.includes('瞭望')) {
      return 0;
    } else if (item.title.includes('铁塔')) {
      return 1;
    } else if (item.title.includes('生态林')) {
      return 3;
    } else if (item.title.includes('视频监控')) {
      return 2;
    } else if (item.title.includes('林区')) {
      return 4;
    } else if (item.title.includes('无人机')) {
      return 5;
    } else if (item.title.includes('应急')) {
      return 6;
    } else if (item.title.includes('卡口')) {
      return 7;
    } else if (item.title.includes('基站')) {
      return 8;
    } else {
      return index % 9;
    }
  }

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

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

<style lang="scss" scoped>
  .ZhiGan_SheXiangTouLeiXing {
    overflow-y: auto;
    background: v-bind('`${option.dataStyle.backgroud}`');
    width: v-bind('`${w}px`');
    height: v-bind('`${h}px`');

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

  .ZhiGan_SheXiangTouLeiXing::-webkit-scrollbar {
    display: none;
  }

  .ZhiGan_SheXiangTouLeiXing {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .list {
    display: flex;
    flex-wrap: wrap;
    gap: v-bind('`${option.dataStyle.gap}px`');
    margin-top: v-bind('`${option.dataStyle.margintop}px`');
    margin-left: v-bind('`${option.dataStyle.marginleft}px`');
    margin-right: v-bind('`${option.dataStyle.marginleft}px`');
  }

  .item {
    display: inline-block;
  }
</style>
