<template>
  <div class="MeiRiShangBao">
    <div class="list">
      <div
        v-for="item in option.dataset"
        :key="item.key"
        @mouseenter="item.mouseFlag = false"
        @mouseleave="item.mouseFlag = true"
      >
        <Xinxi
          :style="{ marginBottom: `${option.dataStyle.marginbottom}px` }"
          :item="item"
          :dataStyle="option.dataStyle"
        />
      </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 Xinxi from './svg/xinxi.vue';
  import dayjs from 'dayjs';

  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.sortOrder,
    () => {
      if (option.dataStyle.sortOrder) {
        // 数量排序
        option.dataset = option.dataset.sort((a, b) => parseInt(b.num) - parseInt(a.num));
        option.dataset = option.dataset.map((item, index) => {
          const order = String(index + 1);
          const newKey = Number(order) >= 10 ? `${order}` : `0${order}`;
          return {
            ...item,
            mouseFlag: true,
            key: newKey,
          };
        });
      } else {
        // 时间排序
        option.dataset = option.dataset.sort((a, b) => {
          const timeA = dayjs(a.time, 'HH:mm:ss');
          const timeB = dayjs(b.time, 'HH:mm:ss');
          return timeB.diff(timeA);
        });
        option.dataset = option.dataset.map((item, index) => {
          const order = String(index + 1);
          const newKey = Number(order) >= 10 ? `${order}` : `0${order}`;
          return {
            ...item,
            mouseFlag: true,
            key: newKey,
          };
        });
      }
    },
    {
      immediate: true,
      deep: true,
    },
  );

  watch(
    () => w,
    () => {
      option.dataStyle.listWidth =
        w.value - option.dataStyle.marginleft - option.dataStyle.marginright;
    },
    {
      immediate: true,
      deep: true,
    },
  );
  watch(
    () => option.dataStyle.listWidth,
    () => {
      option.dataStyle.listHeight = 28 * (option.dataStyle.listWidth / 360);
    },
    {
      immediate: true,
      deep: true,
    },
  );
</script>

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

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

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

  .list {
    margin-top: 10px;
    margin-left: 20px;
    margin-right: 20px;
    display: flex;
    flex-direction: column;
  }
</style>
