<template>
  <div class="auto">
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='$parent.selfSearch' v-ref:cri>
        <div partial>
          <form>
            <div class="row app-row">
              <div class="col-xs-5" style="margin-bottom: 6px">
                <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
                <span class="text-left font">客户编号</span>
              </div>
              <div class="col-xs-7">
                <input class="form-control" v-model="model.f_userinfo_code" placeholder="请输入客户编号"
                       condition="f_userinfo_code like '%{}%'" />
              </div>
            </div>
            <div class="row app-row">
              <div class="col-xs-5" style="margin-bottom: 6px">
                <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
                <span class="text-left font">客户姓名</span>
              </div>
              <div class="col-xs-7">
                <input type="text" class="form-control" v-model="model.f_user_name" placeholder="请输入客户姓名"
                       condition="f_user_name like '%{}%'" />
              </div>
            </div>
            <div class="row app-row">
              <div class="col-xs-5" style="margin-bottom: 6px">
                <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
                <span class="text-left font">客户电话</span>
              </div>
              <div class="col-xs-7">
                <input type="text" class="form-control" v-model="model.f_user_phone" placeholder="请输入客户电话"
                       condition="f_user_phone like '%{}%'" />
              </div>
            </div>
            <div class="row app-row">
              <div class="col-xs-5" style="margin-bottom: 6px">
                <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
                <span class="text-left font">客户地址</span>
              </div>
              <div class="col-xs-7">
                <input type="text" class="form-control" v-model="model.f_address" placeholder="请输入客户地址"
                       condition="f_address like '%{}%'" />
              </div>
            </div>
            <div class="row app-row">
              <div class="col-xs-5" style="margin-bottom: 6px">
                <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
                <span class="text-left font">投保日期开始</span>
              </div>
              <div class="col-xs-7">
                <datepicker :value.sync="model.f_ins_start_date" v-model="model.f_ins_start_date" :format="'yyyy-MM-dd'"
                            placeholder="投保日期开始" style="width: 100%" condition="f_ins_start_date >= '{}'">
                </datepicker>
              </div>
            </div>
            <div class="row app-row">
              <div class="col-xs-5" style="margin-bottom: 6px">
                <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
                <span class="text-left font">投保日期结束</span>
              </div>
              <div class="col-xs-7">
                <datepicker :value.sync="model.f_ins_end_date" v-model="model.f_ins_end_date" :format="'yyyy-MM-dd'"
                            placeholder="投保日期结束" style="width: 100%" condition="f_ins_start_date <= '{}'">
                </datepicker>
              </div>
            </div>
            <div class="row text-center app-row">
              <button type="button" class="btn btn-lg btn-font btn-color" style="width: 25%;"
                      @click="$parent.$parent.search()">查询
              </button>
              <button type="button" class="btn btn-lg btn-font btn-color" style="width: 25%;"
                      @click="$parent.$parent.clearCondition">清空
              </button>
            </div>
          </form>
        </div>

      </criteria>
      <list :model="model" partial='list' v-ref:list>
        <div partial>
          <div class="panel" style="padding: 10px 10px 5px 10px;">
            <div class="panel-body panel-self">
              <div class="row">
                <p class="panel-title col-xs-3 text-left font">客户编号:</p>
                <p class="panel-title col-xs-9 text-left input-font">{{ row.f_userinfo_code }}</p>
              </div>
              <div class="row">
                <p class="panel-title col-xs-3 text-left font">客户名称:</p>
                <p class="panel-title col-xs-9 text-left input-font">{{ row.f_user_name }}</p>
              </div>
              <div class="row">
                <p class="panel-title col-xs-3 text-left font">客户地址:</p>
                <p class="panel-title col-xs-9 text-left input-font">{{ row.f_address }}</p>
              </div>
              <div class="row">
                <p class="panel-title col-xs-3 text-left font">客户电话:</p>
                <p class="panel-title col-xs-9 text-left input-font">{{ row.f_user_phone }}</p>
              </div>
              <div class="row">
                <p class="panel-title col-xs-3 text-left font">缴险金额:</p>
                <p class="panel-title col-xs-9 text-left input-font">{{ row.f_money }}</p>
              </div>
              <div class="row">
                <p class="panel-title col-xs-3 text-left font">保险险种:</p>
                <p class="panel-title col-xs-9 text-left input-font">{{ row.f_insurance_type }}</p>
              </div>
              <div class="row">
                <p class="panel-title col-xs-3 text-left font">保险类型:</p>
                <p class="panel-title col-xs-9 text-left input-font">{{ row.f_fee_type }}</p>
              </div>
              <div class="row">
                <p class="panel-title col-xs-3 text-left font">开始时间:</p>
                <p class="panel-title col-xs-9 text-left input-font">{{ row.f_ins_start_date }}</p>
              </div>
              <div class="row">
                <p class="panel-title col-xs-3 text-left font">到期时间:</p>
                <p class="panel-title col-xs-9 text-left input-font">{{ row.f_expiration_date }}</p>
              </div>
              <div class="row">
                <p class="panel-title col-xs-3 text-left font">操作人:</p>
                <p class="panel-title col-xs-9 text-left input-font">{{ row.f_operator }}</p>
              </div>
              <div class="row">
                <p class="panel-title col-xs-3 text-left font">备注:</p>
                <p class="panel-title col-xs-9 text-left input-font">{{ row.f_comments }}</p>
              </div>
            </div>
          </div>
        </div>
      </list>
    </criteria-paged>
  </div>
