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

<script setup >
import { reactive, ref, watch, computed } 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 props = defineProps({
  dayActiveName: String,
  tenant: [String, Number]
});
const datas = ref([]);
const dates = ref([]);

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['tenantId'] = 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()
setInterval(() => {
  if (!load.value) {
    query()
  }
}, 3000)
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: "5%",
    right: "5%",
    bottom: "15%"
  },
  xAxis: [
    {
      type: "category",
      boundaryGap: false,
      axisLine: {
        show: true,
        symbol: ["none", "arrow"],
        symbolOffset: [0, 30],
        lineStyle: {
          color: "#233653",
          shadowOffsetX: 20,
          shadowColor: "#233653"
        }
      },
      axisLabel: {
        color: "#fff",
        padding: 0,
        fontSize: 14,
        formatter: function (data) {
          return data;
        }
      },
      splitLine: { show: false, lineStyle: { color: "#192a44" } },
      axisTick: { show: false },
      data: dates.value
    }
  ],
  yAxis:  {
      name: "作业量",
      nameTextStyle: {
        color: "#fff",
        fontSize: 12,
        padding: [0, 30, -4, 30]
      },
      minInterval: 1,
      splitLine: {
        show: false,
        lineStyle: {
          color: "#fff"
        }
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#fff"
        }
      },
      axisLabel: {
        show: true,
        color: "#fff",
        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>
