<<template>
  <div :class="{'basic-main':!showItem,'binary-left':showItem}" style="height:98%;" >
    <div style="flex: 1.5" class="flex">
      <div class="flex">
        <criteria-paged :model="model" v-ref:paged>
          <criteria partial='criteria' v-ref:criteria @condition-changed="$parent.selfSearch">
            <div novalidate class="form-inline auto" novalidate partial>
              <div class="row">
                  <div class="col-sm-2  form-group">
                    <label class="font_normal_body" for="f_userinfo_code">客户编号</label>
                    <input id="f_userinfo_code" type="text" class="input_search" style="width: 60%" v-model="model.f_userinfo_code"
                           condition="f_userinfo_code = '{}'" placeholder='请输入要查询的客户编号'>
                  </div>
                <div class="col-sm-2  form-group">
                  <label class="font_normal_body" for="f_user_name">客户姓名</label>
                  <input id="f_user_name" 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-2 form-group">
                  <label class="font_normal_body" for="f_insurance_type">险&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;种</label>
                  <v-select id="f_insurance_type"
                            v-model="model.f_insurance_type"
                            placeholder='请选择'
                            condition="f_insurance_type ='{}'"
                            :value.sync="model.f_insurance_type"
                            :options='$parent.$parent.insuranceType'
                            close-on-select clear-button>
                  </v-select>
                </div>
                <div class="col-sm-2  form-group">
                  <label class="font_normal_body" for="f_days">到期天数内</label>
                  <input id="f_days" type="text" class="input_search" style="width: 60%" v-model="model.f_days"
                         condition="f_days < {}" placeholder='请输入天数到期天数之内'>
                </div>
                  <div style="float: right">
                    <button class="button_search" @click="search()">查 询</button>
                    <div class="button_spacing"  style="float:right;"
                         :class="{'button_shrink_top':$parent.$parent.criteriaShow,'button_shrink_bottom':!$parent.$parent.criteriaShow}"
                         @click="$parent.$parent.hidden()"></div>
                  </div>
              </div>
              <div class="row"  v-show="$parent.$parent.criteriaShow" >
                <res-select-group :initres="$parent.$parent.initres"  :show-component="['company','department']" @re-res="$parent.$parent.getRes" v-ref:sel></res-select-group>
                <div class="col-sm-2  form-group">
                  <label class="font_normal_body">购买年限</label>
                  <input type="text" class="input_search" style="width: 60%" v-model="model.f_salecount"
                         condition="f_salecount = '{}'" placeholder='购买年限'>
                </div>
                <div class="col-sm-2 form-group">
                  <label class="font_normal_body" for="f_state">状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态</label>
                  <v-select id="f_state"
                            v-model="model.f_state"
                            placeholder='请选择'
                            condition="f_state ='{}'"
                            :value.sync="model.f_state"
                            :options='$parent.$parent.state'
                            close-on-select clear-button>
                  </v-select>
                </div>
                <div class="col-sm-2 form-group">
                  <label class="font_normal_body">开始时间</label>
                  <datepicker :format="'yyyy-MM-dd'"
                              :value.sync="model.f_ins_start_date"
                              placeholder="缴费开始时间"
                              condition="f_operate_date >= '{}'"
                              v-model="model.f_ins_start_date" style="width: 55%">
                  </datepicker>
                </div>
                <div class="col-sm-2 form-group">
                  <label class="font_normal_body">结束时间</label>
                  <datepicker :format="'yyyy-MM-dd'"
                              :value.sync="model.f_expiration_date"
                              placeholder="缴费结束时间"
                              condition="f_operate_date <= '{}'"
                              v-model="model.f_expiration_date" style="width: 55%">
                  </datepicker>
                </div>
              </div>
            </div>

          </criteria>
          <data-grid :model="model" v-ref:grid class="list_area table_sy" partial='list'>
            <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>
                <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>
                <th>
                  <nobr>购买年限</nobr>
                </th>
                <th>
                  <nobr>备注信息</nobr>
                </th>
            </template>
            <template partial='body'>
              <td style="text-align: center;">
                <nobr>{{$index + 1}}</nobr>
              </td>
              <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_address}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_idnumber}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_user_phone}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_fee_type}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_buy_date}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_expiration_date}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_shengxiao_date}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_last_insexpiration_date}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_days > 0 ? row.f_days : '已到期'}}</nobr>
              </td>
              <!--<td style="text-align: center;">-->
                <!--<nobr>{{row.f_money}}</nobr>-->
              <!--</td>-->
              <!--<td style="text-align: center;">-->
                <!--<nobr>{{row.f_payment}}</nobr>-->
              <!--</td>-->
              <td style="text-align: center;">
                <nobr>{{row.f_state}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_operate_date}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_ok_number}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_insurance_type}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_salecount}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_comments}}</nobr>
              </td>
            </template>
          </data-grid>
        </criteria-paged>
      </div>
    </div>
  </div>
</template>

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

  export default {
    name: 'InsuranceChargesDetails',
    title: '保险收费明细',
    data () {
      return {
        initres: {
          org: [this.$login.f.orgid],
          dep: [],
          user: []
        },
        f_state: '',
        state: this.$appdata.getParam('保险状态') ? this.$appdata.getParam('保险状态') : [],
        f_insurance_type: '',
        insuranceType: this.$appdata.getParam('险种') ? this.$appdata.getParam('险种') : [],
        orgCondtionStr: '',
        base: {},
        model: new PagedList('rs/sql/getInsuranceChargesList', 20),
        // 控制查询条件显示
        criteriaShow: false,
        // 公司下拉
        curorgid: [this.$login.f.orgid],
        f_filialeid: this.$login.f.orgid,
        percent: 0
      }
    },
    ready () {
      this.$refs.paged.$refs.criteria.search()
    },
    methods: {
      hidden () {
        this.criteriaShow = !this.criteriaShow
      },
      getRes (obj) {
        this.orgCondtionStr = obj
      },
      search () {
        this.$refs.paged.$refs.criteria.search()
      },
      getorg (val) {
        this.f_filialeid = val[0]
      },
      selfSearch (args) {
        if (!this.orgCondtionStr) {
          args.condition = `${args.condition}` + ' and f_orgid = ' + this.$login.f.orgid
        } else {
          args.condition = `${args.condition}` + this.orgCondtionStr
        }
        this.model.search(args.condition, args.model)
      }
    },
    computed: {}
  }
</script>
<style>
</style>
