<template >
  <div class="flex">
    <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>
        </criteria>
        <data-grid :model="model" class="list_area 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>
            </tr>
          </template>
          <template partial='body' partial='list' v-ref:grid>
            <tr >
              <td style="text-align:center;">{{$index+1}}</td>
              <th style="text-align:center">{{row.f_brand_spec}}</th>
              <th style="text-align:center">{{row.f_typename}}</th>
              <th style="text-align:center">{{row.f_typenumber}}</th>
              <th style="text-align:center">{{row.f_number}}</th>
              <th style="text-align:center">{{row.f_unitprice}}</th>
              <th style="text-align:center">{{(row.f_number-0)*(row.f_unitprice-0)}}</th>
            </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/manage_singleTable', 20,{
          tablename: `'t_othercharge_detail'`,
          items: '`*`',
          orderitem: '`id`'

        })

      }
    },
    props:['otherchargeid'],
    ready() {
      this.$refs.paged.$refs.criteria.search()
    },
    methods: {
      search() {
        console.log(`f_othercharge_id='${this.otherchargeid}'`)
       this.condition=`f_othercharge_id='${this.otherchargeid}'`
        this.model.search(this.condition, this.model)
      }

    }
  }
</script>
