<template>
  <div class="auto clearfix">
    <div class="row app-row col-xs-12 col-sm-6 col-md-6">
      <div class="col-xs-4 col-sm-4 col-md-4">
        <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
        <span class="text-left font">客户编号</span>
      </div>
      <div class="col-xs-8 col-sm-8 col-md-8">
        <p class="text-left show-font">{{ modelData.f_userinfo_code }}</p>
      </div>
    </div>
    <div class="row app-row col-xs-12 col-sm-6 col-md-6">
      <div class="col-xs-4 col-sm-4 col-md-4">
        <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
        <span class="text-left font">客户姓名</span>
      </div>
      <div class="col-xs-8 col-sm-8 col-md-8">
        <input type="text" class="form-control show-font" v-model="modelData.f_user_name" placeholder="请输入客户姓名">
      </div>
    </div>
    <div class="row app-row col-xs-12 col-sm-12 col-md-12">
      <div class="col-xs-4 col-sm-2 col-md-2">
        <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
        <span class="text-left font">客户地址</span>
      </div>
      <div class="col-xs-8 col-sm-10 col-md-10">
        <input type="text" class="form-control show-font" v-model="modelData.f_address" placeholder="请输入客户地址">
      </div>
    </div>
    <div class="row app-row col-xs-12 col-sm-6 col-md-6">
      <div class="col-xs-4 col-sm-4 col-md-4">
        <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
        <span class="text-left font">客户电话</span>
      </div>
      <div class="col-xs-8 col-sm-8 col-md-8">
        <input type="text" class="form-control show-font" v-model="modelData.f_user_phone" placeholder="请输入电话号码">
      </div>
    </div>
    <div class="row app-row col-xs-12 col-sm-6 col-md-6">
      <div class="col-xs-4 col-sm-4 col-md-4">
        <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
        <span class="text-left font">身份证号</span>
      </div>
      <div class="col-xs-8 col-sm-8 col-md-8">
        <input type="text" class="form-control show-font" v-model="modelData.f_idnumber" placeholder="请输入身份证号">
      </div>
    </div>
    <div class="row app-row col-xs-12 col-sm-6 col-md-6">
      <div class="col-xs-4 col-sm-4 col-md-4">
        <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
        <span class="text-left font">保单号</span>
      </div>
      <div class="col-xs-8 col-sm-8 col-md-8">
        <input type="text" class="form-control show-font" v-model="modelData.f_ins_number" placeholder="请输入保单号">
      </div>
    </div>
    <div class="row app-row col-xs-12 col-sm-6 col-md-6">
      <div class="col-xs-4 col-sm-4 col-md-4">
        <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
        <span class="text-left font">上期保费截至日期</span>
      </div>
      <div class="col-xs-8 col-sm-8 col-md-8">
        <p class="text-left show-font">{{ f_expiration_date }}</p>
      </div>
    </div>
    <div class="row app-row col-xs-12 col-sm-6 col-md-6">
      <div class="col-xs-4 col-sm-4 col-md-4">
        <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
        <span class="text-left font">投保日期</span>
      </div>
      <div class="col-xs-8 col-sm-8 col-md-8">
        <datepicker :value.sync="modelData.f_ins_start_date" v-model="modelData.f_ins_start_date" :format="'yyyy-MM-dd'"
                    placeholder="请选择投保日期" style="width: 60%">
        </datepicker>
      </div>
    </div>
    <div class="row app-row col-xs-12 col-sm-6 col-md-6">
      <div class="col-xs-4 col-sm-4 col-md-4">
        <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
        <span class="text-left font">购买年限</span>
      </div>
      <div class="col-xs-8 col-sm-8 col-md-8">
        <input type="text" placeholder="购买年限" style="width: 60%" class="form-control show-font" v-model="modelData.f_salecount">
      </div>
    </div>
    <div class="row app-row col-xs-12 col-sm-6 col-md-6">
      <div class="col-xs-4 col-sm-4 col-md-4">
        <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
        <span class="text-left font">购买日期</span>
      </div>
      <div class="col-xs-8 col-sm-8 col-md-8">
        <datepicker :value.sync="create_date" v-model="create_date" :format="'yyyy-MM-dd'"
                    placeholder="购买日期" style="width: 60%">
        </datepicker>
      </div>
    </div>
    <div class="row app-row col-xs-12 col-sm-6 col-md-6">
      <div class="col-xs-4 col-sm-4 col-md-4">
        <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
        <span class="text-left font">到期日期</span>
      </div>
      <div class="col-xs-8 col-sm-8 col-md-8">
        <datepicker :value.sync="modelData.f_expiration_date" v-model="modelData.f_expiration_date" :format="'yyyy-MM-dd'"
                    placeholder="到期日期" style="width: 60%">
        </datepicker>
      </div>
    </div>
    <div class="row app-row col-xs-12 col-sm-6 col-md-6">
      <div class="col-xs-4 col-sm-4 col-md-4">
        <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
        <span class="text-left font">金额</span>
      </div>
      <div class="col-xs-8 col-sm-8 col-md-8">
        <input type="text" class="form-control show-font" v-model="modelData.f_money" placeholder="请输入金额">
      </div>
    </div>
    <div class="row app-row col-xs-12 col-sm-6 col-md-6">
      <div class="col-xs-4 col-sm-4 col-md-4">
        <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
        <span class="text-left font">保险险种</span>
      </div>
      <div class="col-xs-8 col-sm-8 col-md-8">
        <input type="text" class="form-control show-font" v-model="modelData.f_insurance_type" placeholder="请输入保险险种">
      </div>
    </div>
    <div class="row app-row col-xs-12">
      <div class="col-xs-4 col-sm-4 col-md-4">
        <img src="../../../assets/add.png" style="width: 20px;" alt="">
        <span class="text-left font">备注</span>
      </div>
      <div class="col-xs-8 col-sm-8 col-md-8">
        <input class="form-control show-font" v-model="modelData.f_comments" placeholder="备注">
      </div>
    </div>
    <div class="col-xs-12 text-center  app-row">
      <button type="button" class="btn btn-lg btn-font btn-color" style="width: 22%;" @click="commit()">提交</button>
    </div>
    <work-busy :is-busy="isCommit"></work-busy>
  </div>
