<template>
  <div class="WuRenJiFeiXingShuJu">
    <div class="list">
      <div v-for="item in option.dataset" :key="item.key">
        <div class="item">
          <Top class="top" :item="item" :dataStyle="option.dataStyle" />
          <Bottom class="bottom" :item="item" :dataStyle="option.dataStyle" />
        </div>
      </div>
    </div>
  </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 Top from './svg/top.vue';
  import Bottom from './svg/bottom.vue';

  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.topWidth,
  //   () => {
  //     option.dataStyle.topHeight = option.dataStyle.topWidth;
  //     option.dataStyle.bottomWidth = option.dataStyle.topWidth;
  //     option.dataStyle.bottomHeight = 97 * (option.dataStyle.bottomWidth / 71);
  //   },
  //   {
  //     immediate: true,
  //     deep: true,
  //   },
  // );

  watch(
    () => w.value,
    () => {
      option.dataStyle.topWidth =
        (w.value - option.dataStyle.marginleft * 2 - option.dataStyle.gap * 3) / 4;
      option.dataStyle.topHeight = option.dataStyle.topWidth;
      option.dataStyle.bottomWidth = option.dataStyle.topWidth;
      option.dataStyle.bottomHeight = 97 * (option.dataStyle.bottomWidth / 71);
    },
    {
      immediate: true,
      deep: true,
    },
  );
</script>

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

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

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

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

  .item {
    display: inline-block;
  }

  .top {
    margin-top: v-bind('`${option.dataStyle.topMarginTop}px`');
    width: v-bind('`${option.dataStyle.topWidth}px`');
    height: v-bind('`${option.dataStyle.topHeight}px`');
  }
  .bottom {
    margin-top: v-bind('`${option.dataStyle.bottomMarginTop}px`');
    width: v-bind('`${option.dataStyle.bottomWidth}px`');
    height: v-bind('`${option.dataStyle.bottomHeight}px`');
  }
</style>
