<template>
  <div style="background: white">
<!--    条件-->
  <div  style="height: 11%;width: 100%;">
      <div class="row" style="margin-top: 10px">
        <div class="col-sm-2 form-group"  >
          <label for="startDate" class="font_normal_body">开始日期</label>
          <datepicker id="startDate" placeholder="开始日期" style="width:60%;"
                      v-model="model.startDate"
                      :value.sync="model.startDate"
                      :format="'yyyy-MM-dd HH:mm:ss'"
                      :show-reset-button="true"
                      >
          </datepicker>
        </div>
      <div class="col-sm-2 form-group">
          <label for="endDate" class="font_normal_body">结束日期</label>
          <datepicker id="endDate" placeholder="结束日期" style="width:60%"
                      v-model="model.endDate"
                      :value.sync="model.endDate"
                      :format="'yyyy-MM-dd HH:mm:ss'"
                      :show-reset-button="true"
                     >
          </datepicker>
        </div>
      <div class="col-sm-2 form-group">
        <label class="font_normal_body">客户编号</label>
        <input type="text" style="width:60%" class="input_search" v-model="model.f_userinfo_code"
                placeholder="客户编号">
      </div>
        <div class="col-sm-2 form-group">
        <label class="font_normal_body">客户名称</label>
        <input type="text" style="width:60%" class="input_search" v-model="model.f_user_name"
               placeholder="客户名称">
      </div>
        <div class="col-sm-2 form-group">
          <label class="font_normal_body">气表编号</label>
          <input type="text" style="width:60%" class="input_search" v-model="model.f_meternumber"
                 placeholder="气表编号">
        </div>

        <div class="span" style="float:right;">
          <button class="button_search button_spacing"  @click="search()">查询</button>
          <div style="float: right"  class="button_spacing" :class="{'button_shrink_top':criteriaShow,'button_shrink_bottom':!criteriaShow}"    @click="hidden()"></div>
        </div>
        <div class="row" v-show="criteriaShow">
          <div class="col-sm-2 form-group">
            <label class="font_normal_body">微信绑定</label>
            <input type="text" style="width:60%" class="input_search" v-model="model.f_open_id"
                   placeholder="微信绑定">
          </div>
        </div>
      </div>
  </div>
<!--   中间上部分 -->
    <div  style="height: 25%;width: 100%;">

      <div class="row" style="height:25%">
        <p style="margin-left:15px;color: #0b87e2">系统信息</p>
        <p>
        <span>
          <lable class="cs1">表具最后通信日期</lable>
          <input type="text" style="width: 10%" class="cs2" v-model="meter.rows[0].f_date"
                 >
        </span>
        <span>
          <lable class="cs1">表具最后通信时间</lable>
          <input type="text" style="width: 10%" class="cs2" v-model="meter.rows[0].f_date_tine"
                 >
        </span>
        </p>
        <data-grid :model="model" class="table_sy"   partial='list' v-ref:grid >
          <template partial='head' >
            <tr>
              <th><nobr>信息分类</nobr></th>
              <th><nobr>是否成功</nobr></th>
              <th><nobr>失败原因</nobr></th>
              <th><nobr>(预留)</nobr></th>
              <th><nobr>(预留)是否成功</nobr></th>
              <th><nobr>(预留)失败原因</nobr></th>
            </tr>
          </template>
          <template partial='body' >
            <tr >
              <td style="text-align:center;white-space:nowrap;">{{$index+1}}</td>
              <td style="text-align:center;white-space:nowrap;">{{row.gas}}</td>
              <td style="text-align:center;white-space:nowrap;">{{row.fee}}</td>
              <td style="text-align:center;white-space:nowrap;">{{row.f_payment}}</td>
              <td style="text-align:center;white-space:nowrap;">{{row.f_balance}}</td>
              <td style="text-align:center;white-space:nowrap;">{{row.f_balance}}</td>
            </tr>
          </template>
        </data-grid>
      </div>
    </div>
