<template>
  <div id="unit" class="flex-row">
    <div class="basic-main">
      <div class="flex" v-if="!show">
      <criteria-paged :model="model" v-ref:paged  >
        <criteria partial='criteria' v-ref:criteria  @condition-changed='$parent.search'>
          <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
            <div class="row" >
              <div class="col-sm-2">
                <label class="font_normal_body">表&nbsp;钢&nbsp;号&nbsp;</label>
                <input @keyup.enter="search"  style="width:60%"  type="text" class="input_search" v-model="model.f_meternumber" placeholder='表钢号'
                       condition="m.f_meternumber like '%{}%'" v-next-el='meternumber' v-el:meternumber
                >
              </div>
              <div class="col-sm-2">
                <label class="font_normal_body">组织机构</label>
                <res-select :initresid="$parent.$parent.orgid"
                            style="width:60%"
                            @res-select="$parent.$parent.getRes"
                            restype='organization'>
                </res-select>
              </div>
              <div class="col-sm-2">
                <label class="font_normal_body">客户编号</label>
                <input @keyup.enter="search"  style="width:60%"  type="text" class="input_search" v-model="model.f_userinfo_code" placeholder='客户编号'
                       condition="ui.f_userinfo_code like '%{}%'" v-next-el='f_userinfo_code' v-el:meternumber
                >
              </div>
              <div class="col-sm-2">
                <label class="font_normal_body">客户名称</label>
                <input @keyup.enter="search"  style="width:60%"  type="text" class="input_search" v-model="model.f_username" placeholder='客户名称'
                       condition="ui.f_user_name like '%{}%'" v-next-el='userid' v-el:username>
              </div>
              <div class="span" style="float:right;margin-top:10px">
                <button class="button_search button_spacing" @click="search()">查询</button>
                <button class="button_clear button_spacing" @click="$parent.$parent.clearmsg">清空</button>
                <export-excel :data="$parent.$parent.getCondition" class="button_export button_spacing"
                              :field="$parent.$parent.getfield"
                              sqlurl="rs/logic/exportfile" sql-name="manage_getReportList" template-name='上报查询'
                              :choose-col="true"></export-excel>
                <div style="float: right"  class="button_spacing" :class="{'button_shrink_top':$parent.$parent.criteriaShow,'button_shrink_bottom':!$parent.$parent.criteriaShow}"    @click="$parent.$parent.hidden()"></div>
              </div>
            </div>
            <div class="row" v-show="$parent.$parent.criteriaShow">
              <div class="col-sm-2 " >
                <label class="font_normal_body" >开始时间</label>
                <datepicker style="width: 60%" placeholder="大于等于"
                            :value.sync="model.f_start_date"
                            v-model="model.f_start_date"
                            :format="'yyyy-MM-dd HH:mm:ss'"
                            condition="m.f_hand_date >= '{}'"
                ></datepicker>
              </div>
              <div class="col-sm-2 " >
              <label class="font_normal_body">结束时间</label>
              <datepicker style="width: 60%" placeholder="小于等于"
                          :value.sync="model.f_end_date"
                          v-model="model.f_end_date"
                          :format="'yyyy-MM-dd HH:mm:ss'"
                          condition="m.f_hand_date <= '{}'"
              ></datepicker>
            </div>
            </div>
          </div>
        </criteria>
        <data-grid :model="model" partial='list' v-ref:grid class="list_area table_sy">
          <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>
              <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' partial='list'>
            <tr >
              <td style="text-align: left;"><nobr> <span @click="$parent.$parent.$parent.showmsg(row)"><a>{{row.f_userinfo_code}}</a></span></nobr></td>
              <td style="text-align: left;"><nobr>{{row.f_meternumber}}</nobr></td>
              <td style="text-align: left;"><nobr>{{row.f_user_name}}</nobr></td>
              <td style="text-align: left;"><nobr>{{row.f_user_phone}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_address}}</nobr></td>

              <td style="text-align:center"><nobr>{{row.f_hand_date}}</nobr></td>
              <th style="text-align:center"><nobr>{{row.f_insert_date}}</nobr></th>
              <th style="text-align:center"><nobr>{{row.f_meterbalanceamt}}</nobr></th>
              <th style="text-align:center"><nobr>{{row.f_price}}</nobr></th>
              <th style="text-align:center"><nobr>{{row.f_tablebase}}</nobr></th>
              <th style="text-align:center"><nobr>{{row.f_valvestate}}</nobr></th>


              <th style="text-align:center"><nobr>{{row.f_upload_type}}</nobr></th>
              <th style="text-align:center"><nobr>{{row.f_meterdebitamt}}</nobr></th>
              <th style="text-align:center"><nobr>{{row.f_signal}}</nobr></th>
              <th style="text-align:center"><nobr>{{row.f_snr}}</nobr></th>
              <th style="text-align:center"><nobr>{{row.f_batterylevel}}</nobr></th>

              <th style="text-align:center"><nobr>{{row.f_table_msg}}</nobr></th>
              <th style="text-align:center"><nobr>{{row.f_moneystate}}</nobr></th>
              <th style="text-align:center"><nobr>{{row.f_nsturalgas_data}}</nobr></th>
            </tr>
          </template>
          <template partial='foot'></template>
        </data-grid>
      </criteria-paged>
    </div>
      <div v-if="show">
        <user-info-detail-manage :f_userinfo_id="rowdata.f_userinfo_id" @cancel-main="cancel"></user-info-detail-manage>
      </div>
    </div>

  </div>
</template>

<script>
  import {PagedList} from 'vue-client'
  import exportConfig from '../../sale/config/exportConfig'
  import plugins from '../../../plugins/GetLoginInfoService'

  export default {
    title: '上报查询',
    data () {
      return {
        show:false,
        rowdata:{},
        orgid:[this.$login.f.orgid],
        criteriaShow:false,
        orgCondtionStr: '(' + this.$login.f.orgid + ')',
        model: new PagedList('rs/sql/manage_getReportList', 50)
      }
    },
    ready () {
      this.$refs.paged.$refs.criteria.search()
    },
    methods: {
      hidden(){
        this.criteriaShow = !this.criteriaShow
      },
      cancel() {
        this.show = false
      },
      clearmsg () {
        this.$refs.paged.$refs.criteria.model = {}
      },
      getRes (obj) {
        this.orgCondtionStr = plugins.convertToIn(obj)
      },
      showmsg(obj){
        this.rowdata=obj
        this.show=true
      },
      search (args) {
        args.condition = `${args.condition}`
        if (this.orgCondtionStr)
          args.condition = `${args.condition}` + 'and m.f_orgid in ' + this.orgCondtionStr
        else
          args.condition = `${args.condition}` + 'and m.f_orgid in ' + '(' + this.$login.f.orgid + ')'
        this.model.search(args.condition, args.model)
      }
    },
    watch: {

    },
    computed: {

      getfield () {
        return exportConfig.ReportListConfig
      },
      getCondition () {
        var con = ""
        if (this.orgCondtionStr) {
          con = `${this.$refs.paged.$refs.criteria.condition} and m.f_orgid in  (${this.orgCondtionStr})`
        }
        else {
          con = `${this.$refs.paged.$refs.criteria.condition}and m.f_orgid in ('${this.$login.f.orgid}' )`
        }
        return {
          condition: con
        }
      }
    }
  }
</script>

<style>
  .mystyle{
    margin-left:80px;
  }
  .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>
