<template>
  <div class="auto">
    <h1>{{titlename}}</h1>
    <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-dd'"
              ></datepicker>
              <label v-if="$parent.$parent.msg=='getTimeHandPlan'">是否抄表:</label>
              <v-select v-if="$parent.$parent.msg=='getTimeHandPlan'" placeholder='是否抄表'
                        @change="$parent.$parent.handPlan"
                        :options="$parent.$parent.isHandPlan">
              </v-select>
              <button class="btn btn-success width-100" @click="$parent.$parent.sqlcondition">查询</button>
              <button class="btn btn-success width-100" @click="$parent.$parent.back">返回</button>
              <button class="btn btn-success width-100" @click="$parent.$parent.SaveAsFile('daochu3')">导出当前页为xls</button>
              <br/>
              <hr
                v-if="($parent.$parent.msg!='getTimeHandPlan' && $parent.$parent.show)||($parent.$parent.msg=='getTimeHandPlan' && $parent.$parent.show)">
              <h3 v-if="$parent.$parent.msg!='getTimeHandPlan' && $parent.$parent.show">
                距今{{$parent.$parent.day}}天,{{$parent.$parent.methodname}}表具总共有:{{$parent.$parent.count}}块
              </h3>
              <h3 v-if="$parent.$parent.msg=='getTimeHandPlan' && $parent.$parent.show">
                <span>总共:{{$parent.$parent.handPlanCount}}块表</span>
                <span>已抄:{{$parent.$parent.handPlanNum}}块表</span>
                <span>未抄:{{$parent.$parent.noHandPlanNum}}块表</span>
                <span>抄表比率:{{$parent.$parent.percent}}%</span>
              </h3>
              <hr>
            </div>
          </div>
        </div>
      </criteria>
      <data-grid id="daochu3" :model="model" partial='list' v-ref:grid>
        <template partial='head'>
          <tr>
            <!--f_user_id-->
            <th>系统编号</th>
            <!--f_meternumber-->
            <th>表号</th>
            <!--f_user_name-->
            <th>用户名</th>
            <!--民用地址:f_address-->
            <th>地址</th>
            <!--f_user_type-->
            <th>用户类型</th>
            <!--f_gasproperties-->
            <th>用气性质</th>
            <!--f_position-->
            <th>表安装位置</th>
            <!--f_meter_brand-->
            <th>气表品牌</th>
            <!--f_meter_style-->
            <th>气表型号</th>
            <!--f_meter_type-->
            <th>气表类型</th>
            <!--f_table_state-->
            <th>气表状态</th>
            <!--f_meter_base-->
            <th>气表底数</th>
            <!--f_balance-->
            <th>表剩余金额</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_meternumber}}</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.f_user_type}}</td>
            <td style="text-align:center">{{row.f_gasproperties}}</td>
            <td style="text-align:center">{{row.f_position}}</td>
            <td style="text-align:center">{{row.f_meter_brand}}</td>
            <td style="text-align:center">{{row.f_meter_style}}</td>
            <td style="text-align:center">{{row.f_meter_type}}</td>
            <td style="text-align:center">{{row.f_table_state}}</td>
            <td style="text-align:center">{{row.f_meter_base}}</td>
            <td style="text-align:center">{{row.f_balance}}</td>
          </tr>
        </template>
        <template partial='foot'></template>
      </data-grid>
    </criteria-paged>
  </div>
