<template>
  <div class="ZhiLan_ZhongZhiShuLiangMianJi">
    <div class="box">
      <div class="unit">{{ option.dataStyle.unitTitle }} （{{ option.dataStyle.unitName }}）</div>
      <div class="itemList">
        <div class="item" v-for="(item, index) in sortData" :key="index">
          <div class="label">{{ item.label }}</div>
          <div class="backbox">
            <div class="num">
              <div
                class="rate"
                :style="{
                  width: `${(item.value / maxValue) * valueWidth * 0.7}px`,
                  background: `linear-gradient(90deg, 
                    ${option.dataStyle.lineStartColor} 0%, 
                    ${option.dataStyle.lineEndColor} 100%)`,
                }"
              >
              </div>
              <span class="value">{{ item.value }}</span>
              <span class="value_unit">{{ option.dataStyle.unitName }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { PropType, toRefs, ref, reactive, computed, onMounted } from 'vue';
  import { CreateComponentType } from '@/packages/index.d';
  import { useChartDataFetch } from '@/hooks';
  import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
  import { cloneDeep } from 'lodash-es';
  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,
  });

  // 排序
  const sortData = computed(() => {
    let cloneData = cloneDeep(option.dataset);
    if (option.dataStyle.sortOrder == '0') {
      // 不排序
      return cloneData;
    } else if (option.dataStyle.sortOrder == '1') {
      // 升序
      return cloneData.sort((a, b) => parseInt(a.value) - parseInt(b.value));
    } else if (option.dataStyle.sortOrder == '2') {
      // 降序
      return cloneData.sort((a, b) => parseInt(b.value) - parseInt(a.value));
    }
  });

  // 最大值
  const maxValue = Math.max(...option.dataset.map((item) => parseInt(item.value, 10)));
  // 进度条宽度
  const valueWidth = computed(() => {
    return w.value - option.dataStyle.marginLeft * 2 - option.dataStyle.labelWidth;
  });
  // 单位DIV高度
  const unitHeight = computed(() => {
    return document.querySelector('.unit')?.offsetHeight;
  });

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

  // setdata 数据监听与更改
  useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
    props.chartConfig.option.dataset = newData;
  });
</script>

<style lang="scss" scoped>
  .ZhiLan_ZhongZhiShuLiangMianJi {
    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;
  }

  .box {
    margin-top: v-bind('`${option.dataStyle.marginTop}px`');
    padding-left: v-bind('`${option.dataStyle.marginLeft}px`');
    padding-right: v-bind('`${option.dataStyle.marginLeft}px`');
  }

  .unit {
    text-align: right;
    color: v-bind('`${option.dataStyle.unitFontColor}`');
    font-size: v-bind('`${option.dataStyle.unitFontSize}px`');
    margin-bottom: v-bind('`${option.dataStyle.itemMarginTop}px`');
    font-family:
      PingFangSC,
      PingFang SC;
    font-weight: 500;
    font-style: normal;
  }

  .itemList {
    overflow-y: auto;
    height: v-bind(
      '`${h - option.dataStyle.marginTop - option.dataStyle.itemMarginTop - unitHeight}px`'
    );
  }
  .itemList::-webkit-scrollbar {
    display: none;
  }
  .itemList {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .item {
    display: inline-flex;
    width: 100%;
    height: v-bind('`${option.dataStyle.itemHeight}px`');
  }

  .label {
    display: flex;
    align-items: center;
    justify-content: v-bind('`${option.dataStyle.labelAlign}`');
    width: v-bind('`${option.dataStyle.labelWidth}px`');
    border-right: 1px solid v-bind('`${option.dataStyle.lineBorderColor}`');

    color: v-bind('`${option.dataStyle.labelFontColor}`');
    font-size: v-bind('`${option.dataStyle.labelFontSize}px`');
    font-family:
      PingFangSC,
      PingFang SC;
    font-weight: 400;
    text-align: right;
    font-style: normal;
  }

  .backbox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: v-bind('`${valueWidth}px`');
    height: 100%;

    .num {
      background: v-bind('`${option.dataStyle.lineBackgroud}`');
      border: v-bind('`${option.dataStyle.lineBorderWidth}px`') solid
        v-bind('`${option.dataStyle.lineBorderColor}`');
      display: inline-flex;
      align-items: center;
      width: 100%;
      height: v-bind('`${option.dataStyle.lineHeight}px`');

      .rate {
        height: v-bind('`${option.dataStyle.lineHeight * 0.5}px`');
        margin-right: 10px;
      }

      .value {
        color: v-bind('`${option.dataStyle.valueFontColor}`');
        font-size: v-bind('`${option.dataStyle.valueFontSize}px`');
        font-family: D-DIN, D-DIN;
        font-weight: bold;
        font-style: normal;
      }
      .value_unit {
        color: v-bind('`${option.dataStyle.valueFontColor}`');
        font-size: v-bind('`${option.dataStyle.valueFontSize}px`');
        font-family: D, D;
        font-weight: normal;
        font-style: normal;
      }
    }
  }
</style>
