<template>
  <div style="overflow-y:visible">
    <!--<div style="height: 50%;width: 60%" id="NoGas">-->
    <!--</div>-->


    <div v-show="nocontactshow" class="div-1">
      <table v-model="nocontactshow">
        <tr class="tr-2">
          <td rowspan="2" class="td-1"><p class="p-2">未用气统计</p></td>
          <td v-for="s in datenogas"><p @click="getMonitor(s.name,'未用气')" class="p-1">{{s.name}}天</p></td>
        </tr>
        <tr>
          <!--<td  v-for="w in datenogas"><p @click="getMonitor(w.name,'未用气')">{{w.value}} </p></td>-->
          <td class="td-2"><p @click="getMonitor(datenogas[0].name,'未用气')">{{datenogas[0].value}} </p></td>
          <td class="td-3"><p @click="getMonitor(datenogas[1].name,'未用气')">{{datenogas[1].value}} </p></td>
          <td class="td-4"><p @click="getMonitor(datenogas[2].name,'未用气')">{{datenogas[2].value}} </p></td>
          <td class="td-5"><p @click="getMonitor(datenogas[3].name,'未用气')">{{datenogas[3].value}} </p></td>
        </tr>
      </table>
      <table v-model="nocontactshow">
        <tr class="tr-2">
          <td rowspan="2" class="td-1"><p class="p-2">失联</p></td>
          <td v-for="s in nocontactnum"><p @click="getMonitor(s.name,'失联')" class="p-1">{{s.name}}天</p></td>
        </tr>
        <tr>
          <!--<td v-for="w in nocontactnum"><p @click="getMonitor(w.name,'失联')">{{w.value}} </p></td>-->
          <td class="td-2"><p @click="getMonitor(nocontactnum[0].name,'失联')">{{nocontactnum[0].value}} </p></td>
          <td class="td-3"><p @click="getMonitor(nocontactnum[1].name,'失联')">{{nocontactnum[1].value}} </p></td>
          <td class="td-4"><p @click="getMonitor(nocontactnum[2].name,'失联')">{{nocontactnum[2].value}} </p></td>
          <td class="td-5"><p @click="getMonitor(nocontactnum[3].name,'失联')">{{nocontactnum[3].value}} </p></td>
        </tr>
      </table>
      <table v-model="nocontactshow">
        <tr class="tr-1">
          <td class="td-6" v-for="s in errordata"><p @click="getMonitor(s.name,s.chainname)" class="p-2">{{s.chainname}}</p></td>
        </tr>
        <tr>
          <td class="td-6" v-for="w in errordata"><p @click="getMonitor(w.name,w.chainname)">{{w.value}}</p></td>
        </tr>
      </table>
    </div>
    <div v-show="datalistshow" style="height: 100%">
      <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">
                <datepicker :placeholder="$parent.$parent.startDate"
                            readonly
                            v-model="$parent.$parent.startDate"
                            :value.sync="$parent.$parent.startDateValue"
                            :format="'yyyy-MM-dd'"
                ></datepicker>
                <v-select placeholder='用户类型'
                          @change="$parent.$parent.sqlGasproperties"
                          :options="$parent.$parent.gaspropertiesArray">
                </v-select>
                <button class="btn btn-success width-100" @click="$parent.$parent.sqlcondition">查询</button>
                <button class="btn btn-success width-100" @click="$parent.$parent.backMonitor">返回</button>
                <span v-if="$parent.$parent.dayshow">距今{{$parent.$parent.day}}天,</span>
                <span v-if="$parent.$parent.msg!='getTimeHandPlan' && $parent.$parent.show">
              {{$parent.$parent.methodname}}表具总共有:{{$parent.$parent.count}}块
              </span>
                <span 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>
              </span>
              </div>
            </div>
          </div>
        </criteria>
        <data-grid :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'>
            <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>
  </div>
</template>

