<template>
    <div id="vehicleUseFrequency">
        <div class="header">
        </div>
        <div id="FrequencyChartBox"
             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: 'vehicle-use-frequency',
    props: ['timeSlot', 'vehicleId', 'starttime', 'endtime'],
    components: {
      loading
    },
    data () {
      return {
        listData: [] // 数据组
      }
    },
    watch: {
      timeSlot: function (newVal) {
        this.getDataDetails(newVal, this.vehicleId)
      },
      starttime () {
        this.getDataDetails(this.timeSlot, this.vehicleId)
      },
      endtime() {
        this.getDataDetails(this.timeSlot, this.vehicleId)
      }
    },
    methods: {
      initData (chartdata, dataList) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('FrequencyChartBox'))

        let option = {
          title: {
            text: '用车频率',
            textStyle: {
              color: '#fff'
            }
          },
          legend: {
            right: 10,
            data: [
              {
                name: '休假',
                icon: 'circle'
              },
              {
                name: '周末',
                icon: 'circle'
              },
              {
                name: '用车频率',
                icon: 'line'
              }
            ],
            textStyle: {
              color: '#fff'
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              animation: false
            },
            formatter: function (params) {
              return [
                params[params.length - 1].data[0],
                '<span style="background: #c23513;width: 10px;height: 10px;border-radius: 50%;display: inline-block"></span> 用车频率：' + params[params.length - 1].data[1]
              ].join('<br>')
            }
          },
          xAxis: {
            type: 'time',
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#5a6379'
              }
            },
            axisPointer: {
              type: 'line'
            },
            axisLabel: {
              formatter: function (param) {
                return new Date(parseInt(param)).toLocaleString().replace(/:\d{1,2}$/, ' ').split(' ')[0]
              },
              color: '#fff'
            }

          },
          yAxis: {
            type: 'value',
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#5a6379'
              }
            },
            axisLabel: {
              color: '#fff'
            }

          },
          series: [
            {
              name: '休假',
              data: dataList[0],
              type: 'scatter',
              symbolSize: 10,
              label: {
                color: '#fff',
                emphasis: {
                  show: true,
                  formatter: function (param) {
                    return param.data[2]
                  },
                  position: 'top'
                }
              },
              itemStyle: {
                normal: {
                  shadowBlur: 10,
                  shadowColor: 'rgba(120, 36, 50, 0.5)',
                  shadowOffsetY: 5,
                  color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                    offset: 0,
                    color: '#F06651'
                  }])
                }
              }
            }, {
              name: '周末',
              data: dataList[1],
              type: 'scatter',
              symbolSize: 10,
              label: {
                color: '#fff',
                emphasis: {
                  show: true,
                  formatter: function (param) {
                    return param.data[2]
                  },
                  position: 'top'
                }
              },
              itemStyle: {
                normal: {
                  shadowBlur: 10,
                  shadowColor: 'rgba(25, 100, 150, 0.5)',
                  shadowOffsetY: 5,
                  color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                    offset: 0,
                    color: '#E000FF'
                  }])
                }
              }
            }, {
              name: '用车频率',
              type: 'line',
              smooth: true,
              data: chartdata,
              lineStyle: {
                normal: {
                  width: 1,
                  shadowColor: '#c23513',
                  shadowBlur: 1,
                  shadowOffsetY: 1
                }
              },
              itemStyle: {
                normal: {
                  color: '#c23513'
                }
              }
            }]
        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
        myChart.resize()
        window.addEventListener('resize', () => {
          myChart.resize()
        })
      },
      haddleData (listData) {
        let chartTime = ''
        let chartType = ''
        let chartData = []
        let itemVeoOne = []
        let itemVeoTwo = []
        let itemChart = []
        let itemVeo = []
        let itemOne = []
        let itemTwo = []
        listData.forEach((item, index) => {
          chartTime = item.recdate.split(' ')[0]
          itemChart = [chartTime, item.tripcount]
          chartType = item.datetype
          if (chartType === 'HOLIDAY') {
            itemOne = [chartTime, 0, '休假']
            itemVeoOne.push(itemOne)
          }
          if (chartType === 'WEEKEND') {
            itemTwo = [chartTime, 0, '周末']
            itemVeoTwo.push(itemTwo)
          }
          chartData.push(itemChart)
          itemVeo = [itemVeoOne, itemVeoTwo]
        })
        this.initData(chartData, itemVeo)
      },
      // 获取数据
      getDataDetails (timeSlot, vehicleid) {
        var _this = this
        let para = {
          vehicleid: vehicleid,
          // recentday: timeSlot,
          starttime: this.starttime,
          endtime: this.endtime
        }
        this.$refs.loadingData.isShow = true
        vehiclechart(para).then(res => {
          if (res.data.result.code === 0) {
            this.$refs.loadingData.isShow = false
            var data = res.data.data
            _this.haddleData(data)
          } else {
            this.$refs.loadingData.isShow = false
          }
        }).catch(() => {
          this.$refs.loadingData.isShow = false
        })
      }
    },
    mounted () {
      this.getDataDetails(this.timeSlot, this.vehicleId)
    }

  }
</script>
<style scoped>
    #vehicleUseFrequency {
        width: 100%;
        height: 100%;
        background-color: rgba(12, 43, 74, 0.8);
        position: relative;
        color: #2f76db;
        border: 1px solid #446da8;
    }
    .header {
        margin-bottom: 10px;
        margin-top: 12px;
    }
    .loadingBox{
        position:absolute;
        top:0;
        left:0;
    }
</style>
