<template>
    <div id="vehicleUseTime">
        <div class="header">
        </div>
        <div id="vehicleUseChartBox"
             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-time',
    props: ['timeSlot', 'vehicleId', 'starttime', 'endtime'],
    components: {
      loading
    },
    data () {
      return {
        listData: [] // 数据组
      }
    },
    // computed: {
    //   vehicleid () {
    //     return this.$parent.webParam.vehicleId || 628737
    //   }
    // },
    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, itemChartLast, dataList) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('vehicleUseChartBox'))

        let option = {
          title: {
            text: '用车时间',
            textStyle: {
              color: '#fff'
            }
          },
          legend: {
            right: 10,
            data: [
              {
                name: '休假',
                icon: 'circle'
              },
              {
                name: '周末',
                icon: 'circle'
              },
              {
                name: '最早行车时间线',
                icon: 'line'
              },
              {
                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> 最早行车时间：' + millisecondToDate(Number(params[params.length - 2].value[1])),
                '<span style="background: #03771A;width: 10px;height: 10px;border-radius: 50%;display: inline-block"></span> 最晚行车时间：' + millisecondToDate(Number(params[params.length - 1].value[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
            },
            max: 86399000,
            axisLine: {
              lineStyle: {
                color: '#5a6379'
              }
            },
            axisLabel: {
              formatter: function (param) {
                return millisecondToDate(Number(param))
              },
              color: '#fff'
            }
          },
          grid: {
            left: '12%'
          },
          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'
                }
              }
            }, {
              name: '最晚行车时间线',
              type: 'line',
              smooth: true,
              data: itemChartLast,
              lineStyle: {
                normal: {
                  width: 1,
                  shadowColor: '#03771A',
                  shadowBlur: 1,
                  shadowOffsetY: 1
                }
              },
              itemStyle: {
                normal: {
                  color: '#03771A'
                }
              }

            }
          ]
        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
        myChart.resize()
        window.addEventListener('resize', () => {
          myChart.resize()
        })
      },
      haddleData (listData) {
        let chartTime = ''
        let chartType = ''
        let chartData = []
        let chartData1 = []
        let itemVeoOne = []
        let itemVeoTwo = []
        let itemChart = []
        let itemChart1 = []
        let itemVeo = []
        let itemOne = []
        let itemTwo = []
        listData.forEach((item, index) => {
          chartTime = item.recdate.split(' ')[0]
          var timePointHour = Number(item.firsttriptime.split(' ')[1].split(':')[0])
          var timePointMin = Number(item.firsttriptime.split(' ')[1].split(':')[1])
          var timePointSec = Number(item.firsttriptime.split(' ')[1].split(':')[2])
          var timePoint = Number(timePointHour * 60 * 60 + timePointMin * 60 + timePointSec) * 1000
          itemChart = [chartTime, timePoint]

          var timePointHour1 = Number(item.lasttriptime.split(' ')[1].split(':')[0])
          var timePointMin1 = Number(item.lasttriptime.split(' ')[1].split(':')[1])
          var timePointSec1 = Number(item.lasttriptime.split(' ')[1].split(':')[2])
          var timePoint1 = Number(timePointHour1 * 60 * 60 + timePointMin1 * 60 + timePointSec1) * 1000
          itemChart1 = [chartTime, timePoint1]

          chartType = item.datetype
          if (chartType === 'HOLIDAY') {
            itemOne = [chartTime, 0, '休假']
            itemVeoOne.push(itemOne)
          }
          if (chartType === 'WEEKEND') {
            itemTwo = [chartTime, 0, '周末']
            itemVeoTwo.push(itemTwo)
          }
          chartData.push(itemChart)
          chartData1.push(itemChart1)
          itemVeo = [itemVeoOne, itemVeoTwo]
        })
        this.initData(chartData, chartData1, 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)
    }

  }
  function millisecondToDate (msd) {
    var time = parseInt(msd)
    var timeArray = []
    var n
    n = Math.floor(time / 604800000)
    if (n > 0) {
      time = time % 604800000
      timeArray.push(n + '周')
    }
    n = Math.floor(time / 86400000)
    if (n > 0) {
      time = time % 86400000
      timeArray.push(n + '天')
    }
    n = Math.floor(time / 3600000)
    if (n >= 0) {
      if (n < 10) {
        time = time % 3600000
        timeArray.push('0' + n + ':')
      } else {
        time = time % 3600000
        timeArray.push(n + ':')
      }
    }
    n = Math.floor(time / 60000)
    if (n >= 0) {
      if (n < 10) {
        time = time % 60000
        timeArray.push('0' + n + ':')
      } else {
        time = time % 60000
        timeArray.push(n + ':')
      }
    }
    n = Math.floor(time / 1000)
    if (n >= 0) {
      if (n < 10) {
        timeArray.push('0' + n)
      } else {
        timeArray.push(n)
      }
    }
    timeArray = timeArray.join('')
    return timeArray
  }

</script>
<style scoped>
    #vehicleUseTime {
        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>
