<template>
  <div class="ZhiGan_YongHuShu">
    <div class="list">
      <div v-for="(item, index) in option.dataset" :key="item.key">
        <div
          class="item"
          :style="{
            borderLeft: index == 1 ? '1px solid #FFFFFF10' : '1px solid #FFFFFF00',
          }"
        >
          <div class="image">
            <n-image
              :width="option.dataStyle.imageWidth"
              :height="option.dataStyle.imageHeight"
              :src="
                'src/assets/images/chart/zhigan/component/ZhiGan_YongHuShu' + (index + 1) + '.png'
              "
              preview-disabled
            />
          </div>
          <div :class="index + 1 == 1 ? 'xcxNum' : 'appNum'">
            <span>{{ item.num }}</span>
          </div>
          <div :class="index + 1 == 1 ? 'xcxTitle' : 'appTitle'">
            <span>{{ item.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';

  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>
  .ZhiGan_YongHuShu {
    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_YongHuShu::-webkit-scrollbar {
    display: none;
  }
  .ZhiGan_YongHuShu {
    scrollbar-width: none;
    -ms-overflow-style: 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`');
  }
  .item {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .image {
    display: inline-flex;
    justify-content: center;
    width: v-bind('`${(w - option.dataStyle.marginLeft * 2 - 2) / 2}px`');
  }

  .xcxNum {
    font-family: D-DIN, D-DIN;
    font-weight: bold;
    font-style: normal;
    text-shadow: 0px 0px 10px rgba(77, 255, 91, 0.5);

    display: inline-flex;
    justify-content: center;
    color: v-bind('`${option.dataStyle.xcxNumberFontColor}`');
    font-size: v-bind('`${option.dataStyle.xcxNumberFontSize}px`');
  }
  .xcxTitle {
    display: inline-flex;
    justify-content: center;
    color: v-bind('`${option.dataStyle.xcxTitleFontColor}`');
    font-size: v-bind('`${option.dataStyle.xcxTitleFontSize}px`');
  }

  .appNum {
    font-family: D-DIN, D-DIN;
    font-weight: bold;
    font-style: normal;
    text-shadow: 0px 0px 10px #94550d;

    display: inline-flex;
    justify-content: center;
    color: v-bind('`${option.dataStyle.appNumberFontColor}`');
    font-size: v-bind('`${option.dataStyle.appNumberFontSize}px`');
  }
  .appTitle {
    display: inline-flex;
    justify-content: center;
    color: v-bind('`${option.dataStyle.appTitleFontColor}`');
    font-size: v-bind('`${option.dataStyle.appTitleFontSize}px`');
  }
</style>
