<template>
  <div class="chart" data-title="直播在线观看人数">
  </div>
</template>

<script>
import { Chart } from '@antv/g2'

import { findStatisticDataApi } from '@/api/statistic'

export default {
  props: {
    live: {}
  },
  watch: {
    live: {
      deep: true,
      immediate: true,
      handler (nv) {
        nv && this.$nextTick(() => { this.findData(nv.id) })
      }
    }
  },
  methods: {
    async findData (id) {
      this.chart?.destroy?.()
      const data = await findStatisticDataApi('detail-stu-count-line', { id })

      this.chart = new Chart({
        container: this.$el,
        autoFit: true,
        height: 500,
        padding: [60, 30, 30, 30]
      })

      this.chart.data(data)

      this.chart.tooltip({
        showCrosshairs: true, // 展示 Tooltip 辅助线
        title: (title, datum) => '时间：' + datum.t,
        itemTpl: `
  <ul class="g2-tooltip-list">
    <li class="g2-tooltip-list-item">
      <span style="background-color:{color};" class="g2-tooltip-marker"></span>
      <span class="g2-tooltip-name">人数：</span><span class="g2-tooltip-value">{c}人</span>
    </li>
  </ul>`
      })

      this.chart.area().position('t*c')
      this.chart.line().position('t*c').label('c').tooltip('t*c', (t, c) => {
        return {
          t,
          c
        }
      })
      this.chart.point().position('t*c').tooltip('t*c', (t, c) => {
        return {
          t,
          c
        }
      })

      this.chart.render()
    }
  }

}
</script>
