<template>
  <div class="flex">
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='$parent.search' v-ref:criteria>
        <div novalidate class="form-horizontal select-overspread container-fluid auto" partial v-show="false" >
          <div class="row">
            <div class="form-group col-sm-4" >
              <label class="font_normal_body">客户编号</label>
              <input type="text" class="input_search" style="width:60%" v-model="model.f_userinfo_code" placeholder='客户编号'
                     condition="f_userinfo_code = '{}'" @keyup.enter="search()">
            </div>
            <div style = "float:right;margin-top:10px">
              <button class="button_search"  @click="search()" v-el:cba>查询</button>
            </div>
          </div>
        </div>
      </criteria>
      <data-grid :model="model" class="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>

          </tr>
        </template>
        <template partial='body' >
          <tr >
            <td style="text-align:center;">{{$index+1}}</td>
            <td style="text-align:center">{{row.f_field_name}}</td>
            <td style="text-align:center;white-space: nowrap;">{{row.f_used_content}}</td>
            <td style="text-align:center;white-space: nowrap;">{{row.f_new_content}}</td>
          </tr>
        </template>
        <template partial='foot'></template>
      </data-grid>
    </criteria-paged>
  </div>
</template>

<script>
  import {HttpResetClass, PagedList} from 'vue-client'
  export default {
    title: '气价变更信息',
    data () {
      return {
        model: new PagedList('/rs/sql/singleTable_OrderBy', 5,
          {
            tablename: `'t_pricechangedetail'`,
            items: '`*`',
            orderitem: '`id`'
          })
      }
    },
    props: ['row'],
    ready () {
    },
    methods: {

      search () {
        this.condition = `f_record_id = '${this.row.id}'`
        if (this.$refs.paged.$refs.criteria.condition) {
          this.condition += `and ${this.$refs.paged.$refs.criteria.condition}`
        }
        this.model.search(this.condition, this.model)
      }
    },
    watch: {
      'row' () {
        this.search()
      }
    }
  }
</script>