</template>

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

  const oneDay = 1000 * 60 * 60 * 24;
  let sqlCondition = (self, data) => {
    let str = 'f_user_id IN ( 0';
    if (data) {
      if (data.length > 0) {
        str += ' ,';
        for (let i = 0; i < data.length; i++) {
          str += Number(data[i].f_user_id);
          if (i != (data.length - 1)) {
            str += ' ,'
          }
        }
      }
      self.count = data.length
    } else {
      self.count = 0
    }
    str += ' )';
    let date = new Date();
    date = Date.parse(`${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} 00:00:00`) - Date.parse(`${self.startDateValue} 00:00:00`);
    self.day = date / oneDay;
    return str
  };
  let getNoUseGas = (self) => {
    self.$resetpost('rs/sql/getNoUseGas', {data: {datetime: self.startDateValue + ' 0:0:0'}}, {
      rejectMsg: null,
      resolveMsg: null
    }).then(res => {
      self.methodname = '未用气';
      let str = sqlCondition(self, res.data);
      self.show = true;
      self.model.search(str, self.model)
    })
  };
  let getLoseTrackUser = (self) => {
    self.$resetpost('rs/sql/getLoseTrackUser', {data: {datetime: self.startDateValue + ' 0:0:0'}}, {
      rejectMsg: null,
      resolveMsg: null
    }).then(res => {
      self.methodname = '失联';
      let str = sqlCondition(self, res.data);
      self.show = true;
      self.model.search(str, self.model)
    })
  };
  let getWarningUser = (self) => {
    self.$resetpost('rs/sql/getWarningUser', {data: {datetime: self.startDateValue + ' 0:0:0'}}, {
      rejectMsg: null,
      resolveMsg: null
    }).then(res => {
      self.methodname = '关阀状态下走气的';
      let str = sqlCondition(self, res.data);
      self.show = true;
      self.model.search(str, self.model)
    })
  };
  let getSplitUser = (self) => {
    self.$resetpost('rs/sql/getSplitUser', {data: {datetime: self.startDateValue + ' 0:0:0'}}, {
      rejectMsg: null,
      resolveMsg: null
    }).then(res => {
      self.methodname = '拆表报警';
      let str = sqlCondition(self, res.data);
      self.show = true;
      self.model.search(str, self.model)
    })
  };
  let getTimeHandPlan = (self) => {
    self.$resetpost('rs/logic/getTimeHandPlan', {
      data: {
        datetime: self.startDateValue,
        condition: self.handPlanValue
      }
    }, {
      rejectMsg: null,
      resolveMsg: null
    }).then(res => {
      self.handPlanCount = res.data.count.countnum;
      let str = sqlCondition(self, res.data.result);
      if (self.handPlanValue == 'in') {
        self.handPlanNum = self.count;
        self.noHandPlanNum = self.handPlanCount - self.handPlanNum
      } else {
        self.noHandPlanNum = self.count;
        self.handPlanNum = self.handPlanCount - self.noHandPlanNum
      }
      self.percent = ((self.handPlanNum / self.handPlanCount).toFixed(2)) * 100;
      console.log(self.percent);
      if (Number.isNaN(self.percent)) {
        self.percent = 0
      }
      self.show = true;
      self.model.search(str, self.model)
    })
  };
  export default {
    title: '异常用户统计',
    name: "WarningStatistics",
    props: ['msgParam'],
    data() {
      return {
        model: new PagedList("rs/sql/getMeterBrandAndModel", 50),
        msg: undefined,
        startDate: undefined,
        startDateValue: undefined,
        isHandPlan: [{label: '已抄', value: 'in'}, {label: '未抄', value: 'not in'}],
        handPlanValue: undefined,
        handPlanCount: 0,
        handPlanNum: 0,
        noHandPlanNum: 0,
        percent: 0,
        count: 0,
        methodname: undefined,
        show: false,
        day: 0,
        titlename: undefined
      }
    },
    ready() {
      this.msg = this.$parent.msg;
      if (this.msg == 'getNoUseGas') {
        this.titlename = "未用气统计"
      } else if (this.msg == 'getLoseTrackUser') {
        this.titlename = "失联统计"
      } else if (this.msg == 'getWarningUser') {
        this.titlename = "关阀走气统计"
      } else if (this.msg == 'getTimeHandPlan') {
        this.titlename = "未抄统计"
      } else if (this.msg == 'getSplitUser') {
        this.titlename = '拆表报警'
      }
    },
    methods: {
      sqlcondition() {
        if (this.msg == 'getNoUseGas') {
          // 未用气
          if (!this.startDateValue) {
            this.$showMessage("请输入起始时间来作为统计条件！");
            return
          }
          getNoUseGas(this)
        } else if (this.msg == 'getLoseTrackUser') {
          // 失联用户
          if (!this.startDateValue) {
            this.$showMessage("请输入起始时间来作为统计条件！");
            return
          }
          getLoseTrackUser(this)
        } else if (this.msg == 'getWarningUser') {
          // 关阀走气
          if (!this.startDateValue) {
            this.$showMessage("请输入起始时间来作为统计条件！");
            return
          }
          getWarningUser(this)
        } else if (this.msg == 'getTimeHandPlan') {
          // 抄表
          if (!this.startDateValue) {
            this.$showMessage("请输入起始时间来作为统计条件！");
            return
          }
          getTimeHandPlan(this)
        } else if (this.msg == 'getSplitUser') {
          // 拆表报警
          if (!this.startDateValue) {
            this.$showMessage("请输入起始时间来作为统计条件！");
            return
          }
          getSplitUser(this)
        }
      },
      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')
      },
      handPlan(val) {
        if (val.length == 0) {
          this.handPlanValue = 'in';
          return
        }
        this.handPlanValue = val[0]
      },
      back() {
        this.$parent.msg = ""
      }
    }
  }
</script>

<style scoped>

</style>
