<template>
  <div class="sub-trend-block">
    <div>
      <div class="subTitle">数据统计</div>

      <div class="sub-trend-radio">
        <el-radio v-model="analysisType" label="today">今日</el-radio>
        <el-radio v-model="analysisType" label="week">最近7日</el-radio>
        <el-radio v-model="analysisType" label="month">最近30日</el-radio>
      </div>

      <div class="sub-trend-timepicker">
        <el-date-picker
          v-model="dateRange"
          :picker-options="{'firstDayOfWeek': 1}"
          popper-class="test_class"
          size="small"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="changeDatePicker"/>
      </div>
    </div>

    <div class="chart-container">
      <div ref="chart" class="chart-body" />
    </div>
  </div>

<!--  <el-row :gutter="20" style="padding: 20px;">-->
<!--    <el-col :span="24">-->
<!--      <div class="subTitle">数据统计</div>-->
<!--    </el-col>-->

<!--    <el-col :span="24">-->
<!--      <div class="panelCorners">-->
<!--        <div style="padding: 15px; text-align: left; display: inline-block;">-->
<!--          <el-radio-group v-model="analysisType" size="small" @change="changeTimeTerm()">-->
<!--            <el-radio-button label="today">今日</el-radio-button>-->
<!--            <el-radio-button label="week">最近7日</el-radio-button>-->
<!--            <el-radio-button label="month">最近30日</el-radio-button>-->
<!--          </el-radio-group>-->

<!--          <el-date-picker-->
<!--            v-model="dateRange"-->
<!--            :picker-options="{'firstDayOfWeek': 1}"-->
<!--            size="small"-->
<!--            type="daterange"-->
<!--            range-separator="至"-->
<!--            start-placeholder="开始日期"-->
<!--            end-placeholder="结束日期"-->
<!--            @change="changeDatePicker"/>-->
<!--        </div>-->

<!--        <div class="chart-container">-->
<!--          <div ref="chart" class="chart-body" />-->
<!--        </div>-->
<!--      </div>-->
<!--    </el-col>-->
<!--  </el-row>-->
</template>
<script>
import echarts from 'echarts'
import request from '@/utils/request'
import { formatToString, getDate } from '@/utils/calendarUtil'
export default {
  name: 'TrendPanel',
  data() {
    return {
      dateShortcuts: {
        today: '', // 今日日期字符串
        lastWeek: '', // 7日前日期字符串
        lastMonth: '' // 30日前日期字符串
      },
      analysisType: 'today', // 数据统计区间快捷键
      dayDiff: '0', // 日期差，用于显示图表的tooltip；7天以内
      dateRange: '', // 时间范围
      xDatas: [], // 横轴
      collectDatas: [], // 采集统计数据
      checkDatas: [] // 识别统计数据
    }
  },
  watch: {
    analysisType() {
      this.changeTimeTerm()
    }
  },
  mounted() {
    this.initDateShortcuts()
  },
  methods: {
    initDateShortcuts() {
      const now = new Date()
      this.dateShortcuts.today = formatToString(now, 'DATE')
      this.dateShortcuts.lastWeek = getDate(-6, 'DATE')
      this.dateShortcuts.lastMonth = getDate(-29, 'DATE')

      this.changeTimeTerm()
    },
    initChart() {
      this.chart = echarts.init(this.$refs.chart)
      this.chart.setOption({
        grid: { // 画布属性
          left: '50px',
          top: '10px'
        },
        legend: { // 图例属性
          bottom: 0, // 右上方显示
          icon: 'rect', // 方块样式
          textStyle: { // 字体大小和颜色
            color: '#FFFFFF',
            fontSize: 18,
            fontFamily: 'Microsoft YaHei'
          },
          data: ['识别人数', '采集人数']
        },
        tooltip: { // 提示框属性
          trigger: 'axis', // 坐标轴触发
          backgroundColor: '#0094FF', // 提示框背景色
          axisPointer: {
            type: 'line',
            lineStyle: {
              color: '#FFFF00',
              width: 2
            }
          }
        },
        xAxis: [
          {
            type: 'category',
            data: this.xDatas,
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              // rotate: 90,
              fontSize: 10,
              color: '#fff'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              fontSize: 10,
              color: '#fff'
            },
            splitLine: {
              show: false
            }
          }
        ],
        color: [
          '#016FE2', '#02FEFF',
          '#0067a6', '#c4b4e4',
          '#d87a80', '#9cbbff', '#d9d0c7',
          '#87a997', '#d49ea2', '#5b4947',
          '#7ba3a8', '#19d4ae', '#ffb980'
        ],
        series: [
          {
            name: '识别人数',
            type: 'line',
            data: this.checkDatas,
            animationDelay: function(idx) {
              return idx * 10
            }
          },
          {
            name: '采集人数',
            type: 'line',
            data: this.collectDatas,
            animationDelay: function(idx) {
              return idx * 10
            }
          }
        ],
        animationEasing: 'elasticOut',
        animationDelayUpdate: function(idx) {
          return idx * 5
        }
      })
      this.chart.resize()
    },
    // 切换时间快捷键
    changeTimeTerm() {
      if (this.analysisType === 'today') {
        this.dateRange = [this.dateShortcuts.today, this.dateShortcuts.today]
      } else if (this.analysisType === 'week') {
        this.dateRange = [this.dateShortcuts.lastWeek, this.dateShortcuts.today]
      } else if (this.analysisType === 'month') {
        this.dateRange = [this.dateShortcuts.lastMonth, this.dateShortcuts.today]
      }

      this.queryDataAnalysis()
    },
    // 自定义选择时间段
    changeDatePicker() {
      const start = formatToString(this.dateRange[0].valueOf(), 'DATE')
      const end = formatToString(this.dateRange[1].valueOf(), 'DATE')
      if (end !== this.dateShortcuts.today) {
        this.analysisType = 'other'
      } else {
        if (start === this.dateShortcuts.today) {
          this.analysisType = 'today'
        } else if (start === this.dateShortcuts.lastWeek) {
          this.analysisType = 'week'
        } else if (start === this.dateShortcuts.lastMonth) {
          this.analysisType = 'month'
        } else {
          this.analysisType = 'other'
        }
      }

      this.queryDataAnalysis()
    },
    // 向后台查询数据统计结果
    queryDataAnalysis() {
      request({
        url: '/bigScreen/getDataAnalysis',
        method: 'post',
        params: {
          analysisType: this.analysisType,
          startDate: formatToString(this.dateRange[0].valueOf(), 'DATE'),
          endDate: formatToString(this.dateRange[1].valueOf(), 'DATE')
        }
      }).then(response => {
        console.log(response)
        if (response.code === 200) {
          // 查询有新结果时清除原有的列表
          this.xDatas = []
          this.collectDatas = []
          this.checkDatas = []
          if (response.data.length > 0) {
            response.data.forEach(item => {
              this.xDatas.push(item.analysisDate)
              this.collectDatas.push(item.colNum)
              this.checkDatas.push(item.recNum)
            })
          }
          this.initChart()
        }
      })
    }
  }
}
</script>

