<template>
  <div class="auto" style="overflow:scroll;width: 100%">
    <h1>日用气量统计报表</h1>
    <div style="width: 150%;">
      <criteria-paged :model='model' v-ref:paged>
        <criteria :model='model' partial='criteria'>
          <div novalidate class="form-inline col-sm-12" partial>
            <div class="form-group form-input-group col-sm-12">
              <div class="form-group col-sm-12">
                <hr>
                <label>统计时间:</label>
                <datepicker placeholder="统计时间"
                            readonly
                            v-model="$parent.$parent.startDate"
                            :value.sync="$parent.$parent.startDateValue"
                            :format="'yyyy-MM'">
                </datepicker>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <label>模糊查询地址:</label>
                <input class="form-control" placeholder='模糊查询地址' type="text" v-model="$parent.$parent.address"/>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <button class="btn btn-success width-100" @click="$parent.$parent.sqlcondition">查询</button>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <button class="btn btn-success width-100" @click="$parent.$parent.back">返回</button>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <button class="btn btn-success width-100" @click="$parent.$parent.SaveAsFile('daochu2')">导出当前页为xls</button>
                <hr>
                <h3 v-if="$parent.$parent.month&&$parent.$parent.year">
                  已选择{{$parent.$parent.year}}年{{$parent.$parent.month}}月,当前月有{{$parent.$parent.howManyDays}}天</h3>
                <hr v-if="$parent.$parent.month&&$parent.$parent.year">
              </div>
            </div>
          </div>
        </criteria>
        <data-grid id="daochu2" :model="model" partial='list' v-ref:grid>
          <template partial='head'>
            <tr>
              <th>系统编号</th>
              <th>用户名</th>
              <th>用户地址</th>
              <th>1日</th>
              <th>2日</th>
              <th>3日</th>
              <th>4日</th>
              <th>5日</th>
              <th>6日</th>
              <th>7日</th>
              <th>8日</th>
              <th>9日</th>
              <th>10日</th>
              <th>11日</th>
              <th>12日</th>
              <th>13日</th>
              <th>14日</th>
              <th>15日</th>
              <th>16日</th>
              <th>17日</th>
              <th>18日</th>
              <th>19日</th>
              <th>20日</th>
              <th>21日</th>
              <th>22日</th>
              <th>23日</th>
              <th>24日</th>
              <th>25日</th>
              <th>26日</th>
              <th>27日</th>
              <th v-if="$parent.$parent.$parent.howManyDays>=28">28日</th>
              <th v-if="$parent.$parent.$parent.howManyDays>=29">29日</th>
              <th v-if="$parent.$parent.$parent.howManyDays>=30">30日</th>
              <th v-if="$parent.$parent.$parent.howManyDays>=31">31日</th>
            </tr>
          </template>
          <template partial='body' partial='list' v-ref:grid>
            <tr>
              <td style="text-align:center">{{row.f_user_id}}</td>
              <td style="text-align:center">{{row.f_user_name}}</td>
              <td style="text-align:center">{{row.f_address}}</td>
              <td style="text-align:center">{{row.day1==undefined?'无':row.day1}}</td>
              <td style="text-align:center">{{row.day2==undefined?'无':row.day2}}</td>
              <td style="text-align:center">{{row.day3==undefined?'无':row.day3}}</td>
              <td style="text-align:center">{{row.day4==undefined?'无':row.day4}}</td>
              <td style="text-align:center">{{row.day5==undefined?'无':row.day5}}</td>
              <td style="text-align:center">{{row.day6==undefined?'无':row.day6}}</td>
              <td style="text-align:center">{{row.day7==undefined?'无':row.day7}}</td>
              <td style="text-align:center">{{row.day8==undefined?'无':row.day8}}</td>
              <td style="text-align:center">{{row.day9==undefined?'无':row.day9}}</td>
              <td style="text-align:center">{{row.day10==undefined?'无':row.day10}}</td>
              <td style="text-align:center">{{row.day11==undefined?'无':row.day11}}</td>
              <td style="text-align:center">{{row.day12==undefined?'无':row.day12}}</td>
              <td style="text-align:center">{{row.day13==undefined?'无':row.day13}}</td>
              <td style="text-align:center">{{row.day14==undefined?'无':row.day14}}</td>
              <td style="text-align:center">{{row.day15==undefined?'无':row.day15}}</td>
              <td style="text-align:center">{{row.day16==undefined?'无':row.day16}}</td>
              <td style="text-align:center">{{row.day17==undefined?'无':row.day17}}</td>
              <td style="text-align:center">{{row.day18==undefined?'无':row.day18}}</td>
              <td style="text-align:center">{{row.day19==undefined?'无':row.day19}}</td>
              <td style="text-align:center">{{row.day20==undefined?'无':row.day20}}</td>
              <td style="text-align:center">{{row.day21==undefined?'无':row.day21}}</td>
              <td style="text-align:center">{{row.day22==undefined?'无':row.day22}}</td>
              <td style="text-align:center">{{row.day23==undefined?'无':row.day23}}</td>
              <td style="text-align:center">{{row.day24==undefined?'无':row.day24}}</td>
              <td style="text-align:center">{{row.day25==undefined?'无':row.day25}}</td>
              <td style="text-align:center">{{row.day26==undefined?'无':row.day26}}</td>
              <td style="text-align:center">{{row.day27==undefined?'无':row.day27}}</td>
              <td style="text-align:center" v-if="$parent.$parent.$parent.howManyDays>=28">
                {{row.day28==undefined?'无':row.day28}}
              </td>
              <td style="text-align:center" v-if="$parent.$parent.$parent.howManyDays>=29">
                {{row.day29==undefined?'无':row.day29}}
              </td>
              <td style="text-align:center" v-if="$parent.$parent.$parent.howManyDays>=30">
                {{row.day30==undefined?'无':row.day30}}
              </td>
              <td style="text-align:center" v-if="$parent.$parent.$parent.howManyDays>=31">
                {{row.day31==undefined?'无':row.day31}}
              </td>
            </tr>
          </template>
          <template partial='foot'></template>
        </data-grid>
      </criteria-paged>
    </div>
  </div>
