<script setup>
import { http } from "@/api/request";

const base64Img = "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg=="
const state = reactive({
  chartData: {
    yAxis: ['任务A', '任务B', '任务C', '任务较长名称D', '任务E', '任务F', '任务G', '任务H', '任务I'],
    color: [$c.cyl4, $c.orl5, $c.rel5],
    data: [69, 96, 35, 26, 96, 32, 52, 22, 72]
  },
  chartOption: {}
})


const getSymbolData=(data)=>{
  let arr = [];
  for (var i = 0; i < data.length; i++) {
    arr.push({
      value: data[i],
      symbolPosition: 'end'
    })
  }
  return arr;
}

const processData = (dataList) => {
  const fulldata = dataList?.map(it => it?.count)

  state.chartOption.yAxis.data = dataList?.map(it => it?.userName);
  state.chartOption.series[0].data = fulldata;
  state.chartOption.series[1].data = (new Array(fulldata.length)).fill(Math.max(...fulldata));
  state.chartOption.series[2].data = getSymbolData(fulldata);
  dataScroll();
}

const processOption = (dataList) => {
  const fulldata = dataList?.map(it => it?.count)

  state.chartOption = {
    update: true,
    title: {
      show: false,
      // text: '实时流速图2',
      textStyle: {
        color: $c.cbl5,
        fontSize: 16,
        fontWeight: "normal"
      },
    },
    grid: {
      top: '15%',
      left: '18%',
      right: '70px',
      bottom: '5%'
    },
    tooltip: { show: false },
    xAxis: {
      type: 'value',
      min: 0,
      max: Math.max(...fulldata),
      axisLine: { show: false },
      splitLine: { show: false },
      axisLabel: { show: false },
      axisTick: { show: false }
    },
    dataZoom: {
      yAxisIndex: 0,
      show: false,
      type: "slider",
      startValue: 0,
      endValue: 4,
    },
    yAxis: {
      //show: false,
      type: 'category',
      inverse: true,
      splitLine: { show: false, },
      axisLine: { show: false },
      axisLabel: {
        show: true,
        interval: 0,
        margin: 10,
        fontSize: 12,
        width: 50,
        lineHeight: 14,
        overflow: "breakAll",
        fontWeight: 'normal',
      },
      axisTick: { show: false },
      data: []
    },
    series: [
      {
        type: 'bar',
        barWidth: '40%',
        animationDuration: 2000,
        itemStyle: {
          borderWidth: 0,
          borderRadius: 10,
          color: {
            type: 'linear', x: 0, y: 0, x2: 1, y2: 0,
            colorStops: [{ offset: 0, color: $c.cyl8, }, { offset: 1, color: $c.cyl4, }]
          }
        },
        label: { show: false, },
        data: [],
        z: 0
      },
      {
        type: 'bar',
        barWidth: '40%',
        barGap: '-100%',
        animation: false,
        itemStyle: {
          borderWidth: 0,
          borderRadius: 5,
          color: 'rgba(0,202,255,0.2)'
        },
        label: {
          show: true,
          position: ['101%', '20%'],
          fontSize: 14,
          fontWeight: 'normal',
          formatter: (params) => {
            return '访问' + (fulldata[params.dataIndex]) + '次';
          }
        },
        data: [],
        z: 0
      },
      {
        type: 'pictorialBar',
        animation: true,
        // animationThreshold: 3000 ,
        animationDuration: 3000,
        // animationDurationUpdate:500,
        symbol: base64Img,
        symbolSize: [50, 50],
        symbolOffset: [20, 0],
        z: 12,
        itemStyle: {
          color: '#fff'
        },
        data: []
      },
    ]
  }
  processData(dataList);
}
const { proxy } = getCtx();

const dataScroll = () => {
  proxy.$timer("dataScrollBarHorizC", () => {
    let { data } = state.chartData;
    let { dataZoom } = state.chartOption
    if (dataZoom.endValue == data.length-1) {
      dataZoom.endValue = 4;
      dataZoom.startValue = 0;
    } else {
      dataZoom.endValue++;
      dataZoom.startValue++;
    }
    state.chartOption.update = true
    dataScroll()
  }, 5000)
}

onMounted(() => {
  http("POST", "/index/statistics/teacherVisit", {}).then((res) => {
    let result = res?.data?.dataList;
    state.chartData.data = result?.map(it=>it?.count);
    processOption(result);
  });
})
onBeforeMount(() => {
  proxy.$timer("dataScrollBarHorizC")
})
</script>
<template>
  <echartsInit :chartOption="state.chartOption"></echartsInit>
</template>
<style lang="less"></style>
