<template>
  <chart v-if="lineChartId" :id="lineChartId" class="chart__pie" height="300px" width="100%" :options="chartOptions" />
</template>

<script>
import Chart from '@/components/Charts/Keyboard'
import * as echarts from 'echarts'
export default {
  components: { Chart },
  props: {
    chartId: {
      type: String,
      default: ''
    },
    presentInfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      lineChartId: null,
      chartOptions: {},
      entryAppointArr: [
        {
          title: '07:15',
          num: 380
        },
        {
          title: '07:30',
          num: 447
        },
        {
          title: '07:45',
          num: 580
        },
        {
          title: '08:00',
          num: 430
        },
        {
          title: '08:15',
          num: 180
        },
        {
          title: '09:30',
          num: 447
        },
        {
          title: '09:45',
          num: 580
        },
        {
          title: '10:00',
          num: 430
        },
        {
          title: '10:15',
          num: 180
        },
        {
          title: '10:30',
          num: 447
        },
        {
          title: '10:45',
          num: 580
        },
        {
          title: '11:00',
          num: 430
        },
        {
          title: '11:15',
          num: 180
        },
        {
          title: '11:30',
          num: 447
        },
        {
          title: '11:45',
          num: 580
        },
        {
          title: '12:00',
          num: 430
        },
        {
          title: '12:15',
          num: 180
        },
        {
          title: '12:30',
          num: 447
        },
        {
          title: '12:45',
          num: 580
        },
        {
          title: '13:00',
          num: 430
        },
        {
          title: '13:15',
          num: 180
        },
        {
          title: '13:30',
          num: 447
        },
        {
          title: '13:45',
          num: 580
        },
        {
          title: '14:00',
          num: 430
        },
        {
          title: '14:15',
          num: 180
        },
        {
          title: '14:30',
          num: 447
        },
        {
          title: '14:45',
          num: 580
        },
        {
          title: '15:00',
          num: 430
        },
        {
          title: '15:15',
          num: 180
        }
      ]
    }
  },
  mounted() {
    this.drawBar()
  },
  methods: {
    drawBar() {
      this.lineChartId = this.chartId
      const xAxisData = this.presentInfo.timeList || []
      const seriesData = this.presentInfo.numList || []
      this.chartOptions = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0, 31, 79, 0.95)',
          formatter: function(arg) {
            return `<div style="display: flex;flex-direction: column;justify-content: space-between;align-items: center;">
              <span>${arg[0].name}</span>
              <span>${arg[0].value}</span>
            </div>`
          },
          borderWidth: 0,
          axisPointer: {
            // type: 'cross',
            lineStyle: {
              color: 'rgba(0, 31, 79, 1)'
            }
          },
          textStyle: {
            color: '#fff',
            fontSize: 14
          }
        },
        grid: {
          left: '20px',
          right: '20px',
          bottom: '20px',
          top: '30px',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          interval: 0,
          data: xAxisData,
          axisLabel: {
            color: 'rgba(196, 207, 245, 1)',
            rotate: 20
          },
          axisTick: { //  刻度线
            show: false
          },
          axisLine: { // 坐标轴线
            show: false
          },
          splitLine: { // 分割线
            show: false
          }
        },
        yAxis: {
          type: 'value',
          max: function(value) {
            return value.max + value.min
          },
          axisLabel: {
            color: 'rgba(235, 239, 255, 0.5)'
          },
          axisTick: { //  刻度线
            show: false
          },
          axisLine: { // 坐标轴线
            show: false
          },
          splitLine: { // 分割线
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(235, 239, 255, 0.15)'
            }
          }
        },
        series: [
          {
            data: seriesData,
            type: 'line',
            barWidth: '10px',
            itemStyle: {
              normal: {
                barBorderRadius: [8, 8, 0, 0],
                label: {
                  show: true, // 关键点开启显示
                  position: 'top', // top上方;left左侧;right右方显示
                  textStyle: { // 数值样式
                    color: '#77A0DD',
                    fontSize: 14
                  }
                },
                // 设置柱状渐变色
                color: 'rgba(88, 226, 242, 1)'
              }
            },

            symbol: 'emptyCircle', // 折线拐点实心圆
            symbolSize: 6, // 实心圆大小
            // smooth: true, // 折线平滑
            // showBackground: true,
            // backgroundStyle: {
            //   color: 'rgba(1,252,204,0.2)',
            // },
            label: {
              normal: {
                show: false,
                position: 'top', // 折线上方显示数据
                color: 'rgb(0,255,255)'
              }
            }
          }
        ]
      }
    }
  }
}
</script>

<style></style>
