<template>
  <div class="XianSuoShangBao">
    <div class="type">
      <div class="type-left">
        <Progress :color="option.typeStyle.typeColor1" :numberOfDivs="1" />
        <span>{{ option.typeStyle.typeTitle1 }}</span>
        <Progress :color="option.typeStyle.typeColor2" :numberOfDivs="1" />
        <span>{{ option.typeStyle.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.typeStyle.typeColor1" :numberOfDivs="Number(item.handled)" />
            <Progress
              :color="option.typeStyle.typeColor2"
              :numberOfDivs="Number(item.total - item.handled)"
            />
          </div>
        </div>
        <ListType style="margin-top: 3px" :item="item" :dataStyle="option.dataStyle" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { computed, PropType, toRefs, watch, reactive, ref } from 'vue';
  import { CreateComponentType } from '@/packages/index.d';
  import { icon } from '@/plugins';
  import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
  import { useChartDataFetch } from '@/hooks';
  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,
    typeStyle: props.chartConfig.option.typeStyle,
    dataset: props.chartConfig.option.dataset,
    dataStyle: props.chartConfig.option.dataStyle,
  });
</script>

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

  .type {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
    margin-left: 30px;
    margin-right: 10px;

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

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

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

  .list {
    width: v-bind('`${w}px`');
    height: v-bind('`${h - 45}px`');
    margin-top: 5px;
    margin-left: 20px;
    margin-right: 10px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;

    .inline-container {
      display: flex;

      .progressDiv {
        margin-top: 3px;
        margin-left: 5px;
        margin-right: 5px;
        width: v-bind('`${w - 180}px`');
        height: 23px;
        background: #000000;
      }

      .list-jindu {
        margin-left: 5px;
        margin-right: 5px;
        width: v-bind('`${w - 200}px`');
        display: flex;
      }
    }
  }

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

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