<template>
    <!-- 未来30天访问量趋势预测图 -->
    <div class="region">
      <div class="card-header">
        <div class="title flex justify-between w-full">
            <h4 class="box-title">作业量</h4>
            <div class="tabs flex">
              <div
                class="tab-item"
                @click="dayActiveName = '日'"
                :class="{ active: dayActiveName === '日' }"
                >日</div
              >
              <div
                class="tab-item"
                @click="dayActiveName = '月'"
                :class="{ active: dayActiveName === '月' }"
                >月</div
              >
            </div>
        </div>
      </div>
      <div class="echarts" style="height: calc(100% - 30px);">
        <ECharts :option="option" :resize="false" />
      </div>
    </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 dayActiveName = ref('日');
    const props = defineProps({
        tenant: [String, Number, Object],
  });
    const datas = ref([]);
    const dates = ref([]);
    const query = () => {
      if (dayActiveName.value === '月') {
        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();
    watch(
      () => dayActiveName.value,
      (newValue, oldValue) => {
        query();
      }
    );
    watch(
      () => props.tenant,
      (newValue, oldValue) => {
        query();
      }
    );
  
    const option = computed(() => {
      return {
        tooltip: {
          trigger: 'axis',
          confine: true,
          // showDelay: 1000, // 浮层隐藏的延迟
          hideDelay: 10000000, // 浮层隐藏的延迟
          enterable: true,
          // triggerOn: 'click',
          renderMode: 'html',
          transitionDuration: 0.9,
          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;
          },
          position: (point) => {
            return [point[0], '10%'];
          },
          // backgroundColor: "transparent",
          // borderColor: "transparent",
          axisPointer: { lineStyle: { type: 'dashed' } },
          // extraCssText: "box-shadow: none;padding:0"
        },
        grid: {
            left: '2.2%',
            right: '3%',
            bottom: '1%',
            top: '10px',
            containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
            show: true,
            color: '#999',
            margin: 20,
            // interval: 0,
            fontSize: 13,
            formatter: (v) => {
              // console.log('v0', v)
              if (v.length > 4) {
                return v.slice(v.indexOf('.') + 1, v.length)
              }
              return v
            }
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#E8E8E8',
                    width: 1
                }
            },
            axisTick: {
            show: false,
            },
            data: dates.value,
          },
        ],
        yAxis: {
          name: '作业量',
          axisLine: {
            show: true,
            lineStyle: {
                color: '#E8E8E8',
                width: 1
            }
            },
        splitLine: {
            show: true,
            lineStyle: {
                color: '#e8e8e8',
                width: 1,
                type: 'dashed'
            }
        },
          axisLabel: {
            show: true,
            color: '#999',
            fontSize: 13,
            padding: 0,
            formatter: function (value) {
              if (Number(value) >= 10000) {
                value = Number(value) / 10000 + 'w';
              }
              return value;
            },
          }
        },
        series: [
          {
            name: '',
            type: 'line',
            symbol: 'none',
            smooth: true,
            lineStyle: {
                width: 2.6
            },
            color: '#5D87FF',
            areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(93, 135, 255, .2)'
              },
              {
                offset: 1,
                color: 'rgba(93, 135, 255, .01)'
              }
            ])
          },
            data: datas.value,
          },
        ],
      };
    });
  </script>
  
  <style lang="scss" scoped>
  .card-header {
    padding: 0 18px !important;
  }
    .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;
          }
        }
      }
    }
    .tabs {
        border-radius: 5px;
        border: 1px solid #6591f7;
        color: #000;
        cursor: pointer;
        overflow: hidden;
        .tab-item {
          padding: 2px 20px;
          border: 1px solid #6591f7;
          &.active {
            color: #fff;
            background: #6591f7;
          }
        }
      }
  </style>
  