<template lang="html">
  <div id="charts">
    <label for="startDate">查询日期:</label>
    <datepicker id="startDate" placeholder="开始日期"
                v-model="model.startDate"
                :value.sync="model.startDate"
                :disabled-days-of-Week="[]"
                :format="'yyyy-MM-dd 00:00:00'"
                :show-reset-button="reset">
    </datepicker>
    <label for="endDate">比对日期:</label>
    <datepicker id="endDate" placeholder="结束日期"
                v-model="model.endDate"
                :value.sync="model.endDate"
                :disabled-days-of-Week="[]"
                :format="'yyyy-MM-dd 23:59:59'"
                :show-reset-button="reset">
    </datepicker>
    <label for="operator" class="control-label">区域</label>
    <v-select :value.sync="model.operator" v-model="model.operator"
              :options='operator' placeholder='区域'
              default-value="['']"
              close-on-select></v-select>
    <label for="outlokes" class="control-label">分公司</label>
    <v-select :value.sync="model.outlokes" v-model="model.outlokes"
              :options='outlokes' placeholder='分公司'
              default-value="['']"
              close-on-select></v-select>
    <label for="gastype" class="control-label">供气方式</label>
    <v-select :value.sync="model.gastype" v-model="model.gastype"
              :options='gastype' placeholder='供气方式'
              default-value="['']"
              close-on-select></v-select>
    <button @click ="searchdata()">查询</button>
    <div id="SCRTTRO" :style="{width:'100%',height:'100%'}">
    </div>
  </div>
</template>
<script>
  //import * as Util from '../Util'
  import co from 'co'
  import echarts from 'echarts'
  import { HttpResetClass } from 'vue-client'
  import AppData from '../../stores/AppData'

  let getData = async function(self){
    let res = await self.$resetpost('rs/sql/getMouthNum',{data: {startDate:self.model.startDate,endDate:self.model.endDate,operator:self.model.operator[0],outlokes:self.model.outlokes[0],gastype:self.model.gastype[0]}})
    console.log(res)
    self.set(data,legend)
  }

  export default {
    title: "饼状图显示用气量比例",
    // props: {
    //   startdate: {
    //     type: String,
    //     default: startDate
    //   },
    //   enddate: {
    //     type: String,
    //     default: endDate
    //   }
    // },
    data () {
      return {
        texttile: '',
        xc: '',
        model:{}
      }
    },
    methods: {
      set (data,xdata) {
        this.xc = echarts.init(document.getElementById('SCRTTRO'))
        // app.title = '嵌套环形图';
        this.xc.setOption(
          {
            grid: {
              left: 30,
              right: 50,
              top: 50,
              bottom: 30,
              containLabel: true
            },
            xAxis: {
              type: 'category',
              // boundaryGap: false,
              data: xdata,
              triggerEvent: true,
              splitLine: {
                show: false
              },
              axisLine: {
                show: true,
                lineStyle: {
                  width: 2,
                  color: 'rgba(255,255,255,.6)'
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                color: '#fff',
                fontSize: 16,
                fontWeight: 'bold',
                textShadowColor: '#000',
                textShadowOffsetY: 2
              }
            },
            yAxis: {
              name: '电话量',
              nameTextStyle: {
                color: '#fff',
                fontSize: 16,
                textShadowColor: '#000',
                textShadowOffsetY: 2
              },
              type: 'value',
              splitLine: {
                show: true,
                lineStyle: {
                  color: 'rgba(255,255,255,.2)'
                }
              },
              axisLine: {
                show: true,
                lineStyle: {
                  width: 2,
                  color: 'rgba(255,255,255,.6)'
                }
              },
              axisTick: {
                show: true
              },
              axisLabel: {
                color: '#fff',
                fontSize: 16,
                textShadowColor: '#000',
                textShadowOffsetY: 2
              }
            },
            series: [{
              data: data,
              type: 'line',
              symbol: 'circle',
              symbolSize: 12,
              color: '#FEC201',
              lineStyle: {
                color: "#03E0F2"
              },
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#FEC201',
                  fontSize: 18,
                  fontWeight: 'bold'
                }
              },
              areaStyle: {
                color: 'rgba(1,98,133,0.6)'
              }
            }, {
              type: 'bar',
              animation: false,
              barWidth: 3,
              hoverAnimation: false,
              data: data,
              tooltip: {
                show: false
              },
              itemStyle: {
                normal: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0,
                      color: '#91EAF2' // 0% 处的颜色
                    }, {
                      offset: 1,
                      color: '#074863' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                  },
                  label: {
                    show: false
                  }
                }
              }
            }]
          }
        )
      },
      searchdata () {
        console.log("开始时间"+this.model.startDate)
        //let getGen =getData(this)
        //co(getGen)
        getData(this)
      }
    },
    ready () {
      console.log("已经加载完成")
      var data = [222, 168, 271, 300, 400, 330, 290];
      var xdata = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
      this.set(data,xdata)
      //this.searchdata()
    },
    watch: {
      'startdate' (val) {
        this.searchdata()
      },
      'enddate' (val) {
        this.searchdata()
      }
    },
    computed: {
      // outlets () {
      //   return [{label: '全部', value: ''}, ...AppData.getParam('营业网点')]
      // },
      operator () {
        //return [{label: '全部', value: ''}, ...AppData.getParam('分公司')]
        //return this.$getParams('用户区域', [{label: '全部', value: ''}])  2
        // return this.$getParams('分公司', '')     3
        //return this.$getParams('用户区域', '')
        return this.$getParams('用户区域', [{label: '全部', value: ''}])
      },
      outlokes(){
        //return [{label: '全部', value: ''}, ...AppData.getParam('分公司')]
        //return this.$getParams('分公司', [{label: '全部', value: ''}])
        //return this.$getParams('分公司', '')
        return this.$getParams('分公司', [{label: '全部', value: ''}])
      },
      gastype(){
        //return this.$getParams('供气方式','')
        return this.$getParams('供气方式', [{label: '全部', value: ''}])
      }
    }
  }
</script>
