<template>
  <div ref="portaletDiv">
    <a-card :bordered="false">
      <div ref="commandstats" style="height: 380px" />
    </a-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getSysMiniappDailyVisitStatist } from '@/api/system/sysMiniappDailyVisit'
export default {
  name: 'Cache',
  props: {
    statisticsType: {
      type: String,
      default: 'week'
    }
  },
  data () {
    return {
      commandstats: null,
      xAxisData: [],
      visitPvData: [],
      visitUvNew: [],
      visitUv: []
    }
  },
  filters: {},
  created () {},
  mounted () {
    this.getFirstChart()
    window.addEventListener('resize', () => {
      this.commandstats.resize()
    })
    this.$emit('setHeight', this.$refs.portaletDiv.offsetHeight)
  },
  computed: {},
  watch: {
    statisticsType(oldVal, newVal) {
      console.log(oldVal)
      console.log(newVal)
      if (newVal) {
        this.getFirstChart()
      }
    }
  },
  methods: {
    async getFirstChart () {
      this.xAxisData = []
      this.visitPvData = []
      this.visitUvNew = []
      this.visitUv = []
      this.commandstats = echarts.init(this.$refs.commandstats, 'macarons')
      await getSysMiniappDailyVisitStatist(this.statisticsType).then(response => {
        this.xAxisData = response.data.dataList
        this.visitPvData = response.data.visitPv
        this.visitUvNew = response.data.visitUvNew
        this.visitUv = response.data.visitUv
      })
      this.commandstats.setOption({
        title: {
          textStyle: {
            fontSize: 16,
            fontWeight: '600',
            color: '#333' // 主标题文字颜色
          },
          left: 8,
          top: 8
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          top: 10,
          right: 20,
          textStyle: {
            color: '#666'
          },
          itemGap: 20,
          itemWidth: 10,
          data: ['访问人数', '访问次数', '新用户数']
        },
        toolbox: {
          feature: {}
        },
        grid: {
          left: '4%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: this.xAxisData,
            axisLabel: {
              // 坐标轴文本标签，详见axis.axisLabel
              show: true,
              rotate: 0,
              margin: 18,
              textStyle: {
                color: '#666',
                fontSize: '12',
                interval: 0,
                rotate: 30
              }
            },
            axisLine: {
              lineStyle: {
                color: '#dfe6ff',
                width: 1
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            textStyle: {
              color: '#666',
              fontSize: '12'
            }
          }
        ],
        series: [
          {
            name: '访问人数',
            type: 'line',
            stack: '总量',
            itemStyle: {
              color: 'rgba(160,101,251,1)'
            },
            symbolSize: 2,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(160,101,251,0.2)'
                },
                {
                  offset: 1,
                  color: 'rgba(160,101,251,0.01)'
                }
              ])
            },
            data: this.visitUv
          },
          {
            name: '访问次数',
            type: 'line',
            stack: '总量',
            itemStyle: {
              color: 'rgba(58,150,253,1)'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(58,150,253,0.2)'
                },
                {
                  offset: 1,
                  color: 'rgba(58,77,233,0.01)'
                }
              ])
            },
            data: this.visitPvData
          },
          {
            name: '新用户数',
            type: 'line',
            stack: '总量',
            itemStyle: {
              color: 'rgba(160,214,180,1)'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(160,214,180,0.2)'
                },
                {
                  offset: 1,
                  color: 'rgba(160,77,180,0.01)'
                }
              ])
            },
            data: this.visitUvNew
          }
        ]
      })
    }
  }
}
</script>

<style></style>
