<template>
  <div>
    <div class="label">销售额往年同比分析</div>
    <div id="saleproportion" class="d1"></div>
  </div>
</template>

<script>
  import * as Util from '../../../stores/Util'
  import * as DataSql from '../../../stores/DataSql'
  import co from 'co'

  export default {
    name: "sale-proportion",
    props: {
      listenheight: String,
    },
    data() {
      return {
        xc: '',
        newyeardata: [],
        oldyeardata: [],
        year: '',
        usertag3: false,
        resdata: [],
        resdataold: []
      }
    },
    methods: {
      setBar() {
        this.xc = this.$echarts.init(document.getElementById('saleproportion'))
        var scale = 0.8
        var xAxisData = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '', ''];

        var legendData = ["" + eval(this.year + '-0'), "" + eval(this.year + '-1')];
        var serieData = [];
        var metaDate = [];
        let data0 = []
        let data1 = []
        // for(var i=this.newyeardata.length-1;i>-1;i--){
        //   data0.push(this.newyeardata[i].value)
        //   data1.push(this.oldyeardata[i].value)
        // }
        for (var i = 0; i < 12; i++) {
          var l = false
          for (var j = 0; j < this.newyeardata.length; j++) {
            if (xAxisData[i] == this.newyeardata[j].name) {
              l = true
              data0.push(this.newyeardata[j].value)
              break
            }
          }
          if (!l) {
            data0.push(0)
          }
        }
        for (var i = 0; i < 12; i++) {
          var l = false
          for (var j = 0; j < this.oldyeardata.length; j++) {
            if (xAxisData[i] == this.oldyeardata[j].name) {
              l = true
              data1.push(this.oldyeardata[j].value)
              break
            }
          }
          if (!l) {
            data1.push(0)
          }
        }
        // data0.push(this.newyeardata)
        // data1.push(this.oldyeardata)

        metaDate.push(data0)
        metaDate.push(data1)
        for (var v = 0; v < legendData.length; v++) {
          var serie = {
            name: legendData[v],
            type: 'line',
            symbol: "circle",
            symbolSize: 5 * scale,
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 1,
                  shadowBlur: 10 * scale,
                  shadowOffsetY: 15 * scale,
                }
              }
            },
            data: metaDate[v]
          }
          serieData.push(serie)
        }
        var colors = ["#f7cb32", "#6fd9d0"];
        var xname = '      月份\n(' + eval(this.year + '-1') + '-' + eval(this.year + '-0') + ')'
        this.xc.setOption({
          title: {
            text: '',
            textAlign: 'left',
            textStyle: {color: "#FFFFFF", fontSize: 12 * scale, fontWeight: "normal"}
          },
          legend: {
            itemGap: 0,
            width: '90%',
            show: true,
            left: "right",
            data: legendData,
            y: 'top',
            // padding: [0, 25*scale, 0, 0],
            itemWidth: 14 * scale,
            itemHeight: 6 * scale,
            textStyle: {width: '20%', color: "#15dce2", fontSize: 12 * scale},
            formatter: function (params) {
              return params + "年"
            }
          },
          color: colors,
          grid: {left: '5%', top: "18%", bottom: "5%", right: "5%", width: '88%', height: '64%', containLabel: true},
          tooltip: {
            formatter: function (params) {
              if (params[0].axisValue == '') {
                return ''
              }
              var result = ''
              params.forEach(function (item) {
                var s = item.value
                var sary = s.toString().split('.')
                var l = 3
                for (var i = sary[0].toString().length - 1; i > -1; i--) {
                  if (sary[0].toString().length - i == l) {
                    if (i == 0) {
                      continue
                    }
                    sary[0] = sary[0].slice(0, i) + ',' + sary[0].slice(i, sary[0].toString().length)
                    l = l + 4
                  }
                }
                var valueresult = ''
                if (sary.length > 1) {
                  valueresult = sary[0] + '.' + sary[1]
                } else {
                  valueresult = sary[0]
                }

                result += item.marker + " " + item.seriesName + "年 : " + valueresult + "</br>";
              });
              return params[0].axisValue + '月份<br/>' + result
            },
            trigger: 'axis',
            extraCssText: 'width: auto;height: auto;',
            axisPointer: {lineStyle: {width: 0}},
          },
          xAxis: [
            {
              name: xname,
              type: 'category',
              nameTextStyle: {
                fontSize: 12 * scale,
                color: '#15dce2',
                padding: [38, 0, 0, -80 * scale],
              },
              axisLine: {show: true, lineStyle: {color: '#04669e', width: 1}},
              axisLabel: {interval: 0, textStyle: {color: '#ffffff', fontSize: 14 * scale}},
              axisTick: {show: false},
              data: xAxisData,
            },
          ],
          yAxis: [
            {
              name: '金额/元',
              nameTextStyle: {
                fontSize: 14 * scale,
                padding: [0, 35 * scale, 0, 0],
              },
              axisTick: {show: false},
              splitLine: {show: true, lineStyle: {type: 'dashed', color: '#004371'}},
              axisLabel: {
                textStyle: {color: '#15dce2', fontSize: 14 * scale}, formatter: function (params) {
                  if (params > 999) {
                    return params / 10000 + "万"
                  }
                  // else if(params>999){
                  //    return params/10000+"万"
                  //  }
                  else
                    return params
                }
              },
              axisLine: {show: false, lineStyle: {color: '#15dce2', fontSize: 14 * scale}},
            },
          ],
          series: serieData
        })
      },
      linesql(year, resultname) {
        // 拼接sql，请求后台
        let sqldata = DataSql.getData(this,  'salegas',{startDate:year}, resultname)
        co(sqldata)
      },
      datapress(data, parm) {
        console.log(data, parm, '销售同比数据')
        var year = ''
        if (parm == 'newyeardata') {
          year = this.year
        }
        if (parm == 'oldyeardata') {
          year = eval(this.year + '-1')
        }
        var month = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
        for (var i = 0; i < 12; i++) {
          let item = {}
          var l = 0
          for (var j = 0; j < data.length; j++) {
            if (year + '-' + month[i] == data[j].name) {
              l++
              item.name = month[i]
              item.value = data[j].value
              this[parm].push(item)
            }
          }
          if (l == 0) {
            item.name = month[i]
            item.value = 0
            this[parm].push(item)
          }
        }
      },
      resize() {
        // this.$parent.$parent.changeresize(this.xc)
      }
    },
    watch: {
      'resdataold': {
        deep: true,
        handler(val) {
          this.datapress(this.resdataold, "oldyeardata")
        }
      },
      'resdata': {
        deep: true,
        handler(val) {
          this.datapress(this.resdata, "newyeardata")
        }
      },
      // 监听用户数据并进行绘图
      'newyeardata': {
        deep: true,
        handler(val) {
          if (this.newyeardata.length > 0 && this.oldyeardata.length > 0) {
            this.setBar()
            this.$parent.loaddata++
          }
        }
      },
      // 监听用户数据并进行绘图
      'oldyeardata': {
        deep: true,
        handler(val) {
          if (this.newyeardata.length > 0 && this.oldyeardata.length > 0) {
            this.setBar()
            this.$parent.loaddata++
          }
        },
        immediate: true
      },
      //监听浏览器大小变化
      'listenheight': {
        deep: true,
        handler(val) {
          if (this.listenheight !== '') {
            // this.$parent.$parent.changeresize(this.xc)
          }
        },
      }
    },
    ready() {
      // this.setBar()
      this.year = Util.toStandardDateString()
      this.year = this.year.toString().substring(0, 4)
      this.linesql(this.year, "resdata")
      this.linesql(eval(this.year + '-1'), "resdataold")
    }
  }
</script>

<style scoped>
  .label {
    margin-left: 6%;
    font-size: 0.85em;
    color: #fff;
    width: 100%;
    height: 9%;
  }

  .callstatic {
    /*padding: 0% 1%;*/
  }

  .d1 {

  }

  #call {
    height: 88%;
    width: 99%;
    padding: 1% 2% 3% 2%;

  }
</style>