<style scoped>
  .sub-trend-block {
    border: 2px solid #3370E3;
    background-color: rgba(41, 85, 252, 0.2);
    margin: 20px 20px 0px 20px;
    width: calc(100vw - 40px);
    height: 320px;
  }

  .subTitle {
    font-weight: bold;
    font-family: '微软雅黑',serif;
    color: #fff;
    font-size: 24px;
    padding: 10px 10px 10px 30px;
    background: url("images/sub-title-background.png") no-repeat;
    float: left;
    width: 400px;
  }

  .sub-trend-radio {
    padding: 10px 0 5px 0;
    text-align: left;
    float: left;
  }

  .sub-trend-radio >>> .el-radio__label {
    color: #FFFFFF;
  }

  .sub-trend-timepicker {
    padding: 5px;
    margin-left: 50px;
    text-align: left;
    float: left;
  }
  .sub-trend-timepicker >>> .el-input__inner {
    background: none;
    border-radius: 0px;
    border: 1px solid #3370E3;
  }
  .sub-trend-timepicker >>> .el-date-editor .el-range-input {
    background: none;
    color: #FFFFFF;
    font-size: 18px;
  }
  .sub-trend-timepicker >>> .el-range-separator {
    color: #FFFFFF;
    font-size: 18px;
  }

  .chart-container{
    text-align: center;
    display: block;
    margin-top: 60px;
  }
  .chart-body {
    min-height: 240px;
    width: calc(100vw - 40px);
    /*margin-right: auto;*/
    /*margin-left: auto;*/
  }

  @media(max-width: 1440px) {
    .sub-trend-block {
      margin: 15px 18px 0px 18px;
      width: calc(100vw - 36px);
      height: 285px;
    }

    .subTitle {
      font-size: 20px;
      padding: 9px 9px 9px 24px;
    }

    .chart-container{
      text-align: center;
      display: block;
      margin-top: 42px;
    }
    .chart-body {
      min-height: 235px;
      width: calc(100vw - 36px);
    }
  }

  @media(max-width: 1366px) {
    .sub-trend-block {
      margin: 12px 16px 0px 16px;
      width: calc(100vw - 32px);
      height: 240px;
    }

    .subTitle {
      font-size: 16px;
      padding: 8px 8px 8px 20px;
    }

    .sub-trend-timepicker {
      padding: 2px;
      margin-left: 30px;
    }
    .sub-trend-timepicker >>> .el-date-editor .el-range-input {
      background: none;
      color: #FFFFFF;
      font-size: 14px;
    }
    .sub-trend-timepicker >>> .el-range-separator {
      color: #FFFFFF;
      font-size: 14px;
    }

    .chart-container{
      text-align: center;
      display: block;
      margin-top: 36px;
    }
    .chart-body {
      min-height: 180px;
      width: calc(100vw - 32px);
    }
  }
</style>

<style rel="stylesheet/scss" lang="scss" >
  .test_class{
    border: 0px;
    border-radius: 0px;
    .el-picker-panel__body-wrapper{
      .el-picker-panel__body{
        color: #FFFFFF;
        background-color: #016FE2; /* 整体背景色 */
        border-radius: 0px;
        .el-date-table th {
          color: #FFFFFF;
        }
        .el-picker-panel__icon-btn {
          color: #FFFFFF;
        }
        .el-date-table td.start-date span, .el-date-table td.end-date span {
          background-color: #02FEFF;
          color: #333333;
        }
        .el-date-table td.in-range div {
          /*background-color: #016FE2; !* 选中背景色 *!*/
          background-color: #3695FF; /* 选中背景色 */
        }
        .el-date-table td div {
          padding: 0px;
        }
        .el-date-table td span {
          width: 30px;
          height: 30px;
          line-height: 30px;
        }
        .el-date-table td.today span {
          color: #333333;
          font-size: 1.2em;
        }
      }
    }
  }
</style>
