<template>
  <div class="echarts">
    <ECharts :option="option" :resize="false" :onClick="onClick" @mousemove="onMousemove" @mouseleave="onMouseleave" />
  </div>
</template>

<script setup>
  import ECharts from '@/components/ECharts/index.vue';
  import { ranking1, ranking2, ranking3, ranking4 } from '../assets/ranking-icon';
  import { useRouter } from 'vue-router';
  import echarts from '@/components/ECharts/config';
  import { getReturn } from '@/api/dataScreenMock';
  const router = useRouter();
  import { computed, onBeforeUnmount } from 'vue';
  import { reactive, ref } from 'vue';
  const salvProName = ref([]);
  const load = ref(false);
  const timer = ref(null);
  const salvProValue = ref([]);
  const dataZoom = ref({
    startValue: 0,
    endValue: 3,
  });
  const timer1 = ref();
  onBeforeUnmount(() => {
    if (timer1.value) {
      clearInterval(timer1.value);
      timer1.value = null;
    }
  });
  const props = defineProps({
    isAdmin: Boolean,
    tenantId: [String, Number, Object],
  });
  const onClick = (e) => {
    if (props.isAdmin) {
      const item = salvProValue.value[e.dataIndex];
      const url = router.resolve({
        path: '/data-screen-mock',
        query: { tenantId: item.tenantId },
      });
      // 打开新窗口
      window.open(url.href);
    }
  };
  const option = computed(() => {
    return {
      color: ['#61A8FF'], //进度条颜色
      grid: {
        left: '0%',
        right: '0%',
        bottom: '0%',
        top: '0%',
        containLabel: true,
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'none',
        },
        formatter: function (params) {
          return params[0].name + ' : ' + params[0].value + '元';
        },
      },
      dataZoom: [
        {
          type: 'slider',
          orient: 'vertical',
          show: false,
          ...dataZoom.value,
        },
      ],
      xAxis: [
        {
          show: false,
        },
        //由于下边X轴已经是百分比刻度了,所以需要在顶部加一个X轴,刻度是金额,也隐藏掉
        {
          show: false,
        },
      ],
      yAxis: {
        type: 'category',
        axisLabel: {
          show: false, //让Y轴数据不显示
        },
        inverse: true,
        itemStyle: {},
        axisTick: {
          show: false, //隐藏Y轴刻度
        },
        axisLine: {
          show: false, //隐藏Y轴线段
        },
        data: salvProName.value,
      },
      series: [
        {
          show: true,
          type: 'bar',
          barGap: '-100%',
          barWidth: 20, //统计条宽度
          itemStyle: {
            normal: {
              barBorderRadius: 30,
              color: {
                type: 'bar',
                colorStops: [
                  {
                    offset: 0,
                    color: '#39A7FC', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#00FBFF', // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
            },
          },
          max: 1,
          label: {
            normal: {
              fontSize: 14,
              show: true,
              textStyle: {
                color: '#fff', //百分比颜色
              },
              position: ['50%', 5],
              align: 'center',
              //百分比格式
              formatter: function (data) {
                if (salvProValue.value[data.dataIndex].rate.toFixed(2) === '100.00') {
                  return salvProValue.value[data.dataIndex].rate.toFixed(2) + '%';
                } else {
                  return '';
                }
              },
            },
          },
          labelLine: {
            show: false,
          },
          z: 2,
          data: salvProValue.value.map((v) => v.rate),
        },
        //数据条--------------------我是分割线君------------------------------//
        {
          show: true,
          type: 'bar',
          xAxisIndex: 1, //代表使用第二个X轴刻度!!!!!!!!!!!!!!!!!!!!!!!!
          barGap: '-100%',
          barWidth: 20, //统计条宽度
          itemStyle: {
            normal: {
              barBorderRadius: 30,
              color: 'rgba(22,203,115,0.05)',
            },
          },
          label: {
            normal: {
              show: true,
              //label 的position位置可以是top bottom left,right,也可以是固定值
              //在这里需要上下统一对齐,所以用固定值
              position: [0, '-108%'],
              rich: {
                //富文本
                white: {
                  //自定义颜色
                  color: '#ffffff',
                  fontSize: 16,
                },
              },
              formatter: function (data) {
                //富文本固定格式{colorName|这里填你想要写的内容}
                return (
                  '{start2|}{white|' +
                  (data.dataIndex + 1) +
                  '  ' +
                  salvProValue.value[data.dataIndex].name +
                  '}'
                );
              },
            },
          },
          data: salvProValue.value,
        },
        {
          show: true,
          type: 'bar',
          barGap: '-100%',
          barWidth: 20, //统计条宽度
          itemStyle: {
            normal: {
              barBorderRadius: 30,
              color: 'rgba(102, 102, 102,0.5)',
            },
          },
          label: {
            normal: {
              show: true,
              //label 的position位置可以是top bottom left,right,也可以是固定值
              //在这里需要上下统一对齐,所以用固定值
              position: ['100%', '-108%'],
              align: 'right',
              rich: {
                //富文本
                white: {
                  //自定义颜色
                  color: '#ffffff',
                  fontSize: 16,
                },
                gray: {
                  color: '#727CBA',
                  fontSize: 16,
                },
              },
              formatter: function (data) {
                //富文本固定格式{colorName|这里填你想要写的内容}
                return (
                  '{white|    回款金额:}{gray|' +
                  salvProValue.value[data.dataIndex].value +
                  '}{white|元}'
                );
              },
            },
          },
          z: 1,
          data: salvProValue.value.map((v) => 100),
        },
        {
          show: true,
          type: 'bar',
          barGap: '-100%',
          barWidth: 1, //统计条宽度
          itemStyle: {
            normal: {
              barBorderRadius: 30,
              color: 'rgba(102, 102, 102,0.5)',
            },
          },
          label: {
            normal: {
              fontSize: 14,
              show: true,
              textStyle: {
                color: '#fff', //百分比颜色
              },
              position: ['50%', 5],
              align: 'center',
              //百分比格式
              formatter: function (data) {
                return salvProValue.value[data.dataIndex].rate.toFixed(2) + '%';
              },
            },
          },
          z: 3,
          data: salvProValue.value.map((v) => 100),
        },
      ],
    };
  });
  const param = {};
  if (!props.isAdmin) {
    param['tenant'] = props.tenantId;
  }
  const query = () => {
    load.value = true;
    getReturn(param).then((res) => {
      if (res.result) {
        const arr = res.result;
        arr.sort((a, b) => b.totalReturn - a.totalReturn);
        console.log('arr', arr);
        salvProName.value = arr.map((v) => v.name);
        salvProValue.value = arr.map((v) => ({
          name: v.name,
          value: v.totalReturn,
          tenantId: v.tenantId,
          rate: v.rate,
        }));
        load.value = false;
        if (salvProName.value.length > 4) {
          if (timer.value) {
            clearInterval(timer.value);
            timer.value = null;
          }
          timer.value = setInterval(() => {
            dataZoom.value.startValue++;
            if (dataZoom.value.endValue++ >= salvProName.value.length - 1) {
              dataZoom.value.startValue = 0;
              dataZoom.value.endValue = 3;
            }
            // chart?.setOption(option);
          }, 1000);
        }
      }
    });
  };
  const onMousemove = () => {
    if (timer.value) {
      clearInterval(timer.value);
      timer.value = null;
    }
  }
  const onMouseleave = () => {
    if (timer.value) {
      clearInterval(timer.value);
      timer.value = null;
    }
    timer.value = setInterval(() => {
      dataZoom.value.startValue++;
      if (dataZoom.value.endValue++ >= salvProName.value.length - 1) {
        dataZoom.value.startValue = 0;
        dataZoom.value.endValue = 3;
      }
      // chart?.setOption(option);
    }, 1000);
  }
  query();
  timer1.value = setInterval(() => {
    if (!load.value) {
      query();
    }
  }, 6000);
</script>
<style lang="scss" scoped>
  .echarts {
    width: 100%;
    height: calc(100%);
  }
  .echarts-header {
    box-sizing: border-box;
    display: flex;
    height: 36px;
    margin: 10px 10px 0;
    line-height: 36px;
    background: url('../images/rankingChart-bg.png') no-repeat;
    background-size: 100% 100%;
    span {
      width: 18%;
      margin-left: 4px;
      font-size: 14px;
      font-weight: bold;
      color: #fdbc52;
      text-align: center;
      &:nth-child(2) {
        margin-left: 4px;
      }
      &:last-child {
        width: 20%;
        margin-left: 60px;
      }
    }
  }
</style>