<!--    中间下部分-->
  <div  style="height: 15%;width: 100%;">
      <p style="margin-left: 15px;color: #0b87e2">表端信息</p>
      <data-grid :model="info" class="table_sy"   partial='list' v-ref:grid >
        <template partial='head' >
          <tr>
            <th><nobr>序号</nobr></th>
            <th><nobr>用户编号</nobr></th>
            <th><nobr>用户姓名</nobr></th>
            <th><nobr>用户地址</nobr></th>
            <th><nobr>气表编号</nobr></th>
          </tr>
        </template>
        <template partial='body' >
          <tr >
            <td style="text-align:center;white-space:nowrap;">{{$index+1}}</td>
            <td style="text-align:center;white-space:nowrap;">{{row.f_userinfo_code}}</td>
            <td style="text-align:center;white-space:nowrap;">{{row.f_user_name}}</td>
            <td style="text-align:center;white-space:nowrap;">{{row.f_address}}</td>
            <td style="text-align:center;white-space:nowrap;">{{row.f_meternumber}}</td>
           </tr>
        </template>
      </data-grid>
  </div>
    <div  style="height: 15%;width: 100%;">
      <data-grid :model="meter" class="table_sy"   partial='list' v-ref:grid >
        <template partial='head' >
          <tr>
            <th><nobr>阀门状态</nobr></th>
            <th><nobr>充值金额</nobr></th>
            <th><nobr>表内余额</nobr></th>
            <th><nobr>电池电压</nobr></th>
            <th><nobr>信号强度</nobr></th>
            <th><nobr>当前单价</nobr></th>
            <th><nobr>其他关阀</nobr></th>
            <th><nobr>关阀走气</nobr></th>
            <th><nobr>磁干扰</nobr></th>
          </tr>
        </template>
        <template partial='body' >
          <tr >
            <td style="text-align:center;white-space:nowrap;">{{row.f_valvestate}}</td>
            <td style="text-align:center;white-space:nowrap;">{{row.f_meterbalanceamt}}</td>
            <td style="text-align:center;white-space:nowrap;">{{row.f_meterdebitamt}}</td>
            <td style="text-align:center;white-space:nowrap;">{{row.f_batterylevel}}</td>
            <td style="text-align:center;white-space:nowrap;">{{row.f_signal}}</td>
            <td style="text-align:center;white-space:nowrap;">{{row.f_price}}</td>
            <td style="text-align:center;white-space:nowrap;">{{row.f_payment}}</td>
            <td style="text-align:center;white-space:nowrap;">{{row.f_leakageflag}}</td>
            <td style="text-align:center;white-space:nowrap;">{{row.f_magneticinterference}}</td>
          </tr>
        </template>
      </data-grid>
    </div>
<!--    结束-->
  <div id="foot" style="height:35%" >
    <p style="margin-left: 15px;color: #0b87e2">历史扣费详情</p>
    <data-grid :model="sellgas" class="table_sy"   partial='list' v-ref:grid >
      <template partial='head' >
        <tr>
          <th><nobr>用户编号</nobr></th>
          <th><nobr>用户表号</nobr></th>
          <th><nobr>用户姓名</nobr></th>
          <th><nobr>上期余额</nobr></th>
          <th><nobr>本期余额</nobr></th>
          <th><nobr>购气量</nobr></th>
          <th><nobr>购气金额</nobr></th>
          <th><nobr>阶梯一气量</nobr></th>
          <th><nobr>阶梯二气量</nobr></th>
          <th><nobr>阶梯三气量</nobr></th>
        </tr>
      </template>
      <template partial='body' >
        <tr >
          <td style="text-align:center;white-space:nowrap;">{{row.f_userinfo_code}}</td>
          <td style="text-align:center;white-space:nowrap;">{{row.f_meternumber}}</td>
          <td style="text-align:center;white-space:nowrap;">{{row.f_user_name}}</td>
          <td style="text-align:center;white-space:nowrap;">{{row.f_balance}}</td>
          <td style="text-align:center;white-space:nowrap;">{{row.f_curbalance}}</td>
          <td style="text-align:center;white-space:nowrap;">{{row.f_pregas}}</td>
          <td style="text-align:center;white-space:nowrap;">{{row.f_preamount}}</td>
          <td style="text-align:center;white-space:nowrap;">{{row.f_stairamount1}}</td>
          <td style="text-align:center;white-space:nowrap;">{{row.f_stair2amount}}</td>
          <td style="text-align:center;white-space:nowrap;">{{row.f_stair3amount}}</td>
        </tr>
      </template>
    </data-grid>
  </div>
  </div>
