<template>
  <div class="span" style="width: auto;">
    <p class="bg-info text-center" style="padding: 8px;" >{{'地址变更记录'}}</p>
    <partial-view v-ref:pv @condition-changed="search">
      <criteria-paged :model="model" v-ref:paged :pager="false">
        <data-grid :model="model" partial='list' class="list_area table_sy"  v-ref:grid >
          <template partial='head'>
            <tr>
              <th>序号</th>
              <th>变更内容</th>
              <th>旧值</th>
              <th>新值</th>
              <th>变更人</th>
              <th>变更日期</th>
            </tr>
          </template>
          <template partial='body'>
            <td style="text-align: center;">{{$index + 1}}</td>
            <td style="text-align:center">{{row.f_field_name}}</td>
            <td style="text-align:center">{{row.f_used_content}}</td>
            <td style="text-align:center">{{row.f_new_content}}</td>
            <td style="text-align:center">{{row.f_operator}}</td>
            <td style="text-align:center">{{row.f_operate_date}}</td>
          </template>
        </data-grid>
      </criteria-paged>
    </partial-view>
  </div>
</template>

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

  export default {
    title: '地址变更列表',
    data () {
      return {
        model: new PagedList('rs/sql/address_singleTableOrderBy',20, {
          tablename: `'t_address_change'`,items: `'*'`,
          orderitem: `'f_operate_date desc'`}),
      }
    },
    props: ['address_id'],
    ready () {
      this.search()
    },
    methods: {
      search() {
        this.model.search(`f_address_id = '${this.address_id}'`)
      }
    },
    watch: {
      'address_id' () {
        this.search()
      }
    }
  }
</script>
