<template>
  <div class="hello">
    <!--<div class="test"></div>-->
    <!--&lt;!&ndash;<div class="test2">111</div>&ndash;&gt;-->
    <!--<span style="border:1px solid #ccc;padding:50px;">2222</span>-->
    <!--<img src="/static/image/digitalPark/cold.png" alt="">-->
    <!--<img src="/static/image/digitalPark/cold.png" alt="">-->

    <!--<a href="111">111</a>-->
    <!--<a href="222">222</a>-->


    <!--<form action="">-->
    <!--<label for
 
="testName">名稱</label>-->
    <!--<input type="text" name="testName" id="testName">-->
    <!--</form>-->

    <!--<div style="padding:1px;background: red"></div>-->
    <TestBus/>
    <TestBus2 v-if="showBus2"/>

    <div id="myChart" style="height:300px;"></div>


  </div>

</template>

<script>
  import Vue from 
 
'vue'
  import {mapState} from 'vuex'
  import draggable from 'vuedraggable'
  import PassengerFlowVolume from '../digitalPark/coms/norbulingka/passengerFlowVolume'
  import TestBus from './testBus'
  import TestBus2 from './testBus2'

  var dataList = []
  var originTime = null
  var myChart
  var myChartOption = {}
  
 
var start=0
  var end=100
  export default {
    name: 'HelloWorld',
    components: {
      draggable,
      PassengerFlowVolume,
      TestBus,
      TestBus2
    },
    data() {
      return {
        showBus2: true,
        name: 'lili'
      }
    },
    computed: {
      ...mapState({
        articleNew: state => state.test.articleNew
      })
    },
    watch: {
      proModuleList1(...args) {
        console.log('proModuleList1', ...args)
      },
      proModuleList2(...args) {
        console.log('proModuleList1', ...args)
      }
    },
    methods: {
      onDragStart(evt) {
        console.log("start-evt", evt)
      },
      onDragMove(evt) {
        console.log("move-evt", evt)
      },
      onDragEnd(evt) {
        console.log("end-evt", evt)
      },
      sayName() {
        console.log(this.name);

      },
      initChart() {
        myChart = this.$echarts.init(document.getElementById('myChart'));
        myChartOption = {
          animation: false,
          title: {
            text: '總流量（kbps'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }
          },
          dataZoom: [
            {
              type: 'slider',
              show: true,
              start: 0,
              end: 100,
            }
          ],
          grid: {
            left: 50/*"50px"*/,
            right: 15/*"15px"*/
          },
          legend: {
            data: ['當前流量']
          },
          xAxis: {
            boundaryGap: false,
            data: [],
          },
          yAxis: {
            boundaryGap: false
          },
          series: {
            symbol: "none",/*去掉小圓點*/
            name: '當前流量',
            type: 'line',
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 2,//折線寬度
                  color: "#FF0000"//折線顏色
                }
              }
            },
            data: []
          }
        };

        myChart.on('dataZoom', (event) => {
          if (event.batch) {
            start = event.batch[0].start;
            end = event.batch[0].end;
          } else {
            start = event.start;
            end = event.end;
          }
        })
      },
      getDataList() {
        originTime = originTime ? ((originTime + 1000)) : (parseInt(new Date().getTime() / 1000) * 1000)
        if (dataList.length > 100) {
          dataList.splice(0, 100)
        }
        for (var i = 1; i <= 100; i++) {
          var tmp = [moment(new Date(originTime + i * 10)).format('HH:mm:ss:SSS'), Math.random() * 100]
          dataList.push(tmp)
        }

        // console.log(dataList);
        var xAxisData = dataList.map(item => item[0])
        var yAxisData = dataList.map(item => item[1])

        myChartOption.dataZoom[0].start = start;
        myChartOption.dataZoom[0].end = end;
        myChartOption.xAxis.data = xAxisData
        myChartOption.series.data = yAxisData

        // console.log(myChartOption)
        myChart.setOption(myChartOption);

      }
    },
    mounted() {
      setTimeout(function () {
        this.showBus2 = false
        console.log("this1", this)
      }, 3000)

      setTimeout(() => {
        this.showBus2 = false
        console.log("this2", this)
      }, 3000)
      this.sayName()

      this.initChart()
      setInterval(() => {
        this.getDataList()
      }, 1000);
    }
  }

  // $(function(){
  //    $("#sortable0 li" ).draggable({
  //      helper: "clone",
  //      appendTo:'#sortable1',
  //      connectToSortable: "#sortable1,#sortable2",
  //      stop:function( event, ui ){
  //        //console.log(event,ui)
  //
  //      },
  //      start:function(evt,ui){
  //
  //      }
  //    })
  //
  //   $( "#sortable0,#sortable1, #sortable2" ).sortable({
  //     connectWith: ".connectedSortable"
  //   }).disableSelection();
  // })
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  .hello {
    background: pink;

    /*.test{*/
    /*width:50px;*/
    /*height:50px;*/
    /*float: left;*/
    /*background: pink;*/
    /*}*/

    /*.test2{*/
    /*width:100px;*/
    /*height:100px;*/
    /*background: yellow;*/
    /*}*/

    #myChart {
      width: 90%;
      margin: 20px auto;
    }
  }


</style>