<template>
  <div class="flex" @keyup.enter="search" :style="{height:(oweShow?'auto':'100%')}">
    <criteria-paged :model="model" v-ref:paged :pager="!oweShow">
      <criteria partial='criteria' @condition-changed='$parent.selfSearch' v-ref:cri>
        <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
          <div class="row">
            <div :class="$parent.$parent.style">
              <label class="font_normal_body">组织机构</label>
              <res-select restype='organization'
                          @res-select="$parent.$parent.getorg"
                          :is-mul="false"
                          :initresid='$parent.$parent.curorgid'>
              </res-select>
            </div>
            <div :class="$parent.$parent.style">
              <label class="font_normal_body">团缴编码</label>
              <input type="text" class="input_search" style="width:60%" v-model="model.f_customer"
                     condition="f_customer like '%{}%'" placeholder="团缴编码"/>
            </div>
            <div :class="$parent.$parent.style" v-show="!$parent.$parent.listShow">
              <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 = '{}'" placeholder="团缴名称"/>
            </div>

            <div class="col-sm-3 form-group button-range">
              <button class="button_search button_spacing" @click="search()">查询</button>
              <button class="button_new button_spacing" style="width: max-content;" @click="$parent.$parent.add()" v-if="!$parent.$parent.chargeToChoose">建档
              </button>
              <button class="button_clear button_spacing" @click="clear">清空</button>
              <div style="float: right" class="button_spacing"
                   :class="{'button_shrink_top': criteriaShow,'button_shrink_bottom': !criteriaShow}"
                   @click="criteriaShow = !criteriaShow"></div>
            </div>
            <div class="row" v-show="criteriaShow">
              <div :class="$parent.$parent.style" v-show="$parent.$parent.listShow">
                <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 = '{}'" placeholder="团缴名称"/>
              </div>
              <div :class="$parent.$parent.style">
                <label class="font_normal_body">团缴地址</label>
                <input type="text" class="input_search" style="width:60%" v-model="model.f_address"
                       condition="f_address like '%{}%'" placeholder="团缴地址"/>
              </div>
              <div :class="$parent.$parent.style">
                <label class="font_normal_body">团缴状态</label>
                <v-select :value.sync="model.f_user_state" multiple
                          :search="false"
                          v-model="model.f_user_state"
                          :options='$parent.$parent.user_state' placeholder='请选择'
                          condition="f_user_state in {}"
                          close-on-select></v-select>
              </div>
            </div>
          </div>
        </div>
      </criteria>
      <data-grid :model="model" partial='list' class="list_area table_sy" v-ref:grid v-if="!$parent.oweShow" @dblclick="$parent.showOwe">
        <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>
            <th>
              <nobr>团缴户数</nobr>
            </th>
<!--            <th>-->
<!--              <nobr>操作</nobr>-->
<!--            </th>-->
          </tr>
        </template>
        <template partial='body'>
          <tr>
            <td style="text-align:center">
              <nobr>{{ $index + 1 }}</nobr>
            </td>
            <td style="text-align:center">
              <nobr>{{ row.f_customer }}</nobr>
            </td>
            <td style="text-align:center">
              <nobr>{{ row.f_user_name }}</nobr>
            </td>
            <td style="text-align:center">
              <nobr>{{ row.f_balance }}</nobr>
            </td>
            <td style="text-align:center">
              <nobr>{{ row.f_user_type }}</nobr>
            </td>
            <td style="text-align:center">
              <nobr>{{ row.f_address }}</nobr>
            </td>
            <td style="text-align:center">
              <nobr>{{ row.f_user_phone }}</nobr>
            </td>
            <td style="text-align:center" v-if="!$parent.$parent.$parent.chargeToChoose">
              <button @click.stop="$parent.$parent.$parent.operate(row)"
                      class="btn btn-link"><b>{{ row.sumuserfiles }}</b>
              </button>
            </td>
            <td style="text-align:center" v-else>
              <nobr>{{ row.sumuserfiles }}</nobr>
            </td>
<!--            <td style="text-align:center">-->
<!--              <nobr>-->
<!--                <button type="button" name="button" class="btn btn-link"-->
<!--                        @click.stop="$parent.$parent.$parent.modify(row)">修改-->
<!--                </button>-->
<!--              </nobr>-->
<!--            </td>-->
          </tr>
        </template>
        <template partial='foot'></template>
      </data-grid>
    </criteria-paged>
  </div>

  <owe-record-query v-if="oweShow" :f_civill_id="f_civill_id"></owe-record-query>
</template>

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

export default {
  data () {
    return {
      model: new PagedList('rs/sql/archivesList', 20),
      // 公司下拉
      curorgid: [this.$login.f.orgid],
      f_orgid: '',
      f_civill_id: null,
      oweShow: false
    }
  },
  title: '档案查询',
  props: {
    f_filialeids: {
      type: String
    },
    style: {
      type: String,
      default: 'col-sm-2 form-group'
    },
    // 控制在修改数据时显示少的查询条件,剩余隐藏
    listShow: {
      type: Boolean,
      default: false
    },
    // 收费时的展示控制
    chargeToChoose: {
      type: Boolean,
      default: false
    }
  },
  ready () {
    this.search()
  },
  methods: {
    showOwe (row) {
      if (this.chargeToChoose) {
        this.f_civill_id = row.id
        this.oweShow = true
      }
    },
    search () {
      this.$refs.paged.$refs.cri.search()
    },
    add () {
      if (this.f_filialeids) {
        this.$refs.paged.$refs.grid.selectStore.selected = null
        this.$dispatch('add')
      } else {
        this.$showAlert('请先选择左上角的所在分公司', 'warning', 2000)
      }
    },
    operate (val) {
      this.$dispatch('operate', val)
    },
    selfSearch (args) {
      if (!this.f_orgid) {
        this.getorg([this.$login.f.orgid])
      }
      args.condition = `${args.condition} and f_orgid in ${this.f_orgid}`
      this.oweShow = false
      this.model.search(args.condition, args.model)
      this.$refs.paged.$refs.grid.selectInit()
      this.$dispatch('newsearch')
    },
    getorg (val) {
      this.f_orgid = this.$login.convertToIn(val)
      this.f_filialeids = val[0]
    }
  },
  computed: {
    user_state() {
      return [{label: '全部', value: ''}, ...this.$appdata.getParam('用户状态')]
    }
  }

}
</script>
