<template>
  <div id='app' class="flex bg-white p-10  datapanel" v-show="!echarts">
    <criteria-paged :model="model" :pager='true' v-ref:paged>
      <criteria partial='criteria' v-ref:cri>
        <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
          <div class="row" width="100%">
            <div class="col-sm-3">
              <label class="control-label" style="word-break:keep-all;">统计日期</label>
              <datepicker placeholder="起始时间"
                          :value.sync="model.f_start_date"
                          v-model="model.f_start_date"
                          :format="'yyyy-MM-dd HH:mm:ss'"
                          condition="f_date > '{}'"
              ></datepicker>
            </div>
            <div class="col-sm-3">
              <label class="control-label" style="word-break:keep-all;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;</label>
              <datepicker placeholder="结束时间"
                          :value.sync="model.f_end_date"
                          v-model="model.f_end_date"
                          :format="'yyyy-MM-dd HH:mm:ss'"
                          condition="f_date < '{}'"
              ></datepicker>
            </div>
            <div class="col-sm-3 form-group">
              <label class="control-label"></label>
              <button class="btn btn-success " @click="$parent.$parent.search">查询</button>
              <label class="control-label"></label>
              <button class="btn btn-default width-100" @click="$parent.$parent.clearmsg">清空</button>
              <label class="control-label"></label>
              <button class="btn btn-success width-100" @click="$parent.$parent.SaveAsFile('usergasall')">导出</button>
            </div>
            <div class="col-sm-3 form-group">
              <label class="control-label"></label>
              <button class="btn btn-success" @click="$parent.$parent.showEcharts()">显示图表</button>
            </div>
          </div>
        </div>
      </criteria>
      <data-grid id="usergasall" :model="model" partial='list' v-ref:grid>
        <template partial='head'>
          <tr>
            <th style="text-align:center">
              <nobr>序号</nobr>
            </th>
            <th style="text-align:center">
              <nobr>日期</nobr>
            </th>
            <th style="text-align:center">
              <nobr>总表数</nobr>
            </th>
            <th style="text-align:center">
              <nobr>总用户数</nobr>
            </th>
            <th style="text-align:center">
              <nobr>日民用气量</nobr>
            </th>
            <th style="text-align:center">
              <nobr>日非民用力量</nobr>
            </th>
            <th style="text-align:center">
              <nobr>失联数</nobr>
            </th>
            <th style="text-align:center">
              <nobr>抄表成功数</nobr>
            </th>
            <th style="text-align:center">
              <nobr>异常数</nobr>
            </th>
            <th style="text-align:center">
              <nobr>指令成功数</nobr>
            </th>
            <th style="text-align:center">
              <nobr>总指令数</nobr>
            </th>
            <th style="text-align:center">
              <nobr>待处理标记数</nobr>
            </th>
            <th style="text-align:center">
              <nobr>总标记数</nobr>
            </th>
          </tr>
        </template>
        <template partial='body'>
          <td style="text-align:center">{{$index+1}}</td>
          <td>
            <nobr>{{row.f_date}}</nobr>
          </td>
          <td>
            <nobr>{{row.f_total_meter}}</nobr>
          </td>
          <td style="text-align:center">
            <nobr>{{row.f_total_user}}</nobr>
          </td>
          <td style="text-align:center">
            <nobr>{{row.f_civil_gas}}</nobr>
          </td>
          <td style="text-align:center">
            <nobr>{{row.f_nocivil_gas}}</nobr>
          </td>
          <td>
            <nobr>{{row.f_nocontact_total}}</nobr>
          </td>
          <td style="text-align:center">
            <nobr>{{row.f_meteread_total}}</nobr>
          </td>
          <td style="text-align:center">
            <nobr>{{row.f_abnormal_total}}</nobr>
          </td>
          <td style="text-align:center">
            <nobr>{{row.f_instruction_success}}</nobr>
          </td>
          <td style="text-align:center">
            <nobr>{{row.f_instruction_total}}</nobr>
          </td>
          <td style="text-align:center">
            <nobr>{{row.f_untreated_sign}}</nobr>
          </td>
          <td style="text-align:center">
            <nobr>{{row.f_sign_total}}</nobr>
          </td>
        </template>
      </data-grid>
    </criteria-paged>
  </div>
  <div style="height: 40px;width: 100%;" v-show="echarts">
    <div style="display: inline-block;">
      <button class="btn btn-success" @click="showEcharts()">隐藏图表</button>
    </div>
    <!--      图显示模板-->
    <div class="mystyle" style="display: inline-block;">
      <label class="control-label">图表统计项</label>
      <v-select id="groupname" v-model="groupname"
                placeholder='分组项'
                value-single="true"
                :value.sync="groupname"
                :options='getgroupname'
                close-on-select></v-select>
    </div>
  </div>
  <div style="width: 100%;height: 90%;" v-show="echarts">
    <indicator-statistics-echars :groupname="groupname[0]" :condition="condition" :startdate="startDate"
                                 :enddate="endDate" :echarts="echarts"></indicator-statistics-echars>
  </div>