</template>
<script>
import { PagedList } from 'vue-client'
export default {
  title: '物联网表状态查询',
  name: 'iotStateQuery',
  data () {
    return {
      // model:new PagedList('api/af-revenue/sql/iotinfoQuery',20,{}),
      model:{
        startDate:this.$login.toStandardDateString() + ' 00:00:00',
        endDate:this.$login.toStandardDateString() + ' 23:59:59',
      },
      info:{
        rows:[]
      },
      meter:{
        rows:[]
      },
      sellgas:{
        rows:[]
      },
      criteriaShow:false
     }
  },
  ready () {
     },
  methods: {
    hidden() {
      this.criteriaShow = !this.criteriaShow
    },

   async search(){
       this.info.rows=[]
       this.meter.rows=[]
      this.sellgas.rows=[]
     let condition=` 1=1`
     if(!this.model.f_userinfo_code&&!this.model.f_meternumber&&!this.model.f_open_id){
       this.$showAlert('请输入唯一条件','warning',2000)
       return
     }
     if(this.model.f_userinfo_code){
       condition+= ` and f_userinfo_code = '${this.model.f_userinfo_code}' `
     }
     if(this.model.f_user_name){
       condition+= ` and f_user_name = '${this.model.f_user_name} '`
     }
     if(this.model.f_meternumber){
       condition+= ` and f_meternumber = '${this.model.f_meternumber} '`
     }
     if(this.model.f_open_id){
       condition+= ` and f_open_id = '${this.model.f_open_id} '`
     }
     let res= await this.$resetpost('api/af-revenue/sql/iotinfoQuery',{data:{condition:condition,startDate:this.model.startDate,endDate:this.model.endDate}},{resolveMsg:null,rejectMsg:'查询出错'})
     if(res.data.length>0){
       this.info.rows.push(res.data[0])
     }
     let meter= await this.$resetpost('api/af-revenue/sql/iotmeterQuery',{data:{condition:condition,startDate:this.model.startDate,endDate:this.model.endDate}},{resolveMsg:null,rejectMsg:'查询出错'})
     if(meter.data.length>0){
       this.meter.rows.push(meter.data[0])
     }
     let sellgas= await this.$resetpost('api/af-revenue/sql/iotSellQuery',{data:{condition:condition,startDate:this.model.startDate,endDate:this.model.endDate}},{resolveMsg:null,rejectMsg:'查询出错'})
     this.sellgas.rows=sellgas.data
     console.log("res",this.info.rows,this.meter.rows,this.sellgas.rows)
    },
    cancel() {
      this.show = false
    },
  },
  computed: {
  },
  events: {

  },
  watch: {
  }
}
</script>
<style>
  #head1{
    width: 64px;
    height: 15px;
    font-family: PingFang-SC-Bold;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 45px;
    letter-spacing: 0px;
    color: #666666;
  }
  #buttons{
    width: 31px;
    height: 15px;
    font-family: PingFang-SC-Bold;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 45px;
    letter-spacing: 0px;
    color: #ffffff;
  }
  .cs1 {
    width: 133px;
    height: 15px;
    font-family: PingFang-SC-Medium;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 45px;
    letter-spacing: 0px;
    color: #333333;
  }
  .cs2 {
    width: 98px;
    height: 20px;
    font-family: PingFang-SC-Medium;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 45px;
    letter-spacing: 0px;
    color: #333333;
  }
</style>