</template>

<script>
  import {PagedList} from 'vue-client';
  import getLodop from '../../plugins/LodopFuncs'
  export default {
    title: '物联网表月用气面板',
    name: "WebMeterMonthUserGas",
    data() {
      return {
        startDate: undefined,
        startDateValue: undefined,
        address: undefined,
        howManyDays: 30,
        month: undefined,
        year: undefined,
        model: new PagedList("没有URL :D", 500)
      }
    },
    ready() {
      console.log("I'll forgive you all, if you'll just come back home");
    },
    methods: {
      back() {
        this.$parent.msg = ""
      },
      sqlcondition() {
        if (this.startDateValue != undefined) {
          if (this.address != "" && this.address) {
            this.$resetpost('rs/logic/getDayUseGas', {
              data: {
                month: this.startDateValue,
                condition: `f_address like '${this.address}%'`
              }
            }, {resolveMsg: null, rejectMsg: null}).then((res) => {
              this.model.rows = res.data;
            })
          } else {
            this.$showMessage("您并未输入作为条件的地址哦~")
          }
        } else {
          this.$showMessage("您并未输入时间作为条件哦~")
        }
      },
      SaveAsFile (str) {
        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')
      }
    },
    watch: {
      // 计算本月最多有多少天
      'startDateValue'(val) {
        let date = new Date(val);
        let monthNum = (date.getMonth() + 1) == 12 ? 1 : (date.getMonth() + 2);
        let yearNum = (date.getMonth() + 1) == 12 ? (date.getFullYear() + 1) : date.getFullYear();
        date = new Date(`${yearNum}-${monthNum}`);
        date.setMilliseconds((date.getMilliseconds() - ((1000 * 60 * 60 * 24))));
        this.howManyDays = date.getDate();
        this.year = date.getFullYear();
        this.month = date.getMonth() + 1;
      }
    }
  }
</script>

<style scoped>

</style>
