<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"
                       :value.sync="model.f_userinfo_code"
                       v-model="model.f_userinfo_code"
                       placeholder="请输入客户编号"
                       condition="f_userinfo_code = '{}'" />
              </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 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'>
        <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">
                <button type="button" class="btn btn-lg btn-font btn-color" style="width: 25%;"
                        @click="$parent.$parent.$parent.inspect(row)">去登记
                </button>
              </div>
            </div>
          </div>
        </div>
      </list>
    </criteria-paged>
  </div>
</template>
<script>


import { HttpResetClass, PagedList } from 'vue-client'
export default {
  title: '保险登记',
  props:['usercode'],
  data() {
    return {
      model: new PagedList(`${this.$androidUtil.getProxyUrl()}/api/af-revenue/sql/getInsuranceList`, 20,
        {
          sort: `'asc'`
        }
      ),
      orderFields: {
        f_book_name: 'asc'
      },
      isShowRealityArrears: false,
      criteriaShow: false,
      booknames: [],//表册名
      show: false
    }
  },
  async ready() {
    this.getInitDate()
  },
  methods: {
    getInitDate(){
      if(this.usercode){
        this.$refs.paged.$refs.cri.model['f_userinfo_code'] =this.usercode
        this.model.f_userinfo_code= this.usercode
        //查询
        this.search()
      }
    },
    switchPage(type) {
      if (type === 'last' && this.currentPage > 1) {
        this.currentPage--
        this.search()
        return
      }
      if (type === 'next' && this.currentPage < this.totalPage) {
        this.currentPage++
        this.search()
        return
      }
    },
    // 返回到抄表待办界面，主动刷新一次
    clearCondition() {
      Object.keys(this.$refs.paged.$refs.cri.model).forEach((key) => {
        this.$refs.paged.$refs.cri.model[key] = []
      })
      this.$refs.paged.$refs.cri.model['f_meter_classify'] = ''
    },
    hidden() {
      this.criteriaShow = !this.criteriaShow
    },
    async selfSearch(args) {

      await this.model.search(args.condition, args.model)
    },
    search() {
      this.$refs.paged.$refs.cri.search()
    },
    inspect(param) {
      var propData = {
        _this: this,
        title: '保险登记详情',
        safe: false
      }
      param.tabname = this.tabname
      this.$dispatch('gotoson', propData)
      this.$goto('phone-insurance-purchase-detail', { data: param, model: param }, 'self', this.search)
    }
  },
  events: {
    'select'(val) {
      val.model = this.model
      this.$dispatch('changepage', val, 'save')
    },
    'phonehand-success'(type) {
      this.search()
    }
  },
  watch: {
    'currentPage'(val) {
      if (this.currentPage !== val) {
        this.search()
      }
    },
    'tabname'() {

    },
    'model.f_userinfo_id'(val) {
      if (val === '') {
        this.search()
      }
    }
  }
}
</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>
