<template>
  <!-- 未来30天访问量趋势预测图 -->
  <div class="echarts">
    <ECharts :option="option" :resize="false" />
  </div>
</template>

<script setup>
  import { reactive, ref, watch, computed, onBeforeUnmount } from 'vue';
  import { useDict } from '@/hooks/useDict';
  import dayjs from 'dayjs';
  import { getTractRecordThirtyDayTotal, getTractRecordDayHoursTotal } from '@/api/dataScreen';
  import echarts from '@/components/ECharts/config';
  import ECharts from '@/components/ECharts/index.vue';
  const { FollowStatus } = useDict('FollowStatus');
  const load = ref(false);
  const timer1 = ref();

  const props = defineProps({
    dayActiveName: String,
    tenant: [String, Number],
  });
  const datas = ref([]);
  const dates = ref([]);
  onBeforeUnmount(() => {
    if (timer1.value) {
      clearInterval(timer1.value);
      timer1.value = null;
    }
  });
  const query = () => {
    if (props.dayActiveName === '月') {
      const param = {};
      if (props.tenant !== '全部') {
        param['tenantId'] = props.tenant;
      }
      load.value = true;
      getTractRecordThirtyDayTotal(param)
        .then((res) => {
          if (res.result) {
            res.result.reverse();
            datas.value = res.result.map((v) => ({
              value: v.num,
              name: v.time,
              flowStatusTotalList: v.flowStatusTotalList,
            }));
            dates.value = res.result.map((v) => v.time);
          }
          load.value = false;
        })
        .catch(() => {
          datas.value = [];
          dates.value = [];
        });
    } else {
      const param = {};
      if (props.tenant !== '全部') {
        param['tenant'] = props.tenant;
      }
      load.value = true;
      getTractRecordDayHoursTotal(param)
        .then((res) => {
          if (res.result) {
            datas.value = res.result.map((v) => ({
              value: v.num,
              name: v.time,
              flowStatusTotalList: v.flowStatusTotalList,
            }));
            dates.value = res.result.map((v) => v.time);
          }
          load.value = false;
        })
        .catch(() => {
          datas.value = [];
          dates.value = [];
        });
    }
  };
  query();
  timer1.value = setInterval(() => {
    if (!load.value) {
      query();
    }
  }, 6000);
  watch(
    () => props.dayActiveName,
    (newValue, oldValue) => {
      query();
    }
  );
  watch(
    () => props.tenant,
    (newValue, oldValue) => {
      query();
    }
  );

  const option = computed(() => {
    return {
      tooltip: {
        trigger: 'axis',
        confine: true,
        hideDelay: 200, // 浮层隐藏的延迟
        enterable: true,
        formatter: (params) => {
          let tipData = params[0];
          let html = `<div style="height: auto;max-height: 170px;overflow-y: auto;">${tipData.name}${props.dayActiveName === '日' ? ':00' : ''} <i >${tipData.value}</i> 个<br/>`;
          if (tipData.data && tipData.data.flowStatusTotalList.length > 0) {
            tipData.data.flowStatusTotalList.forEach((item, index) => {
              html +=
                (item.followStatus
                  ? FollowStatus.value?.find((v) => v.value === item.followStatus)?.label
                  : '') +
                item.tractNum +
                '个<br/>';
            });
            html += '</div>';
          }
          return html;
        },
        // backgroundColor: "transparent",
        // borderColor: "transparent",
        axisPointer: { lineStyle: { type: 'dashed' }, snap: true },
        // extraCssText: "box-shadow: none;padding:0"
      },
      grid: {
        top: '15%',
        left: '1%',
        right: '1%',
        containLabel: true,
        bottom: '1%',
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#f9f9f9',
            },
          },
          axisLabel: {
            color: '#d1e6eb',
            padding: 0,
            fontSize: 14,
            formatter: function (data) {
              return data;
            },
          },
          axisTick: { show: false },
          data: dates.value,
        },
      ],
      yAxis: {
        name: '作业量',
        nameTextStyle: {
          color: '#fff',
          fontSize: 12,
          padding: [0, 30, -4, 30],
        },
        minInterval: 1,
        splitLine: {
          show: true,
          lineStyle: {
            color: '#0a3256',
          },
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: true,
          color: '#d1e6eb',
          fontSize: 14,
          padding: 0,
          formatter: function (value) {
            if (Number(value) >= 10000) {
              value = Number(value) / 10000 + 'w';
            }
            return value;
          },
        },
        axisTick: {
          show: false,
        },
      },
      series: [
        {
          name: '',
          type: 'line',
          symbol: 'circle',
          showSymbol: false,
          smooth: true,
          lineStyle: {
            width: 1,
            color: '#fff',
            borderColor: '#707070',
          },
          itemStyle: {
            color: 'rgb(57,89,255,1)',
            shadowColor: 'rgb(46,200,207,1)',
            shadowBlur: 3,
          },
          emphasis: {
            scale: true,
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: '#a7cafd' },
                { offset: 1, color: '#05e8fe' },
              ],
              global: false,
            },
            shadowColor: 'rgba(255, 199, 37, 0)',
            shadowBlur: 20,
          },
          data: datas.value,
        },
      ],
    };
  });
</script>

<style lang="scss" scoped>
  .echarts {
    width: 100%;
    height: 100%;
    :deep(.line-chart-bg) {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      width: 180px;
      height: 60px;
      padding-left: 20px;
      background: url('../images/line-bg.png') no-repeat;
      background-size: 100% 100%;
      span {
        font-size: 12px;
        color: rgb(255 255 255 / 80%);
        i {
          font-style: normal;
          color: #f5b348;
        }
      }
    }
  }
</style>
