<template>
  <div class="ZhiChu_TuLi">
    <div class="list">
      <div class="name">
        <span class="nameSpan">{{ option.dataStyle.name }}</span>
      </div>
      <div class="tupian">
        <!-- 线 -->
        <div class="divLine">
          <div class="line" v-for="item1 in option.dataset[0]" :key="item1.key">
            <div
              :style="{
                width: item1.lineWidth + 'px',
                height: item1.lineHeight + 'px',
                background: item1.color,
                border: item1.borderWidth + 'px solid ' + item1.borderColor,
              }"
            ></div>
            <span class="lineFontSpan">{{ item1.title }}</span>
          </div>
        </div>
        <!-- 图 -->
        <div class="divCircle">
          <div class="circle" v-for="item2 in option.dataset[1]" :key="item2.key">
            <div>
              <img
                :src="getAssetsImg(item2.url)"
                :width="item2.imageWidth"
                :height="item2.imageHeight"
              />
            </div>
            <span class="circleFontSpan">{{ item2.title }}</span>
          </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 { getAssetsImg } from '@/utils/index';

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

  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>
  .ZhiChu_TuLi {
    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;
  }

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

  .name {
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: v-bind('`${option.dataStyle.nameBorderWidth}px`') solid
      v-bind('`${option.dataStyle.nameBorderColor}`');
    width: 100%;
    height: v-bind('`${option.dataStyle.nameHeight}px`');

    .nameSpan {
      width: v-bind('`${option.dataStyle.nameSpanWidth}px`');
      height: v-bind('`${option.dataStyle.nameHeight}px`');
      font-family:
        PingFangSC,
        PingFang SC;
      font-weight: 500;
      font-size: v-bind('`${option.dataStyle.nameFontSize}px`');
      color: v-bind('`${option.dataStyle.nameFontColor1}`');
      line-height: v-bind('`${option.dataStyle.nameHeight}px`');
      letter-spacing: 1px;
      text-align: justify;
      font-style: normal;
      background: linear-gradient(
        90deg,
        v-bind('`${option.dataStyle.nameFontColor1}`') 0%,
        v-bind('`${option.dataStyle.nameFontColor2}`') 100%
      );
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      margin-bottom: v-bind('`${option.dataStyle.nameFontBorderDistance}px`');
    }
    .nameSpan {
      display: inline-block;
      width: v-bind('`${option.dataStyle.nameSpanWidth}px`');
    }
    .nameSpan::after {
      content: '';
      display: inline-block;
      width: v-bind('`${option.dataStyle.nameSpanWidth}px`');
    }
  }
  .tupian {
    display: flex;
    margin-top: v-bind('`${option.dataStyle.tupianMarginTop}px`');
    width: 100%;

    .divLine {
      width: 50%;
      display: block;
      align-items: center;
      justify-content: center;

      .line {
        display: flex;
        align-items: center;
        justify-content: left;
        overflow-y: auto;
        width: v-bind('`${option.dataStyle.tupianWidth}px`');
        height: v-bind('`${option.dataStyle.tupianHeight}px`');

        .lineFontSpan {
          margin-left: v-bind('`${option.dataStyle.titleMarginLeft}px`');
          font-family:
            PingFangSC,
            PingFang SC;
          font-weight: 400;
          font-size: v-bind('`${option.dataStyle.titleFontSize}px`');
          color: v-bind('`${option.dataStyle.titleFontColor}`');
          text-align: justify;
          font-style: normal;
        }
      }
      .line::-webkit-scrollbar {
        display: none;
      }
      .line {
        scrollbar-width: none;
        -ms-overflow-style: none;
      }
    }

    .divCircle {
      width: 50%;
      display: block;
      align-items: center;
      justify-content: center;

      .circle {
        display: flex;
        align-items: center;
        justify-content: left;
        overflow-y: auto;
        width: v-bind('`${option.dataStyle.tupianWidth}px`');
        height: v-bind('`${option.dataStyle.tupianHeight}px`');

        .circleFontSpan {
          margin-left: v-bind('`${option.dataStyle.titleMarginLeft}px`');
          font-family:
            PingFangSC,
            PingFang SC;
          font-weight: 400;
          font-size: v-bind('`${option.dataStyle.titleFontSize}px`');
          color: v-bind('`${option.dataStyle.titleFontColor}`');
          text-align: justify;
          font-style: normal;
        }
      }
      .circle::-webkit-scrollbar {
        display: none;
      }
      .circle {
        scrollbar-width: none;
        -ms-overflow-style: none;
      }
    }
  }
</style>
