<template>
  <div>
    <el-card>
      <el-radio v-model="salesVolume" label="1">销售额</el-radio>
      <el-radio v-model="salesVolume" label="2">销售量</el-radio>
      <el-select v-model="selectStateValue" style="width: 150px" size="small" multiple placeholder="选择省份" @change="getProductItemValue1">
        <el-option
          v-for="item in selectState"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
      <el-date-picker
        v-model="selectionTimeValue"
        :picker-options="pickerOptions"
        value-format="yyyy-MM"
        type="monthrange"
        align="right"
        size="small"
        style="width: 260px"
        unlink-panels
        range-separator="~"
        start-placeholder="开始月份"
        end-placeholder="结束月份"/>
      <span style="margin-left: 50px;font-size: 20px;font-weight: bold">{{ TitlesDrawings }}</span>
      <div id="myChart3" style="width: 1500px;height: 800px;text-align: center"/>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import * as echarts from 'echarts'
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '本月',
          onClick(picker) {
            picker.$emit('pick', [new Date(), new Date()])
          }
        }, {
          text: '今年至今',
          onClick(picker) {
            const end = new Date()
            const start = new Date(new Date().getFullYear(), 0)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近六个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setMonth(start.getMonth() - 6)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一年',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setMonth(start.getMonth() - 12)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近两年',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setMonth(start.getMonth() - 24)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三年',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setMonth(start.getMonth() - 36)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      salesVolume: '2',
      TitlesDrawings: '',
      yName: '',
      salesVolume_check: 0,
      selectStateValue: '',
      selectStateValue_check: 0,
      selectState: [],
      legend: [],
      saleData: [],
      selectionTimeValue: '',
      selectionTimeValue_check: 0
    }
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'name',
      'id'
    ])
  },
  watch: {
    salesVolume() {
      this.changeTitlesDrawings()
      this.getProductItemValue1()
    },
    selectionTimeValue() {
      this.getProductItemValue1()
    }
  },
  created() {
    this.changeTitlesDrawings()
    this.getProvince()
  },
  methods: {
    getProvince() {
      var param = []
      var Data = this.CreateData('11', '省份信息_查询数据', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.selectState.push({
            label: response.data[i].省份,
            value: response.data[i].省份流水号
          })
        }
      })
    },
    changeTitlesDrawings() {
      if (this.salesVolume === '2') {
        // 这里写的是 当按钮选择与不选择时 表格的 表头以及表格y轴名称的变化
        this.TitlesDrawings = '各省销售量趋势图'
        this.yName = '销售量'
      } else {
        this.TitlesDrawings = '各省销售额趋势图'
        this.yName = '销售额'
      }
    },
    getProductItemValue1() {
      if (this.selectionTimeValue) {
        if (this.salesVolume === '2') {
          this.salesVolume_check = 0
        } else {
          this.salesVolume_check = 1
        }
        console.log(this.selectStateValue, 2222)
        if (this.selectStateValue && this.selectStateValue.length > 0) {
          this.selectStateValue_check = 1
        } else {
          this.selectStateValue_check = 0
        }
        this.selectionTimeValue ? this.selectionTimeValue_check = 1 : (this.selectionTimeValue_check = 0, this.selectionTimeValue = '')
        var param1 = []
        param1[0] = ['省份_check', this.selectStateValue_check]
        param1[1] = ['省份', this.selectStateValue]
        param1[2] = ['开始时间', this.selectionTimeValue[0]]
        param1[3] = ['结束时间', this.selectionTimeValue[1]]
        var Data1 = this.CreateData('11', 'jy_区域销量分析_省份_查询', param1)
        this.ExecDatabase(Data1).then(response => {
          this.legend = []
          if (response.data.length > 0) {
            for (let i = 0; i < response.data.length; i++) {
              this.legend.push(response.data[i].省份)
            }
          }
        }).then(() => {
          this.saleData = []
          var param = []
          param[0] = ['销售额_check', this.salesVolume_check]
          param[1] = ['省份_check', this.selectStateValue_check]
          param[2] = ['时间_check', this.selectionTimeValue_check]
          param[3] = ['省份', this.selectStateValue]
          param[4] = ['开始时间', this.selectionTimeValue[0]]
          param[5] = ['结束时间', this.selectionTimeValue[1]]
          var Data = this.CreateData('11', 'jy_区域销量分析_查询', param)
          this.ExecDatabase(Data).then(response => {
            if (response.data.length > 0) {
              for (let j = 0; j < this.legend.length; j++) {
                this.xdata = []
                this.ydata = []
                for (let i = 0; i < response.data.length; i++) {
                  this.xdata.push(response.data[i].签订日期月)
                  if (!this.downdate) {
                    this.downdate = 0
                  }
                  this.ydata.push(response.data[i][this.legend[j]])
                }
                var s_temp = {
                  name: this.legend[j],
                  type: 'line',
                  symbol: 'none',
                  markLine: {
                    // markline表示是柱形图之外的折线图 它的数据和柱形图是一样的都来子this.ydata
                    lineStyle: {
                      normal: {
                        type: 'dashed'
                      }
                    }
                  },
                  data: this.ydata
                }
                this.saleData.push(s_temp)
              }
            }
          }).then(() => {
            this.drawLine1()
          })
        })
      } else {
        this.$message.warning('请先选择日期')
      }
    },
    drawLine1() {
      this.myChart3 = echarts.init(document.getElementById('myChart3'))
      // 绘制图表
      this.myChart3.clear()
      const _this = this
      this.myChart3.setOption({
        tooltip: {
          trigger: 'axis'
        },
        xAxis: [{
          axisLabel: {
            interval: 0,
            rotate: 0,
            formatter: function(value) {
              return value.split(' ').join('\n')
            }
          },
          name: '日期',
          type: 'category',
          data: this.xdata
        }],
        yAxis: [{
          name: this.yName,
          type: 'value',
          max: function(value) {
            return _this.update > value.max ? 1.2 * _this.update : 1.2 * value.max
            // 这里写的是y轴的最大值为提取数据中最大值的1.2倍
          }
        }],
        dataZoom: [{
          type: 'inside',
          start: 0,
          end: 100,
          xAxisIndex: [0],
          filterMode: 'none'
        }, {
          show: true,
          type: 'slider',
          top: '85%',
          // orient: 'horizontal',
          // backgroundColor: 'red',
          // xAxisIndex: [0],
          zoomLock: true,
          start: 0,
          end: 20
        }],
        series: this.saleData,
        grid: {
          left: '3%',
          right: '6%',
          bottom: '20%',
          containLabel: true
        },
        legend: {
          data: this.legend,
          x: 'center',
          y: 'bottom',
          icon: 'roundRect',
          itemHeight: 3,
          itemWidth: 25
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
