<template lang="html">
  <div class="mystyle" style="display: inline-block;">
    <label class="font_normal_body">图表统计项</label>
  <v-select style="width:60%" id="groupname" v-model="groupname"
            placeholder='分组项'
            value-single="true"
            :value.sync="groupname"
            :options='getgroupname'
            close-on-select></v-select>
  </div>
  <div>
    <div id="signInfo"></div>
  </div>
</template>

<script>
  import * as Util from '../../../Util'
  import co from 'co'
  import echarts from 'echarts'
  import {HttpResetClass} from 'vue-client'

  let getData = function* (self, condition) {
    let load = new HttpResetClass()
    console.log("con:" + self.groupname)
    load.load('POST', 'rs/sql/selectSignAnalysis',
      {
        data: {
          condition: condition, groupname: self.groupname[0], startDate: self.startdate,
          endDate: self.enddate
        }
      },
      {resolveMsg: null, rejectMsg: null})
      .then((res) => {
        let arrparams = []
        // let gasdata = []
        let gettip = []
        for (var i = 0; i < res.data.length; i++) {
          arrparams[i] = res.data[i].f_parameter_date
          gettip[i] = res.data[i].f_parameter_name
        }
        console.log("res" + res.data)
        gettip = uniqueArray(gettip);
        arrparams = uniqueArray(arrparams);
        self.set(arrparams, res.data, gettip)
        console.log("tip", gettip)
      })
  }

  function selectArray(res, str) {
    var j = 0;
    var sum = 0;
    var data = []
    //上一轮是否在data中添加成功
    var mark = false
    for (var i = 0; i < res.length; i++) {
      if (i != 0) {
        if (res[i].f_parameter_date == res[i - 1].f_parameter_date) {
          if (res[i].f_parameter_name == str) {
            data[j] = res[i].s
            mark = true;
            j++;
          }
        } else {
          if (!mark) {
            data[j] = 0;
            j++;
            mark = true
          }
          if (res[i].f_parameter_name == str) {
            data[j] = res[i].s
            mark = true;
            j++;
          } else {
            mark = false;
          }
        }
      } else {
        if (res[i].f_parameter_name == str) {
          data[j] = res[i].s
          mark = true;
          j++;
        } else {
          mark = false;
        }
      }
      if (i == res.length - 1 && !mark) {
        data[j] = 0;
      }
    }
    console.log("我" + data)
    return data;
  }

  function uniqueArray(data) {
    data = data || [];
    var a = {};
    for (var i = 0; i < data.length; i++) {
      var v = data[i];
      if (typeof (a[v]) == 'undefined') {
        a[v] = 1;
      }
    }
    data.length = 0;
    for (var i in a) {
      data[data.length] = i;
    }
    console.log("data" + data)
    return data;
  }

  export default {
    props: {
      echarts: {
        type: Boolean,
        default:false
      },
      startdate: {
        type: String,
        default: Util.toStandardDateString()
      },
      enddate: {
        type: String,
        default: Util.toStandardDateString()
      },
      condition: {
        type: String,
        default: '1=1'
      }
    },
    data() {
      title: '业务类型'
      return {
        groupname: ['year'],
        getgroupname: [
          {label: '年份', value: 'year'},
          {label: '月份', value: 'month'},
          {label: '周', value: 'week'},
          {label: '日', value: 'day'}
        ],
        condition: '',
        xc: '',
        timer: 0,//定时器
        height: 0,
        width: 0
      }
    },
    ready(){
      console.log(this.groupname[0]+"==="+this.echarts)
    },
    methods: {
      set(arrparams, res, gettip) {
        let name = ''
        if (this.groupname[0] === 'year') {
          name = '年'
        } else if (this.groupname[0] === 'month') {
          name = '月'
        } else if (this.groupname[0] === 'week') {
          name = '周'
        } else {
          name = '日'
        }
        var series = [];
        for (var i = 0; i < gettip.length; i++) {
          series.push({
            name: gettip[i],
            type: 'bar',
            data: selectArray(res, gettip[i])
          });
        }
        this.xc = echarts.init(document.getElementById('signInfo'))
        this.xc.setOption({
          title: {
            text: '标记' + name + '分析图',
            'left': 'center',
            'y': '10',
            textStyle: {
              color: '#000',
              fontSize: 20
            }
          },
          'tooltip': {
            'trigger': 'axis',
            'extraCssText': 'width: auto;height: auto;'
          },
          toolbox: {
            show: true,
            feature: {
              dataView: {show: true, readOnly: false},
              magicType: {show: true, type: ['line', 'bar']},
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          calculable: true,
          legend: {
            x: 'left', //靠左
            data: gettip //这里要与下面的name对应
          },
          xAxis: [
            {
              name: '日期',
              nameTextStyle: {
                fontSize: 15
              },
              type: 'category',
              data: arrparams,
              axisLabel: {
                show: true,
                textStyle: {
                  fontSize: 15
                }
              }
            }
          ],
          yAxis: [
            {
              'type': 'value',
              name: '标记个数',
              nameTextStyle: {
                fontSize: 15
              },
              'show': true,
              axisLabel: {
                show: true,
                textStyle: {
                  fontSize: 15,
                  'color': '#7d8000'
                }
              }
            }
          ],
          series: series
        })
      },
      searchdata(condition) {
        console.log(this.groupname[0])
        let getGen = getData(this, condition)
        co(getGen)
      }
    },
    watch: {
      'echarts'(val){
        this.searchdata(this.condition)
      },
      'groupname'(val) {
        this.searchdata(this.condition)
      }
    }
  }
</script>

<style scoped>
  #signInfo {
    height: 98%;
    width: 98%;
    padding: 1% 1%;
  }
</style>
