<template>
  <div class="ZhiGan_XianSuoShangBao">
    <div class="type">
      <div class="type-left">
        <Progress :color="option.dataStyle.typeColor1" :numberOfDivs="1" />
        <span>{{ option.dataStyle.typeTitle1 }}</span>
        <Progress :color="option.dataStyle.typeColor2" :numberOfDivs="1" />
        <span>{{ option.dataStyle.typeTitle2 }}</span>
      </div>
      <div class="type-right">
        <n-select v-model:value="option.type" size="small" :options="option.typeOptions" />
      </div>
    </div>
    <div class="list">
      <div class="inline-container" v-for="item in option.dataset" :key="item.key">
        <ListTitle :item="item" :dataStyle="option.dataStyle" />
        <div class="progressDiv">
          <div class="list-jindu">
            <Progress
              :color="option.dataStyle.typeColor1"
              :numberOfDivs="Number(item.handled)"
              :height="option.dataStyle.listProgressHeight"
            />
            <Progress
              :color="option.dataStyle.typeColor2"
              :numberOfDivs="Number(item.total - item.handled)"
              :height="Number(option.dataStyle.listProgressHeight)"
            />
          </div>
        </div>
        <ListType class="listType" :item="item" :dataStyle="option.dataStyle" />
      </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 dayjs from 'dayjs';
  import { EventBus } from '@/utils/eventBus';
  import { replaceSqlParams } from '@/utils/sqlHandler';
  import ListTitle from './svg/listTitle.vue';
  import ListType from './svg/listType.vue';
  import Progress from './svg/progress.vue';

  const props = defineProps({
    chartConfig: {
      type: Object as PropType<CreateComponentType>,
      required: true,
    },
  });

  const { w, h } = toRefs(props.chartConfig.attr);

  const option = reactive({
    type: props.chartConfig.option.type,
    typeOptions: props.chartConfig.option.typeOptions,
    dataset: props.chartConfig.option.dataset,
    dataStyle: props.chartConfig.option.dataStyle,
  });

  watch(
    () => w.value,
    () => {
      option.dataStyle.listTitleWidth = (w.value * 106.5) / 400;
      option.dataStyle.listTitleHeight = (option.dataStyle.listTitleWidth * 20) / 71;
      option.dataStyle.listTypeWidth = (w.value * 66) / 400;
      option.dataStyle.listTypeHeight = (option.dataStyle.listTypeWidth * 30) / 66;
      option.dataStyle.listProgressHeight = (w.value * 15) / 400;
    },
    {
      immediate: true,
      deep: true,
    },
  );

  watch(
    () => option.dataStyle.sortOrder,
    () => {
      sort();
    },
    {
      immediate: true,
      deep: true,
    },
  );

  function sort() {
    if (option.dataStyle.sortOrder == '0') {
      // 分母排序
      option.dataset = option.dataset.sort((a, b) => parseInt(b.total) - parseInt(a.total));
    } else if (option.dataStyle.sortOrder == '1') {
      // 分子排序
      option.dataset = option.dataset.sort((a, b) => parseInt(b.handled) - parseInt(a.handled));
    } else if (option.dataStyle.sortOrder == '2') {
      // 比例排序
      option.dataset = option.dataset.sort(
        (a, b) => parseInt(b.handled) / parseInt(b.total) - parseInt(a.handled) / parseInt(a.total),
      );
    }
    option.dataset = option.dataset.map((item, index) => {
      const order = String(index + 1);
      const newKey = Number(order) >= 10 ? `${order}` : `0${order}`;
      return {
        ...item,
        key: newKey,
      };
    });
  }

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

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

<style lang="scss" scoped>
  .ZhiGan_XianSuoShangBao {
    background: v-bind('`${option.dataStyle.backgroud}`');
    width: v-bind('`${w}px`');
    height: v-bind('`${h}px`');
  }

  .type {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: v-bind('`${option.dataStyle.typeTop}px`');
    margin-left: v-bind('`${option.dataStyle.listLeft + 10}px`');

    .type-left {
      display: flex;
      width: 240px;
    }

    .type-right {
      width: 115px;
      margin-right: 10px;
    }

    span {
      color: v-bind('`${option.dataStyle.typeFontColor}`');
      font-size: v-bind('`${option.dataStyle.typeFontSize}px`');
      margin-left: 20px;
      margin-right: 30px;
    }
  }

  .list {
    width: v-bind('`${w}px`');
    height: v-bind('`${h - 45}px`');
    margin-top: v-bind('`${option.dataStyle.listTop}px`');
    margin-left: v-bind('`${option.dataStyle.listLeft}px`');
    overflow-y: auto;
    display: flex;
    flex-direction: column;

    .inline-container {
      display: flex;

      .listTitle {
      }

      .progressDiv {
        // margin-top: 3px;
        margin-left: 5px;
        margin-right: 5px;
        width: v-bind(
          '`${w - option.dataStyle.listTypeWidth - option.dataStyle.listTitleWidth - option.dataStyle.listLeft * 2}px`'
        );
        height: v-bind('`${option.dataStyle.listTypeHeight}px`');
        background: #ffffff00;
        border: 1px solid#000000;
      }

      .list-jindu {
        margin-left: 5px;
        margin-right: 5px;
        width: v-bind(
          '`${w - option.dataStyle.listTypeWidth - option.dataStyle.listTitleWidth - option.dataStyle.listLeft * 2 - 10}px`'
        );
        display: flex;
      }

      .listType {
        // margin-top: 3px;
      }
    }
  }

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

  .list {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
</style>