</template>

<script>
  import {PagedList} from 'vue-client'
  import getLodop from '../../plugins/LodopFuncs'
  import * as Util from '../../Util'

  function getNowFormatDate() {
    var date = new Date();
    var seperator1 = "-";
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var strDate = date.getDate();
    if (month >= 1 && month <= 9) {
      month = "0" + month;
    }
    if (strDate >= 0 && strDate <= 9) {
      strDate = "0" + strDate;
    }
    var currentdate = year + seperator1 + month + seperator1 + strDate;
    return currentdate;
  }

  export default {
    title: '指标汇总',
    name: 'indicatorStatisticsMain',
    data() {
      return {
        model: new PagedList('rs/sql/selectIndicatorList', 20),
        condition: '1=1',
        groupname: ['year'],
        startDate: '',
        endDate: '',
        getgroupname: [
          {label: '年份', value: 'year'},
          {label: '月份', value: 'month'},
          {label: '周', value: 'week'},
          {label: '日', value: 'day'}
        ],
        echarts: false
      }
    },
    ready() {
      this.$refs.paged.$refs.cri.model.f_start_date = Util.toStandardDateString() + ' 00:00:00'
      this.$refs.paged.$refs.cri.model.f_end_date = Util.toStandardDateString() + ' 23:59:59'
      this.model.search(this.condition);
      this.getdata()
    },
    methods: {
      SaveAsFile(str) {
        this.$showMessage('您是否需要导出本页数据？', ['confirm', 'cancel']).then((res) => {
          if (res === 'confirm') {
            let style = '<style>' +
              'td {border-width: 1px;padding: 2px;border-style: solid; border-color:black; border-collapse:collapse;} .tdright{text-align: right;}  .tdcenter{text-align: center;}</style>';
            let strHtml = style + document.getElementById(str).innerHTML;
            console.log(strHtml);
            let LODOP = getLodop();
            LODOP.PRINT_INIT('');
            LODOP.ADD_PRINT_TABLE(5, 5, '99%', '100%', strHtml);
            LODOP.SAVE_TO_FILE('指标汇总.xls')
          }
        })
      },
      getdata() {
        this.startDate = this.$refs.paged.$refs.cri.model.f_start_date
        this.endDate = this.$refs.paged.$refs.cri.model.f_end_date
        this.$refs.paged.$refs.cri.search()
        this.condition = this.$refs.paged.$refs.cri.condition
      },
      clearmsg() {
        this.$refs.paged.$refs.cri.model = {}
      },
      showEcharts() {
        this.echarts = !this.echarts;
      },
      search() {
        this.condition = this.$refs.paged.$refs.cri.search().condition;
        console.log('指标汇总:', this.condition);
        this.model.search(this.condition);
        this.condition = '1=1';
        this.getdata()
      }
    },
    watch: {
      'data'(val) {
        if (val.f_files_path) {
          this.getFileContent(val.f_files_path)
        } else {
          this.reportStr = null
        }
      }
    }
  }
</script>
<style>
  .mystyle {
    float: right;
    padding-right: 10%;
  }

  .span canvas {
    height: 100%;
    width: 100%;
  }

  .datapanel {
    color: #333;
    background-color: white;
    box-shadow: darkgrey 0.5px 0.5px 0.5px 0.5px;
    padding: 10px 10px 10px 10px;
    border-radius: 15px;
  }
</style>
