<template lang="html">
  <div class="channelDataVue">
    <div class="title">
      选择时间段：
      <input type="text" name="" :value="defaultTimeLine" class="dateInput" placeholder="2017-12-12" id="selectTimeSegment" readonly>
      <!-- 选择渠道：
      <select class="" name="">
        <option value="" v-for="n,i in 10">{{ n }}</option>
      </select> -->
      <!-- <button type="button" class="btn2" @click="echartsUpdate()">搜索</button> -->
    </div>
    <div class="table">
      <span class="detailBack" v-show="showDetailData" @click="showDetailData = false, echartsUpdate()">&lt;&lt; Back</span>
      <div id="myECharts"></div>
      <div class="select">
        (单位：{{ showDetailData ? '小时' : '天' }})
        <!-- <select class="" name="">
          <option value="day">天</option>
          <option value="hours">小时</option>
        </select> -->
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import moment from 'moment'
import _ from 'lodash'
import { bus, requestGetDataAll, requestGetDayDataByChannel } from '@/vuex/request.js'

export default {
  data () {
    return {
      myChart: null,
      option: {},
      startTime: (new Date(moment().format('YYYY-MM-DD'))).getTime() - 1000 * 60 * 60 * 24 * 7,
      endTime: (new Date(moment().format('YYYY-MM-DD'))).getTime(),
      colorList: ['#4FCF94', '#F8656B', '#ffbb22', '#4CB1F5', '#ED1941', '#F47920', '#F173AC', '#5c7a29', '#6950a1', '#cd9a5b'],
      data: [],
      defaultTimeLine: moment(new Date().getTime() - 1000 * 60 * 60 * 24 * 7).format('YYYY/MM/DD') + ' - ' + moment(new Date()).format('YYYY/MM/DD'),
      showDetailData: false
    }
  },
  mounted () {
    // 自定义日历插件
    let self = this
    setTimeout(() => {
      window.$('#selectTimeSegment').DatePicker({
        format: 'Y-m-d',
        mode: 'range',
        date: window.$('#selectTimeSegment').val().replace(/\//g, '-').split(' - '),
        current: moment().format('YYYY/MM/DD'),
        starts: 1,
        position: 'bottom',
        onBeforeShow: function () {
          window.$('#selectTimeSegment').DatePickerSetDate(window.$('#selectTimeSegment').val(), true)
        },
        onChange: function (formated, dates) {
          window.$('#selectTimeSegment').val(formated[0].split('-').join('/') + ' - ' + formated[1].split('-').join('/'))
          if (formated[0] !== formated[1]) {
            self.startTime = dates[0].getTime()
            self.endTime = dates[1].getTime()
            setTimeout(() => {
              window.$('#selectTimeSegment').DatePickerHide()
              self.echartsUpdate()
            }, 500)
          }
        }
      })
    })

    // 初始化 ECharts

    // 基于准备好的dom，初始化echarts实例
    this.myChart = echarts.init(document.getElementById('myECharts'))
    // 指定图表的配置项和数据
    this.option = {
      title: {
        text: '渠道信息数量折线图',
        textStyle: {
          color: '#fff'
        },
        left: 'center',
        top: 10
      },
      tooltip: {},
      toolbox: {
        feature: {
          dataView: {},
          saveAsImage: {
            pixelRatio: 2
          },
          restore: {}
        }
      },
      grid: {
        show: true,
        borderColor: '#515B65',
        left: 60,
        right: 60,
        top: 100
      },
      axisPointer: {
        show: true,
        snap: false,
        triggerTooltip: false,
        lineStyle: {
          type: 'dashed'
        }
      },
      xAxis: {
        type: 'time',
        axisLine: {
          lineStyle: {
            color: '#515B65'
          }
        },
        splitLine: {
          lineStyle: {
            color: '#515B65'
          }
        },
        maxInterval: 3600 * 24 * 1000,
        axisLabel: {
          formatter: (n, i) => {
            return moment(n).format('MM-DD')
          }
        }
      },
      yAxis: {
        type: 'value',
        axisLine: {
          lineStyle: {
            color: '#515B65'
          }
        },
        splitLine: {
          lineStyle: {
            color: '#515B65'
          }
        }
      },
      legend: {
        // data: ['微博', '微信', '网媒'],
        x: 60,
        y: '10%',
        textStyle: {
          color: '#ccc'
        }
        // selected: {
        //   '微博': true,
        //   '微信': true,
        //   '网媒': true
        // }
      },
      series: []
    }
    // 使用刚指定的配置项和数据显示图表。
    setTimeout(() => {
      window.$(window).on('resize', () => { this.myChart.resize() })
    })
    this.echartsUpdate()
  },
  methods: {
    myChartClickEvt (evt) {
      this.myChart.clear()
      this.option.legend.data = []
      this.option.legend.selected = {}
      this.option.series = []
      let data = {
        pt: evt.seriesName,
        start: evt.value[0] - (1000 * 60 * 60 * 24 * 3),
        end: evt.value[0]
      }
      requestGetDayDataByChannel({}, data, (res) => {
        if (res.data) {
          if (res.data.state) {
            this.showDetailData = true
            this.data = res.data.data
            if (!this.data.length) {
              bus.$emit('alert', '返回数据为空！')
              return false
            }
            this.option.legend.data = [this.data[0].pt]
            this.option.legend.selected[this.data[0].pt] = true
            this.option.series.push({
              name: this.data[0].pt,
              type: 'line',
              smooth: true,
              symbolSize: 10,
              itemStyle: {
                normal: {
                  borderWidth: 3,
                  color: evt.color
                }
              },
              lineStyle: {
                normal: {
                  width: 3,
                  color: evt.color
                }
              },
              data: this.data.map((n, i) => {
                return [n.time, n.count]
              })
            })
            this.myChart.setOption(this.option)
            this.myChart.off('click', this.myChartClickEvt)
          } else {
            bus.$emit('alert', res.data.message)
          }
        } else {
          bus.$emit('alert', res + '.')
        }
      })
    },
    echartsUpdate () {
      this.option.legend.data = []
      this.option.legend.selected = {}
      this.option.series = []
      let data = {
        start: this.startTime,
        end: this.endTime
      }
      requestGetDataAll({}, data, (response) => {
        if (response.data) {
          if (response.data.state) {
            this.data = response.data.data
            for (let i = 0; i < this.data.length; i++) {
              this.option.legend.data.push(this.data[i].pt)
              // this.option.legend.selected[this.data[i].pt] = this.data[i].pt.search(/^(微博|微信|网媒)$/) !== -1
              this.option.legend.selected[this.data[i].pt] = i < 3
              this.option.series.push({
                name: this.data[i].pt,
                type: 'line',
                smooth: true,
                symbolSize: 10,
                itemStyle: {
                  normal: {
                    borderWidth: 3,
                    color: this.colorList[i]
                  }
                },
                lineStyle: {
                  normal: {
                    width: 3,
                    color: this.colorList[i]
                  }
                },
                data: _.sortBy(this.data[i].list, (n) => {
                  return moment(n.time)
                }).map((n, i) => {
                  return [n.time, n.count]
                })
              })
            }
            this.myChart.setOption(this.option)
            this.myChart.on('click', this.myChartClickEvt)
          } else {
            bus.$emit('alert', response.data.message)
          }
        } else {
          bus.$emit('alert', response + '.')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.channelDataVue{
  padding: 0 50px;
  max-width: 1600px;
  margin: auto;
  .title{
    padding: 15px 0;
    color: #868D93;
    input, select{
      height: 33px;
      background-color: #282D33;
      border: 1px solid #525A65;
      color: #4F5762;
      text-align: center;
      background-image: url('~static/img/select_01.png');
      background-repeat: no-repeat;
      background-size: contain;
      background-position: right;
      padding-right: 33px;
      margin-right: 20px;
    }
    &>button{
      letter-spacing: 5px;
    }
  }
  .table{
    position: relative;
    .detailBack{
      position: absolute;
      cursor: pointer;
      z-index: 1;
      &:hover{
        text-decoration: underline;
      }
    }
    .select{
      position: absolute;
      right: 10%;
      top: 60px;
      color: #fff;
      select{
        height: 31px;
        background-color: #000;
        border: 1px solid #394048;
        background-image: url('~static/img/select_02.png');
      }
    }
  }
  #myECharts{
    width: 100%;
    height: 620px;
  }
}
</style>
