<template>
  <div>
    <lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="访问统计">
      <div slot="content"></div>
      <slot>
        <div>
          <el-date-picker
            type="month"
            size="small"
            v-model="select.month"
            value-format="yyyy-MM"
            style="width: 200px;">
          </el-date-picker>

          <el-button size="small" type="primary" style="margin-left: 10px;" @click="getData">查询</el-button>
        </div>
      </slot>
    </lx-header>

    <div style="display: flex;margin-top: 20px">
      <div v-if="data" class="box">
        <div style="border-bottom: 2px solid rgba(200,200,200,0.7);padding-bottom: 20px">
          <i class="el-icon-coin"></i>
          <span style="font-weight: 600;padding: 0 10px">访问统计</span>
        </div>

        <div id="doughnut-chart"/>
      </div>
    </div>
  </div>
</template>

<script>
import { month } from "@/api/statics";
import echarts from "echarts";
export default {
  data() {
    return {
      chart: '',
      select: {
        month: this.$moment(new Date()).format('YYYY-MM')
      },
      data: {}
    }
  },
  methods: {
    init () {
      this.chart = echarts.init(document.getElementById('doughnut-chart'))
      let colors = ['#00A82A', '#70e1f5', '#ffd194', '#FF6B6B', '#6E48AA', '#4B1248']
      let data = []
      this.chart.setOption(
        {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '3%',
            left: 'center'
          },
          series: [
            {
              type: 'pie',
              radius: ['46%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '15',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data
            }
          ]
        }
      )
    },


    async getData () {
      const res = await month(this.select)
      console.log(res,111)
      this.init()
    }
  },
  computed: {},
  created() {
    this.getData()
  }
}
</script>

<style scoped lang="scss">
.box {
  flex: 1;
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  margin-right: 40px;

  #doughnut-chart {

    box-sizing: border-box;
    min-height: 240px;
  }

}
</style>