</template>
<script>

  import { HttpResetClass, PagedList } from 'vue-client'
  import Vue from 'vue'
  export default {
    title: '保险登记',
    props: ['data', 'tabname'],
    data() {
      return {
        model: new PagedList(`${this.$androidUtil.getProxyUrl()}/rs/sql/getInsuranceChargesList`, 20,
          {
            sort: `'asc'`
          }
        ),
      }
    },
    async ready() {
      let dt = new Date()
      let year = dt.getFullYear()
      let month = dt.getMonth()-2
      if(month<=0){
        year = year -1
        month = dt.getMonth()+10
      }
      let date = dt.getDate()
      this.$refs.paged.$refs.cri.model.f_ins_start_date = year + '-' + (month<10? '0'+ month : month) + '-' + (date<10? '0'+ date : date)
    },
    methods: {
      clearCondition() {
        Object.keys(this.$refs.paged.$refs.cri.model).forEach((key) => {
          this.$refs.paged.$refs.cri.model[key] = []
        })
      },
      selfSearch(args) {
        args.condition += ` and f_operatorid = '${Vue.user.id}' and f_state != '无效'`
        this.model.search(args.condition, args.model)
      },
      search() {
        this.$refs.paged.$refs.cri.search()
      },

    },
    events: {

    },
    watch: {

    }
  }
</script>
<style>
  .bg {
    background-color: blue;
    height: 1px;
    border: 0;
  }

  .app-row {
    background-color: white;
    padding: 10px 10px 0 10px;
    border-bottom: 1px solid rgba(235, 235, 235, 0.5);
  }

  .search_input {
    border: 0;
    outline: none;
  }

  .font {
    font: 15px PingFang-SC-Medium;
    color: #666666;
  }

  .input-font {
    font: 15px PingFang-SC-Medium;
    color: #333333;
  }

  .btn-font {
    font: 600 16px PingFang-SC-Bold;
    color: #499EDF;
  }

  .btn-color {
    background-color: #FFFFFF;
    border-radius: 10px;
    border: 1px solid #499EDF;
  }

  .app-text {
    font-size: 12px;
  }

  .panel-self {
    border-radius: 10px;
    border: 1px solid #499EDF;
    background-color: #F8F8F8;
  }

  .yybtn-color {
    background-color: #499edf;
    border-radius: 4px;
    border: 1px solid #499EDF;
    color: #FFFFFF;
    font: 14px PingFang-SC-Bold;
  }

  .qxbtn-color {
    background-color: #FFFFFF;
    border-radius: 4px;
    color: #499edf;
    font: 14px PingFang-SC-Bold;
    border: 1px solid #499EDF;
  }

  .sort-caret {
    display: inline-block;
    width: 0;
    height: 0;
    border: 0;
    content: "";
    position: absolute;
    left: 3px;
    z-index: 2;
  }

  .descending {
    bottom: -30px;
    border-top: 5px solid #97a8be;
    border-bottom: none;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
  }

  .ascending {
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    top: 9px;
    border-top: none;
    border-bottom: 5px solid #97a8be;
  }

  .ascend .ascending {
    border-bottom-color: #48576a;
  }

  .descend .descending {
    border-top-color: #48576a;
  }
</style>
