<template >
  <div id="stand-work-list" >
    <div  class="span">
      <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="col-sm-4 " >
              <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="f_hand_date >= '{}'"
              ></datepicker>
            </div>
            <div class="col-sm-4 " >
              <label class="font_normal_body">&nbsp;至</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="f_hand_date <= '{}'"
              ></datepicker>
            </div>
            <div class="col-sm-4 " >
              <button style="margin-left: 60px;
              background-color: #6aa6e2;border-radius: 10px;
              color: white;border: solid 2px #77aee5;font-size: 1em;"
                      class="button_search" @click="search()" v-el:cba>查询</button>
            </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>单价(元/m³)</nobr></th>
              <th><nobr>用气量(m³)</nobr></th>
              <th><nobr>用气金额(元)</nobr></th>
              <th><nobr>剩余金额(元)</nobr></th>
              <th><nobr>时间</nobr></th>
            </tr>
          </template>
          <template partial='body'>
            <td style="text-align:center"><nobr>{{$index+1}}</nobr></td>
            <td style="text-align:center"><nobr>{{row.f_balance}}</nobr></td>
            <td style="text-align:center"><nobr>{{row.f_last_tablebase}}</nobr></td>
            <td style="text-align:center"><nobr>{{row.f_tablebase}}</nobr></td>
            <td style="text-align:center"><nobr>{{row.f_price}}</nobr></td>
            <td style="text-align:center"><nobr>{{row.f_oughtamount}}</nobr></td>
            <td style="text-align:center"><nobr>{{row.f_oughtfee}}</nobr></td>
            <td style="text-align:center"><nobr>{{row.f_balance}}</nobr></td>
            <td style="text-align:center;width: 170px;"><nobr>{{row.f_hand_date}}</nobr></td>
          </template>
          <template partial='foot'></template>
        </data-grid>
      </criteria-paged>
    </div>
  </div>
</template>

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

  export default {
    title: 'WatchCost',
    name: 'WatchCost',
    data () {
      return {
        model: new PagedList('rs/sql/iot_getWatchCost', 50)
      }
    },
    props: {
      searchobj: {}
    },
    ready () {
      this.$refs.paged.$refs.criteria.search()
    },
    methods: {
      search (args) {
        args.condition = `${args.condition} and f_userfiles_id='${this.searchobj.f_userfiles_id}'`
        this.model.search(args.condition, args.model)
      }
    },

    watch: {
      // 监听查询对象
      'searchobj' (val) {
        console.log('f_userfiles_id5:', val.f_userfiles_id)
        if (this.searchobj != null) {
          this.$refs.paged.$refs.criteria.search()
        }
      }
    }
  }
</script>

