<template>
  <div class="HuoQingDetailInfo">
    <div class="list">
      <div v-for="item in option.dataset" :key="item.key">
        <div class="item">
          <Dot :dotSize="option.dataStyle.dotSize" :dotColor="option.dataStyle.dotColor" />
          <div class="title">
            <span :class="checkLength(item.title) ? 'dot1' : 'dot2'">{{ item.title }}</span>
          </div>
          <div class="content"> {{ item.content }} </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { computed, PropType, toRefs, watch, reactive, ref, onMounted } from 'vue';
  import { CreateComponentType } from '@/packages/index.d';
  import { icon } from '@/plugins';
  import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
  import { useChartDataFetch } from '@/hooks';
  import { EventBus } from '@/utils/eventBus';
  import { replaceSqlParams } from '@/utils/sqlHandler';
  import Dot from './svg/dot.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(
    () => (
      w.value,
      option.dataStyle.marginLeft,
      option.dataStyle.dotSize,
      option.dataStyle.dotMarginLeft,
      option.dataStyle.titleWidth,
      option.dataStyle.dotMarginRight
    ),
    () => {
      option.dataStyle.contentWidth =
        w.value -
        option.dataStyle.marginLeft -
        option.dataStyle.dotSize -
        option.dataStyle.dotMarginLeft -
        option.dataStyle.titleWidth -
        option.dataStyle.dotMarginRight;
    },
    {
      immediate: true,
      deep: true,
    },
  );

  // 超过宽度的文字切换class
  function checkLength(title) {
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    context.font = `${option.dataStyle.titleFontsize}px ${'Arial'}`;

    const metrics = context.measureText(title);
    if (metrics.width <= option.dataStyle.titleWidth) {
      return true;
    } else {
      return false;
    }
  }

  onMounted(() => {
    // 组件通信
    const sql = props.chartConfig.request?.requestSQLContent?.sql;
    EventBus.on(props.chartConfig.id + 'dataupdate', (data) => {
      props.chartConfig.request.requestSQLContent.sql = replaceSqlParams(sql, { Id: data.id });
      // 数据callback处理（预览时触发）
      useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
        option.dataset = resData;
      });
    });
  });

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

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

  .list {
    display: inline-block;
    flex-wrap: wrap;
    width: 100%;
    margin-top: v-bind('`${option.dataStyle.marginTop}px`');
    margin-left: v-bind('`${option.dataStyle.marginLeft}px`');
  }
  .item {
    display: inline-flex;
    align-items: flex-start;
    margin-top: v-bind('`${option.dataStyle.listMarginTop}px`');
  }

  .title {
    display: inline-block;
    text-align: justify;
    justify-content: space-between;
    align-items: flex-start;
    min-width: v-bind('`${option.dataStyle.titleWidth}px`');
    height: v-bind('`${option.dataStyle.titleHeight}px`');
    // height: 100%;
    color: v-bind('`${option.dataStyle.titleFontcolor}`');
    font-size: v-bind('`${option.dataStyle.titleFontsize}px`');
    margin-left: v-bind('`${option.dataStyle.dotMarginLeft}px`');
    margin-right: v-bind('`${option.dataStyle.dotMarginRight}px`');
  }
  .dot1 {
    display: inline-block;
    width: 100%;
  }
  .dot1::after {
    content: '';
    display: inline-block;
    width: 100%;
  }
  .dot2 {
    white-space: nowrap;
  }

  .content {
    width: v-bind('`${option.dataStyle.contentWidth}px`');
    height: 100%;
    color: v-bind('`${option.dataStyle.contentFontcolor}`');
    font-size: v-bind('`${option.dataStyle.contentFontsize}px`');
    text-align: v-bind('`${option.dataStyle.contentAlign}`');
  }
</style>
