<template>
    <div id="drivingTimeBox">
        <div id="drivetime"
             style="width:100%;height:100%;"></div>
        <loading class="loadingBox" ref="loadingData"></loading>
        <!-- 四边小角 -->
<!--        <div class="left-top"></div>-->
<!--        <div class="right-top"></div>-->
<!--        <div class="left-bottom"></div>-->
<!--        <div class="right-bottom"></div>-->
    </div>
</template>
<script>
  import { vehiclechart } from '@/assets/chartApi/chartApi'
  import loading from '../../loading'
  import echarts from 'echarts'
  export default {
    name: 'driving-time',
    props: ['timeSlot', 'vehicleId', 'starttime', 'endtime'],
    components: {
      loading
    },
    data () {
      return {
      }
    },

    methods: {
      initData (chartTime, chartData) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('drivetime'))
        // 指定图表的配置项和数据
        let option = {
          grid: {
            left: chartTime.length !== 0 ? '1%' : '3%',
            right: '8%',
            bottom: '6%',
            containLabel: true
          },
          toolbox: {
            show: false
          },
          tooltip: {
            trigger: 'axis',
            formatter: function (params) {
              return '<div style="padding: 6px">' +
                '<p>&nbsp;&nbsp;&nbsp;日期：&nbsp;' + params[0].name + '</p>' +
                '<p><span style="background: #c23513;width: 10px;height: 10px;border-radius: 50%;display: inline-block"></span> ' +
                '<span> 行车时长：' + params[0].value + 'h' + '</p>' +
                '</div>'
            }
          },
          legend: {
            data: ['行车时长'],
            x: 'center',
            y: 'top',
            textStyle: {
              color: '#fff'
            }
          },
          xAxis: [
            {
              show: true,
              type: 'category',
              boundaryGap: false,
              nameLocation: 'end',
              nameGap: 23,
              data: chartTime.length !== 0 ? chartTime : '暂无数据',
              axisLabel: {
                // interval: timeSlot !== 7 ? 'auto' : 0, //横轴信息全部显示
                interval: 'auto',
                formatter: function (value) {
                  if (chartTime.length !== 0) {
                    return value.split('-')[1] + '-' + value.split('-')[2]
                  }
                  return value
                },
                color: '#fff'
              },
              axisLine: {
                lineStyle: {
                  color: '#5a6379'
                }
              },
              nameTextStyle: {
                align: 'left'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '行车时长',
              axisLabel: {
                textStyle: {
                  color: '#fff'
                }
              },
              axisLine: {
                lineStyle: {
                  color: '#5a6379'
                }
              },
              nameTextStyle: {
                color: '#fff',
                padding: [0, 0, 0, 50]
              },
              splitLine: {
                lineStyle: {
                  color: '#5a6379'
                }
              }
            }
          ],
          series: [
            {
              name: '行车时长',
              type: 'line',
              stack: '总量',
              areaStyle: { normal: {} },
              data: chartData,
              smooth: true
            }
          ]
        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
        myChart.resize()
        window.addEventListener('resize', () => {
          myChart.resize()
        })
      },
      // 获取数据
      getDataDetails (timeSlot, vehicleid) {
        let para = {
          vehicleid: vehicleid,
          // recentday: timeSlot
          starttime: this.starttime,
          endtime: this.endtime
        }
        let chartTime = ''
        let chartData = ''
        let itemTime = []// 声明时间组
        let itemVeo = [] // 平均速度组
        this.$refs.loadingData.isShow = true
        vehiclechart(para).then(res => {
          if (res.data.result.code === 0) {
            this.$refs.loadingData.isShow = false
            res.data.data.forEach((item) => {
              itemTime.push(item.recdate.split(' ')[0])
              itemVeo.push(item.tripduration)
            })
            chartTime = itemTime
            chartData = itemVeo
            this.initData(chartTime, chartData, timeSlot)
          } else {
            this.$refs.loadingData.isShow = false
          }
        }).catch(() => {
          this.$refs.loadingData.isShow = false
        })
      }
    },
    mounted () {
      this.getDataDetails(this.timeSlot, this.vehicleId)
    },
    watch: {
      timeSlot: function (newVal) {
        this.getDataDetails(newVal, this.vehicleId)
      },
      starttime () {
        this.getDataDetails(this.timeSlot, this.vehicleId)
      },
      endtime() {
        this.getDataDetails(this.timeSlot, this.vehicleId)
      }
    }
  }
</script>
<style scoped>
    #drivingTimeBox {
        width: 100%;
        height: 100%;
        background-color: rgba(12, 43, 74, 0.8);
        position: relative;
        color: #2f76db;
        border: 1px solid #446da8;
    }
    .loadingBox{
        position:absolute;
        top:0;
        left:0;
    }
</style>