<script>
  import {PagedList} from 'vue-client'
  import co from 'co'
  import {HttpResetClass} from 'vue-client'

  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()}`) - Date.parse(self.startDateValue)
    self.day = Math.ceil(date / oneDay)
    return str
  }
  let getNoUseGas = (self, stardate) => {
    var condition ='ui.f_createfile_date <= \''+stardate+' 00:00:00\' '
    if(self.userType!=''){
      condition=condition+' and ui.f_user_type='+'\''+self.userType+'\' '
    }
    self.$resetpost('/rs/sql/nogas', {data: {datetime: stardate + ' 0:0:0',condition:condition}}, {
      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, stardate) => {
    var condition ='ui.f_createfile_date <= \''+stardate+' 00:00:00\''
    if(self.userType!=''){
      condition=condition+' and ui.f_user_type='+'\''+self.userType+'\' '
    }
    self.$resetpost('/rs/sql/loseuser', {data: {datetime: stardate+' 00:00:00',condition:condition}}, {
      rejectMsg: null,
      resolveMsg: null
    }).then(res => {
      self.methodname = '失联'
      let str = sqlCondition(self, res.data)
      self.show = true
      self.model.search(str, self.model)
    })
  }
  let getErrorModel = async (self, param,stardate) => {
    var condition =''
    if(self.userType!=''){
      condition=condition+' and ui.f_user_type='+'\''+self.userType+'\' '
    }
    let load = new HttpResetClass()
    load.load('POST', '/rs/sql/errormodel', {data: {condition: 'and mr.' + param + '=1  and  '+
        'mr.f_hand_date <='+stardate+' '
        +condition}}, {
      rejectMsg: null,
      resolveMsg: null
    }).then(res => {
      self.show = true
      self.methodname = param
      let str = sqlCondition(self, res.data)
      self.model.search(str, self.model)
      for (var i = 0; i < self.errordata.length; i++) {
        if (self.errordata[i].name == param) {
          self.errordata[i].value = res.data.length
          self.methodname =  self.errordata[i].chainname
        }
      }
      if(self.userType!=''){
        let id=[]
        for(var i=0;i<res.data.length;i++){
          id.push({'f_user_id':res.data[i].f_user_id})
        }
        let str = sqlCondition(self, id)
        self.show = true
        self.model.search(str, self.model)
      }
    })
  }
  let getLoseTrackUserNum = async (self, url, data, stardate) => {
    let load = new HttpResetClass()
    load.load('POST', url, {data: {datetime: self.getBeforeDate(stardate) + ' 00:00:00',condition:'ui.f_createfile_date <= '+self.getBeforeDate(stardate)}}, {
      rejectMsg: null,
      resolveMsg: null
    }).then(res => {
      // data.push(res.data.length)
      //  self.shiliannumc(self)
      for (var i = 0; i < data.length; i++) {
        if (data[i].name == stardate) {
          data[i].value = res.data.length
        }
      }
    })
  }
  let getTimeHandPlan = (self) => {
    self.$resetpost('/rs/logic/timePlan', {
      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
      self.show = true
      self.model.search(str, self.model)
    })
  }
  export default {
    title: "监控",
    data() {
      return {
        model: new PagedList("/rs/sql/mettermodel", 30, {}),
        //  classname: 'table table-bordered table table-hover',
        nocontactshow: true,
        datalistshow: false,
        startDate: '',
        startDateValue: '',
        userType:'',
        handPlanValue: undefined,
        handPlanCount: 0,
        handPlanNum: 0,
        noHandPlanNum: 0,
        percent: 0,
        count: 0,
        methodname: '',
        show: false,
        dayshow: false,
        day: 0,
        mgs: '',
        nocontactnum: [
          {name: '2', value: ''},
          {name: '5', value: ''},
          {name: '20', value: ''},
          {name: '40', value: ''},
        ],
        datenogas: [
          {name: '10', value: ''},
          {name: '20', value: ''},
          {name: '30', value: ''},
          {name: '60', value: ''},
        ],
        errordata: [
          {name: 'f_SplitAlarm', value: '', chainname: '拆表报警'},
          {name: 'f_magneticInterference', value: '', chainname: '磁干扰'},
          {name: 'f_alarmShutValve', value: '', chainname: '报警关阀'},
          {name: 'f_cycleShutValue', value: '', chainname: '周期关阀'},
          {name: 'f_overCurrentProtection', value: '', chainname: '过流保护关阀'},
          {name: 'f_leakageFlag', value: '', chainname: '关阀走气'}
        ],
        gaspropertiesArray:[
          {label:'全部',value:'%%'},
          {label:'民用',value:'民用'},
          {label:'非民用',value:'非民用'},
        ]
      }
    },
    methods: {
      getMonitor(i, param) {
        this.methodname = param
        if (param == '未用气') {
          this.dayshow = true
          this.startDate = this.getBeforeDate(i)
          this.startDateValue = this.getBeforeDate(i)
          getNoUseGas(this, this.getBeforeDate(i))
        } else if (param == '失联') {
          this.dayshow = true
          this.startDate = this.getBeforeDate(i)
          this.startDateValue = this.getBeforeDate(i)
          getLoseTrackUser(this, this.getBeforeDate(i))
        } else {
          this.dayshow = false
          this.dayshow = true
          this.startDate = this.getBeforeDate('7')
          this.startDateValue = this.getBeforeDate('7')
          getErrorModel(this, i,this.getBeforeDate('7'))
        }

        this.nocontactshow = false
        this.datalistshow = true
      },
      sqlcondition() {
        if (this.methodname == '未用气') {
          // 未用气
          if (!this.startDateValue) {
            this.$showMessage("请输入起始时间来作为统计条件！")
            return
          }
          getNoUseGas(this, this.startDateValue)
        } else if (this.methodname == '失联') {
          // 失联用户
          if (!this.startDateValue) {
            this.$showMessage("请输入起始时间来作为统计条件！")
            return
          }
          getLoseTrackUser(this, this.startDateValue)
        }else{
          for(var i=0;i<this.errordata.length;i++){
            if(this.errordata[i].chainname==this.methodname){
              getErrorModel(this,this.errordata[i].name,this.startDateValue)
            }
          }
        }
      },
      sqlGasproperties(value) {
        if (value.length == 0)
          return
        if(value=='%%'){
          value =''
        }
        this.userType = value
      },
      getBeforeDate(n) {
        var n = n;
        var d = new Date();
        var year = d.getFullYear();
        var mon = d.getMonth() + 1;
        var day = d.getDate();
        if (day <= n) {
          if (mon > 1) {
            mon = mon - 1;
          }
          else {
            year = year - 1;
            mon = 12;
          }
        }
        d.setDate(d.getDate() - n);
        year = d.getFullYear();
        mon = d.getMonth() + 1;
        day = d.getDate();
        var s = year + "-" + (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day);
        return s;
      },
      backMonitor() {
        this.datalistshow = false
        this.nocontactshow = true
      },
      getError() {
        for (var i = 0; i < this.errordata.length; i++) {
          let getData = getErrorModel(this, this.errordata[i].name,this.getBeforeDate('7'))
          co(getData)
        }
      },
      getDateCount(url, parameterone) {
        for (var i = 0; i < parameterone.length; i++) {
          let getData = getLoseTrackUserNum(this, url, parameterone, parameterone[i].name)
          co(getData)
        }
      },
      getInit(){
        var self=this
        setInterval( function () {
          self.i++
          self.getDateCount('/rs/sql/loseuser', self.nocontactnum)
          self.getDateCount('/rs/sql/nogas', self.datenogas)
          self.getError()
        },3600000)

      }
    },
    ready() {
      this.getDateCount('/rs/sql/loseuser', this.nocontactnum)
      this.getDateCount('/rs/sql/nogas', this.datenogas)
      this.getError()
      this.getInit()
    }
  }
</script>

<style scoped>
  .div-1 {
    height: 100%;
    width: 100%;
  }

  table {
    height: 33%;
    width: 100%;
    background-color: #aeb1c4;
  }

  tr {
    background-color: #d9edf6;
  }

  .tr-1 {
    background-color: #58b9d4;
  }

  .tr-2 {
    background-color: #85c6e4;
  }

  td {
    width: 20%;
    height: 50%;
    text-align: center;
    border: 1px solid #ffffff;
  }

  .td-1 {
    background-color: #58b9d4;
  }

  .td-2 {
    background-color: #d9edf6;
  }

  .td-3 {
    background-color: #a7def7;
  }

  .td-4 {
    background-color: #8fd7f7;
  }

  .td-5 {
    background-color: #4fbeef;
  }
  .td-6 {
    width: 17%;
  }

  p {
    font-size: 30px;
    color: #333333;
  }

  .p-1 {
    color: #666666;
  }

  .p-2 {
    color: #ffffff;
    font-weight: 500;
    font-family: 微软雅黑;
  }
</style>
