<template>
  <!--  今日在线服务数据  -->
  <el-card :body-style="{ padding: '10px' }" :style="{height:height}" shadow="hover" class="line_chart">
    <div class="sc_title">
      <h4 class="title">{{ changeName }}</h4>
      <el-radio-group v-model="search_date" size="mini" class="sc_btns" @change="changeDate">
        <el-radio-button label="1">今日</el-radio-button>
        <el-radio-button label="3">本月</el-radio-button>
        <el-radio-button label="4">本年</el-radio-button>
      </el-radio-group>
    </div>
    <div v-loading="loading" ref="lineChart" class="chart"/>
  </el-card>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import { debounce, getNowDate } from '@/utils'
import { getOrderHoursCount } from '@/api/dashboard/orderDatas'
import { getCallHoursCount } from '@/api/dashboard/callDatas'

export default {
  name: 'LineChart',
  props: {
    height: {
      type: String,
      default: '320px'
    },
    autoResize: {
      type: Boolean,
      default: true
    }
  },
  data() {
    const _self = this
    return {
      loading: false,
      chart: null,
      search_date: '1',
      changeName: '今日在线服务数据',
      curentDate: getNowDate() + '(今天)',
      option: {
        xAxis: {
          data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
          boundaryGap: false,
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#5D5D5D'
            }
          }
        },
        grid: {
          left: 10,
          right: 15,
          bottom: 20,
          top: 30,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          padding: [5, 10],
          formatter: function(params) {
            return _self.formatToolTip(params)
          },
          backgroundColor: 'rgba(255, 255, 255, 0.8)',
          borderColor: '#E5EAEB',
          borderWidth: 1,
          textStyle: {
            color: '#333333',
            fontSize: '12px'
          },
          extraCssText: 'width: 212px;'
        },
        yAxis: {
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#5D5D5D'
            }
          }
        },
        legend: {
          data: ['工单量', '已接入会话量', '未接入会话量', '会话总量']
        },
        series: [
          {
            name: '工单量',
            itemStyle: {
              normal: {
                color: '#DA7366',
                lineStyle: {
                  color: '#DA7366',
                  width: 2
                }
              }
            },
            smooth: true,
            type: 'line',
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            animationDuration: 2800,
            animationEasing: 'cubicInOut'
          },
          {
            name: '已接入会话量',
            smooth: true,
            type: 'line',
            itemStyle: {
              normal: {
                color: '#87D3AC',
                lineStyle: {
                  color: '#87D3AC',
                  width: 2
                }
                // 									areaStyle: {
                // 										color: '#f3f8ff'
                // 									}
              }
            },
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            animationDuration: 2800,
            animationEasing: 'quadraticOut'
          },
          {
            name: '未接入会话量',
            smooth: true,
            type: 'line',
            itemStyle: {
              normal: {
                color: '#A9ABAD',
                lineStyle: {
                  color: '#A9ABAD',
                  width: 2
                }
                // 									areaStyle: {
                // 										color: '#f3f8ff'
                // 									}
              }
            },
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            animationDuration: 2800,
            animationEasing: 'quadraticOut'
          },
          {
            name: '会话总量',
            smooth: true,
            type: 'line',
            itemStyle: {
              normal: {
                color: '#619CE2',
                lineStyle: {
                  color: '#619CE2',
                  width: 2
                }
                // 									areaStyle: {
                // 										color: '#f3f8ff'
                // 									}
              }
            },
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            animationDuration: 2800,
            animationEasing: 'quadraticOut'
          }
        ]
      }
    }
  },
  watch: {
  },
  created() {
    this.getDatas(Number(this.search_date))
  },
  mounted() {
    this.initChart()
    if (this.autoResize) {
      this.__resizeHandler = debounce(() => {
        if (this.chart) {
          this.chart.resize()
        }
      }, 100)
      window.addEventListener('resize', this.__resizeHandler)
    }
    // 监听侧边栏的变化
    const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
    sidebarElm.addEventListener('transitionend', this.sidebarResizeHandler)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    if (this.autoResize) {
      window.removeEventListener('resize', this.__resizeHandler)
    }

    const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
    sidebarElm.removeEventListener('transitionend', this.sidebarResizeHandler)

    this.chart.dispose()
    this.chart = null
  },
  methods: {
    sidebarResizeHandler(e) {
      if (e.propertyName === 'width') {
        if (this.__resizeHandler) {
          this.__resizeHandler()
        }
      }
    },
    // 获取话务数据
    getCallData(datetype) {
      return new Promise(resolve => {
        getCallHoursCount(datetype).then(response => {
          if (response.state.toLowerCase() === 'success') {
            resolve(response.data)
          }
        })
      })
    },

    // 获取工单数据
    getOrderData(datetype) {
      return new Promise(resolve => {
        getOrderHoursCount(datetype).then(response => {
          if (response.state.toLowerCase() === 'success') {
            resolve(response.data)
          }
        })
      })
    },

    // 获取数据
    getDatas(datetype) {
      this.loading = true
      this.getCallData(datetype).then(callData => {
        this.getOrderData(datetype).then(orderData => {
          this.loading = false
          // console.log(callData)
          // console.log(orderData)
          if (callData && orderData) {
            const xData = callData.hours.map(v => {
              return (v < 10 ? '0' + v : v) + ':00'
            })
            switch (datetype) {
              case 1:
                this.$set(this, 'curentDate', getNowDate() + ' (今天)')
                this.$set(this, 'changeName', '今日在线服务数据')
                break
              case 3:
                this.$set(this, 'curentDate', getNowDate().substring(0, 7) + ' (本月)')
                this.$set(this, 'changeName', '本月在线服务数据')
                break
              case 4:
                this.$set(this, 'curentDate', getNowDate().substring(0, 4) + ' (本年)')
                this.$set(this, 'changeName', '本年在线服务数据')
                break
            }
            this.option.xAxis.data = xData
            this.option.series[0].data = orderData.counts// 工单量
            this.option.series[1].data = callData.yjrcounts// 已接入会话量
            this.option.series[2].data = callData.wjrcounts// 未接入会话量
            this.option.series[3].data = callData.counts// 会话总量
            this.initChart()
          }
        })
      })
    },
    initChart() {
      this.chart = echarts.init(this.$refs.lineChart, 'macarons')
      this.chart.clear()
      this.chart.setOption(this.option)
    },
    changeDate(v) {
      this.getDatas(Number(v))
    },
    formatToolTip(params) {
      let result = `<ul style="list-style: none; margin: 0; padding: 0">
												<li class="clearfix">
													<span style="float: left; margin: 8px 0;">${this.curentDate}</span>
													<span style="float: right; margin: 8px 0;">${params[0].name}</span>
												</li>`
      params.forEach(function(item) {
        result += `<li class="clearfix">
												<span style="float: left; margin-bottom: 6px">${item.seriesName}</span>
												<span style="float: right; margin-bottom: 6px; background-color: ${item.color}; padding: 0 5px; border-radius: 5px; color: #fff;">${item.data}</span>
											</li>`
      })
      result += `</ul>`
      return result
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	.line_chart {
		width: 100%;
		.sc_title {
			position: relative;
			.title {
				color: #333333;
				font-size: 14px;
				margin: 7px 0;
				padding: 0;
				font-weight: 500;
			}
			.sc_btns {
				position: absolute;
				right: 0;
				top: -7px;
			}
		}

		.chart {
			margin-top: 10px;
			width: 100%;
			height: 300px;
		}
	}
</style>
