<template>
    <!-- 未来30天访问量趋势预测图 -->
    <div class="region" style="margin-right: 10px; width: calc(50% - 10px)">
      <div class="card-header">
        <div class="title flex justify-between w-full">
            <h4 class="box-title">近12个月回款金额</h4>
        </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 { getRepayRecordTotal } 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 = () => {
      const param = {};
      if (props.tenant) {
        param['tenant'] = props.tenant;
      }
      load.value = true;
      getRepayRecordTotal(param)
        .then((res) => {
          if (res.result) {
            datas.value = res.result.map((v) => ({
              value: v.realRepayTotal || 0,
              name: v.month
            }));
          }
          load.value = false;
        })
        .catch(() => {
          datas.value = [];
          dates.value = [];
        });
    };
    query();
    watch(
      () => props.tenant,
      (newValue, oldValue) => {
        query();
      }
    );
  
    const option = computed(() => {
      return {
        tooltip: {},
      grid: {
        left: '0',
        right: '4%',
        bottom: '1%',
        top: '10px',
        containLabel: true
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          show: true,
          color: '#999',
          fontSize: 13
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#EFF1F3',
            width: 1,
            type: 'dashed'
          }
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#EFF1F3',
            width: 1
          }
        }
      },
      xAxis: {
        type: 'category',
        data: datas.value.map(v => v.name),
        boundaryGap: [0, 0.01],
        splitLine: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#EFF1F3',
            width: 1
          }
        },
        axisLabel: {
          show: true,
          color: '#999',
          fontSize: 13
        }
      },
      series: [
        {
          data: datas.value.map(v => v.value),
          type: 'bar',
          barMaxWidth: 36,
          itemStyle: {
            borderRadius: [6, 6, 6, 6],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#9eb7ff'
              },
              {
                offset: 1,
                color: '#5d87ff'
              }
            ])
          }
        }
      ]
    };
    });
  </script>
  
  <style lang="scss" scoped>
    .card-header {
    padding: 0 18px !important;
  }
    .echarts {
      width: 100%;
      height: 100%;
      padding-left: 5px;
      :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>
  