</template>
<script>
import { HttpResetClass } from 'vue-client'
import * as Util from '../../../components/Util'
import Vue from 'vue'
export default {
  title: '手机单户抄表',
  data() {
    return {
      create_date:Util.getNowDate(),
      isCommit:false,
      f_expiration_date:'',
      modelData:{}
    }
  },
  props: {
    data: {
      type: Object,
      default: function () {
        return {
        }
      }
    },
    model: {
      type: Object,
      default: {}
    }
  },
  ready() {
    this.modelData = JSON.parse(JSON.stringify(this.model))
    new HttpResetClass().load('post', `${this.$androidUtil.getProxyUrl()}/rs/sql/tel_singleTable_OrderBy`, {
      data: {
        items: 'tu.*',
        tablename: 't_userinfo ui left join t_userfees tu on tu.f_userinfo_id=ui.f_userinfo_id and tu.f_state = \'有效\'',
        condition: `ui.f_userinfo_id  = '${this.modelData.f_userinfo_id}' and tu.f_userinfo_id is not null`,
        orderitem: 'tu.f_expiration_date desc'
      }
    }).then(response => {
      if (response.data.length > 0) {
        this.modelData = Object.assign(this.modelData, response.data[0])
        this.f_expiration_date = response.data[0].f_expiration_date
      }
    })
    this.$set('modelData.f_money','')
    this.$set('modelData.f_fee_type','')
    this.$set('modelData.f_insurance_type','燃气险')
    this.$set('modelData.f_comments','')
    this.$set('modelData.f_salecount','1')
    this.$set('modelData.f_ins_number','')
    this.$set('modelData.f_ins_start_date',Util.toStandardDateString())
    this.$set('modelData.f_expiration_date','')

  },
  methods: {
    commit() {
      if (!this.modelData.f_money){
        this.$showMessage('金额未填写，请填写后重新尝试。')
        return
      }
      if (!this.modelData.f_ins_start_date){
        this.$showMessage('投保日期未选择，请选择后重新尝试。')
        return
      }
      if (!this.modelData.f_expiration_date){
        this.$showMessage('到期日期未选择，请选择后重新尝试。')
        return
      }
      if (!this.modelData.f_insurance_type){
        this.$showMessage('保险险种未填写，请填写后重新尝试。')
        return
      }
      this.isCommit = true
      let commit_data = this.modelData
      commit_data.f_buy_date = this.create_date
      commit_data.f_total_ins_charge = ''
      commit_data.f_operatorid = Vue.user.id
      commit_data.f_operator = Vue.user.name
      commit_data.f_operate_date = Util.toStandardTimeString()
      commit_data.f_state = '有效'
      commit_data.f_orgid = Vue.user.orgid
      commit_data.f_orgname = Vue.user.orgs
      commit_data.f_depid = Vue.user.depids
      commit_data.f_depname = Vue.user.deps
      commit_data.f_last_insexpiration_date = this.f_expiration_date
      delete commit_data.id
      new HttpResetClass().load('post', `${this.$androidUtil.getProxyUrl()}/rs/logic/saveInsInfo`, { data: commit_data }).then(response => {
        this.$showMessage('提交成功')
        this.isCommit = false
        this.$back()
        // this.$back()
      }).catch(error => {
        this.$showMessage('提交失败')
        this.isCommit = false
      })
    },
  },
  watch: {
    'modelData.f_ins_start_date'(new_var, old_var) {
      if (new_var) {
        this.modelData.f_expiration_date = Number(new_var.substring(0, 4)) + Number(this.modelData.f_salecount) + new_var.substring(4)
      } else if (old_var)  {
        this.modelData.f_expiration_date = Number(old_var.substring(0, 4)) + Number(this.modelData.f_salecount) + old_var.substring(4)
      }
    },
    'modelData.f_salecount'(new_var) {
      if (new_var && this.modelData.f_ins_start_date) {
        this.modelData.f_expiration_date = Number(this.modelData.f_ins_start_date.substring(0, 4)) + Number(new_var) + this.modelData.f_ins_start_date.substring(4)
      }
    }
  }
}
</script>
<style scoped>
.mt-5 {
  margin-top: 5px;
}

.mt-10 {
  margin-top: 10px;
}

.mt-20 {
  margin-top: 20px;
}

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

.app-row-none-border {
  background-color: white;
  padding: 10px 10px 0 10px;
}

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

.show-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;
}
</style>
