<template>
  <div class="auto">
    <modal :show.sync="show" v-ref:modal large backdrop="false">
      <header slot="modal-header" class="modal-header">
        <button type="button" class="close" @click="closeModal()"><span>&times;</span></button>
        <h4 class="modal-title">添加分表</h4>
      </header>
      <article slot="modal-body" class="modal-body">
        <div style="height: 600px">
          <criteria-paged :model="model" v-ref:paged>
            <criteria partial='criteria' @condition-changed='$parent.$parent.selfSearch' v-ref:cri>
              <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
                <div class="row">
                  <div class="col-sm-4 form-group">
                    <label class="font_normal_body">客户编号</label>
                    <input type="text"
                           class="input_search"
                           style="width:60%"
                           v-model="model.f_userinfo_code"
                           condition="f_userinfo_code = '{}'"
                           placeholder="客户编号"/>
                  </div>
                  <div class="col-sm-4 form-group">
                    <label class="font_normal_body">客户名称</label>
                    <input type="text"
                           class="input_search"
                           style="width:60%"
                           v-model="model.f_user_name"
                           condition="f_user_name like '%{}%'"
                           placeholder="客户名称"/>
                  </div>

                  <div class="col-sm-4 form-group button-range">
                    <button class="button_search button_spacing" @click="search()">查询</button>
                    <div
                      :class="{'button_shrink_top':$parent.$parent.$parent.criteriaShow,'button_shrink_bottom':!$parent.$parent.$parent.criteriaShow}"
                      @click="$parent.$parent.$parent.hidden()"
                      class="button_spacing"
                      style="float: right">
                    </div>
                  </div>
                </div>
                <div class="row" v-if="$parent.$parent.$parent.criteriaShow">
                  <div class="col-sm-4 form-group">
                    <label class="font_normal_body">详细地址</label>
                    <input class="input_search"
                           condition="f_address like '%{}%'"
                           placeholder='详细地址'
                           style="width:60%"
                           type="text"
                           v-model="model.f_address">
                  </div>
                  <div class="col-sm-4 form-group">
                    <label class="font_normal_body">表&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号</label>
                    <input class="input_search"
                           condition="f_meternumber ='{}'"
                           placeholder='表号'
                           style="width:60%"
                           type="text"
                           v-model="model.f_meternumber" />
                  </div>
                </div>
              </div>
            </criteria>
            <data-grid :model="model" partial='list' :optional="true" style="overflow: auto"
                       class="list_area table_sy" v-ref:grid>
              <template partial='head'>
                <th>
                  <nobr>用户编号</nobr>
                </th>
                <th>
                  <nobr>用户姓名</nobr>
                </th>
                <th>
                  <nobr>表号</nobr>
                </th>
                <th>
                  <nobr>详细地址</nobr>
                </th>
                <th>
                  <nobr>气表品牌</nobr>
                </th>
                <th>
                  <nobr>气表型号</nobr>
                </th>
              </template>
              <template partial='body'>
                <td style="text-align:center">
                  <nobr>{{ row.f_userinfo_code }}</nobr>
                </td>
                <td style="text-align:center">
                  <nobr>{{ row.f_user_name }}</nobr>
                </td>
                <td style="text-align:center">
                  <nobr>{{ row.f_meternumber }}</nobr>
                </td>
                <td style="text-align:center">
                  <nobr>{{ row.f_address }}</nobr>
                </td>
                <td style="text-align:center">
                  <nobr>{{ row.f_meter_brand }}</nobr>
                </td>
                <td style="text-align:center">
                  <nobr>{{ row.f_meter_style }}</nobr>
                </td>
              </template>
              <template partial='foot'></template>
            </data-grid>
          </criteria-paged>
        </div>
      </article>
      <footer slot="modal-footer" class="modal-footer">
        <button type="button" class="btn btn-success"  @click='confirm()'>确认添加到总表</button>
      </footer>
    </modal>
  </div>
</template>

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

export default {
  data () {
    return {
      criteriaShow: false,
      batchRowList: [],
      selectRowLen: 0,
      f_reason: '',
      operateTitle: '',
      selectRow: null,
      operateShow: false,
      showOptional: false,
      batchUpdateAreaShow: false,
      model: new PagedList('rs/sql/sale_getHostMeterAllUser', 20)
    }
  },
  title: '添加总表用户档案列表',
  props: ['show', 'f_filialeids'],
  ready () {
    this.search()
  },
  methods: {
    confirm () {
      if (this.$refs.paged.$refs.grid.getRowData().length > 0) {
        this.batchRowList = this.$refs.paged.$refs.grid.getRowData()
        this.$dispatch('batchMove', this.batchRowList)
        this.$refs.paged.$refs.grid.selectInit()
        this.show = false
      } else {
        this.$showAlert('请至少选择一项！', 'warning', 2000)
      }
    },
    closeModal () {
      this.show = false
    },
    hidden () {
      this.criteriaShow = !this.criteriaShow
    },
    cancel () {
      this.$dispatch('cancel')
    },
    search () {
      this.$refs.paged.$refs.cri.search()
    },
    selfSearch (args) {
      if (this.f_filialeids) {
        args.condition = `${args.condition} and f_orgid = '${this.f_filialeids}'`
      } else {
        args.condition = `${args.condition} and f_orgid = '${this.$login.f.orgid}'`
      }
      args.condition = `${args.condition} and (f_host_meter_id is null or f_host_meter_id = '')`
      this.model.search(args.condition, args.model)
    }
  },
  events: {},
  computed: {},
  watch: {
    'data' (val) {
      if (val) {
        this.search()
      }
    }
  }
}
</script>
