<template >
  <div id="stand-work-list" class="flex bg-white p-10">
    <div class="height:auto">
      <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" width="100%">
              <div class="col-sm-4" >
                <label class="font_normal_body" >&nbsp;开始时间</label>
                <datepicker placeholder="起始时间" style="width:60%"
                            :value.sync="model.f_start_date"
                            v-model="model.f_start_date"
                            :format="'yyyy-MM-dd'"
                            condition="f_operate_date >= to_date('{} 00:00:00','yyyy-mm-dd hh24:mi:ss')"
                ></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'"
                            condition="f_operate_date <= to_date('{} 23:59:59','yyyy-mm-dd hh24:mi:ss')"
                ></datepicker>
              </div>
              <div class="col-sm-4" >
                <label class="font_normal_body" >状态</label>
                <v-select :value.sync="model.f_state"
                          v-model="model.f_state"
                          style="width:60%"
                          :options='$parent.$parent.charge_state' placeholder='请选择'
                          condition="f_state = '{}'"
                          close-on-select></v-select>
              </div>
              <div class="span" style="float:right;">
                <button class="btn btn-success"  @click="search()" v-el:cba>查询</button>
              </div>
            </div>
          </div>
        </criteria>
        <data-grid :model="model" 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>
            </tr>
          </template>
          <template partial='body' partial='list' v-ref:grid>
            <tr >
              <td style="text-align: center;"><nobr>{{row.f_type}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_changemeter_fee}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_meter_base}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_newmeter_base}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_card_id}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_newcard_id}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_operate_date}}</nobr></td>
            </tr>
          </template>
          <template partial='foot'></template>
        </data-grid>
      </criteria-paged>
    </div>
  </div>
</template>

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

  export default {
    title: '收费',
    data () {
      return {
        condition: '1=1',
        model: new PagedList('rs/sql/changeMeterQuery', 15),
        charge_state: this.$appdata.getParam('收费状态') ? [{label: '全部', value: ''},...this.$appdata.getParam('收费状态')] : [],
        row: null,
        isdeal: true,
        show: false
      }
    },
    props:
      {
        searchdata:{},
        isdeal: {},
        args:{}
      },
    ready () {
      this.$refs.paged.$refs.criteria.model.f_state = ['有效']
      this.$refs.paged.$refs.criteria.search()
    },
    methods: {
      search(args){
        if(this.args && this.args.model) {
          this.condition=this.condition+` and   f_state='有效' `
          if(this.searchdata.f_user_id) {
            this.condition = `${this.$refs.paged.$refs.criteria.condition} and f_user_id = '${this.searchdata.f_user_id}'`
          } else if(this.searchdata.f_card_id){
            this.condition = `${this.$refs.paged.$refs.criteria.condition} and f_card_id = '${this.searchdata.f_card_id}'`
          }else if(this.searchdata.f_userinfo_id) {
            this.condition = `${this.$refs.paged.$refs.criteria.condition} and f_userinfo_id = '${this.searchdata.f_userinfo_id}'`
          }else {
            return
          }
          this.model.search(this.condition, this.args.model)
        }
      }
    },
    watch:{
      args(val){
        this.search()
      }
    }
  }
</script>
