<template>

  <div style="overflow-y:hidden;" class="span">
    <criteria-paged :model="model" class="list_area table_sy" 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>
              <v-select
                placeholder='充值状态'
                style="width:60%"
                :value.sync="model.f_state"
                v-model="model.f_state"
                :options='$parent.$parent.RechargeState'
                close-on-select
                condition="f_state='{}'">
              </v-select>
            </div>
           <div class="col-sm-4">
              <label class="font_normal_body">充值方式</label>
              <v-select
                style="width:60%"
                placeholder='充值方式'
                :value.sync="model.f_payment"
                v-model="model.f_payment"
                :options='$parent.$parent.RechargeType'
                close-on-select
                condition="f_payment='{}'">
              </v-select>
            </div>
           <div class="col-sm-4">
              <label class="font_normal_body">起始时间</label>
              <datepicker placeholder="起始时间"
                          style="width:60%"
                          :value.sync="model.f_start_date"
                          v-model="model.f_start_date"
                          :format="'yyyy-MM-dd HH:mm:ss'"
                          condition="f_operate_date > '{}'"
              ></datepicker>
            </div>
           <div class="col-sm-4">
              <label class="font_normal_body">结束时间</label>
              <datepicker placeholder="结束时间"
                          style="width:60%"
                          :value.sync="model.f_end_date"
                          v-model="model.f_end_date"
                          :format="'yyyy-MM-dd HH:mm:ss'"
                          condition="f_operate_date < '{}'"
              ></datepicker>
            </div>

          <div class="span" style="float:right;">
              <button class="button_search" @click="search()" v-el:cba>查询</button>
            </div>
        </div>
      </criteria>

      <data-grid partial='list' v-ref:grid :model="model" class="list_area table_sy">

        <template partial='head'>
          <tr>
            <th>序号</th>
            <th>充值日期</th>
            <th>充值方式</th>
            <th>上期余额(元)</th>
            <th>充值金额(元)</th>
            <th>本期余额(元)</th>
            <th>充值状态</th>
            <th>操作人</th>
          </tr>
        </template>
        <template partial='body'>
          <tr>
            <td style="text-align:center">{{$index+1}}</td>
            <td style="text-align:center">{{row.f_operate_date}}</td>
            <td style="text-align:center">{{row.f_payment}}</td>
            <td style="text-align:center">{{row.f_balance}}</td>
            <td style="text-align:center">{{row.f_collection}}</td>
            <td style="text-align:center">{{row.f_curbalance}}</td>
            <td style="text-align:center">{{row.f_state}}</td>
            <td style="text-align:center">{{row.f_operator}}</td>
          </tr>

        </template>
      </data-grid>
    </criteria-paged>
    `
  </div>
</template>

<script>
  import Checkbox from 'vue-strap/src/Checkbox'
import {PagedList} from 'vue-client'

  export default {
    title: 'WatchRecharge',
    name: 'WatchRecharge',
    data () {
      return {
        model: new PagedList('rs/sql/singleTable_OrderBy', 50, {
          tablename: "'" + this.tablename + "'",
          orderitem: "'" + this.orderitem + "'",
          items: "'" + this.items + "'"
        })
      }
    },
    props:
    {
      searchobj: {},
      tablename: {
        type: String,
        default: 't_sellinggas'
      },
      orderitem: {
        type: String,
        default: 'f_operate_date desc'
      },
      items: {
        type: String,
        default: '*'
      }
    },
    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)
      }
    },
    computed: {
      RechargeState () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('充值状态')]
      },
      RechargeType () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('充值方式')]
      }

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

<style>
  .form-input-group label {
    text-align: right;
    width: auto;
  }
</style>
