<template>
  <partial-view v-ref:pv>
    <div class="panel panel-info auto" >
      <div class="panel-heading"  style="height: 35px">
        <h4 style="display:inline-block;margin-top: auto">档案信息</h4>
      </div>
      <div class="auto info-content">
        <div class="row" v-if="warninginfo.data.insMsg">
          <p align="center"><font color="red" style="font-weight: bold">{{warninginfo.data.insMsg}}</font></p>
        </div>

        <div class="row">
          <label class = "col-sm-5 " >&emsp;客户编号</label>
          <span class = "col-sm-7"><a @click="dealmsg(data)">{{data?data.f_userinfo_code:dafault.f_userinfo_code}}</a></span>
        </div>
        <div class="row">
          <label class = "col-sm-5 " >&emsp;客户名称</label>
          <span class = "col-sm-7">{{data?data.f_user_name:dafault.f_user_name}}</span>
        </div>
        <div class="row">
          <label class = "col-sm-5 " >&emsp;客户类型</label>
          <span class = "col-sm-7">{{data?data.f_user_type:dafault.f_user_type}}</span>
        </div>
        <div class="row">
          <label class = "col-sm-5 " >&emsp;账户余额</label>
          <span class = "col-sm-7">{{data ? data.f_balance:dafault.f_user_type}}</span>
        </div>
        <div class="row">
          <label class = "col-sm-5 " >&emsp;证件号码</label>
          <span class = "col-sm-7" style="word-break: break-all">{{data?data.f_idnumber:dafault.f_idnumber}}</span>
        </div>
        <div class="row">
          <label class = "col-sm-5 " >&emsp;客户电话</label>
          <span class = "col-sm-7">{{data?data.f_user_phone:dafault.f_user_phone}}
            <span v-if="data && data.f_user_phone" @click.stop="changeuserphone" class="glyphicon glyphicon-pencil  clickchange" title="修正客户电话"></span>
          </span>
        </div>
        <div class="row">
          <label class = "col-sm-5 " >&emsp;备用电话</label>
          <span class = "col-sm-7">{{data?data.f_rent_phone:dafault.f_rent_phone}}</span>
        </div>
        <div class="row">
          <label class = "col-sm-5 " >&emsp;用户状态</label>
          <span class = "col-sm-7">{{data?data.f_user_state:dafault.f_user_state}}</span>
        </div>
        <div class="row">
          <label class = "col-sm-5 " >&emsp;备注信息</label>
          <span class = "col-sm-7">{{data?data.f_comments:dafault.f_comments}}</span>
        </div>
        <div class="row">
          <label class = "col-sm-5 " >&emsp;客户地址</label>
          <span class = "col-sm-7">{{data?data.f_address:dafault.f_address}}</span>
        </div>
        <div class="row">
          <label class = "col-sm-5 " >&emsp;开户时间</label>
          <span class = "col-sm-7">{{data?data.f_open_date.substr(0,10):dafault.f_open_date}}</span>
        </div>
        <div class="row">
          <label class = "col-sm-5 " >&emsp;安装时间</label>
          <span class = "col-sm-7">{{data?data.f_install_date.substr(0,10):dafault.f_input_date}}</span>
        </div>
        <div class="row">
          <label class = "col-sm-5 " >&emsp;人&ensp;口&ensp;数</label>
          <span class = "col-sm-7" style="word-break: break-all">{{data?data.f_people_num:dafault.f_people_num}}</span>
        </div>
        <div class="row">
          <label class = "col-sm-5 " >&emsp;用户等级</label>
          <span class = "col-sm-7" style="word-break: break-all">{{data?data.f_user_level:dafault.f_people_num}}</span>
        </div>
        <div class="row">
          <label class = "col-sm-5 " >旧客户编号</label>
          <span class = "col-sm-7">{{data?data.f_olduserinfo_code:dafault.f_userinfo_code}}</span>
        </div>
        <div class="row">
          <label class = "col-sm-5 " >&emsp;保险用户</label>
          <span class = "col-sm-7" style="word-break: break-all">{{data?data.f_insurance_user:dafault.f_insurance_user}}</span>
        </div>
        <modal v-if="showselectncuserinfo" :show.sync="showselectncuserinfo" width="40%" title="修正客户电话号码" v-ref:modal large backdrop="false">
          <article slot="modal-body" class="modal-body">
            <div class="form-horizontal" >
              <div class="row">
                <div class="col-sm-12 form-group">
                  <label class="font_normal_body">旧客户电话</label>
                  <input disabled readonly type="text" style="width:80%" class="input_search" v-model="data.f_user_phone" placeholder='旧客户电话'>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-12 form-group">
                  <label class="font_normal_body">新客户电话</label>
                  <input type="text" style="width:80%" class="input_search" v-model="newuserphone" placeholder='新客户电话'>
                </div>
              </div>
            </div>
          </article>
          <footer slot="modal-footer" class="modal-footer">
            <button class="button_search" :disabled='!$m.valid ' @click="modifyUser">确定</button>
            <button type="button" class="button_clear" @click='close'>取消</button>
          </footer>
        </modal>
      </div>
    </div>
  </partial-view>
</template>

<script>
  /**
   *用户档案相关信息组件
   */

  export default {
    ready () {
      console.log('看看userinfo里面接收的data数据：', this.data)
    },
    title: '客户基本信息',
    data () {
      return {
        dafault: {
          f_user_name: '***',
          f_userinfo_code: '********',
          f_people_num: '**',
          f_idnumber: '****',
          f_user_phone: '************',
          f_address: '*****',
          f_user_type: '***',
          f_open_date: '****年**月**日',
          f_input_date: '****年**月**日',
          f_hand_date: '****年**月**日',
          f_rent_phone: '************',
          f_comments: '**',
          f_user_state: '****',
          f_insurance_user: '*'
        },
        model: null,
        showselectncuserinfo:false,
        newuserphone:'',
      }
    },
    props: ['data','warninginfo'],
    methods: {
      dealmsg (val) {
        if (val.f_userinfo_code !== '********') {
          this.$dispatch('deal-msg', val)
        }
      },
      changeuserphone(){
        //修正客户电话
        this.showselectncuserinfo = true;
        this.newuserphone ='';
      },
      async modifyUser(){
        let param ={
          new_userphone: this.newuserphone,
          f_userinfo_id: this.data.f_userinfo_id,
          f_user_id: this.data.f_user_id,
          f_operator: this.$login.f.name,
          f_operatorid: this.$login.f.id,
          f_orgid: this.$login.f.orgid,
          f_orgname: this.$login.f.orgs,
          f_depid: this.$login.f.depids,
          f_depname: this.$login.f.deps
        };
        await this.$resetpost('/rs/logic/changeuserinfo',{data:param},{resolveMsg: '修正成功', rejectMsg:null});
        this.data.f_user_phone = this.newuserphone
        this.$parent.$parent.close();
        this.$parent.$parent.clean();
        this.$parent.$parent.$refs.list.searchNoData();
        this.close();
      },
      close(){
        this.showselectncuserinfo = false;
        this.newuserphone ='';
      }
    },
    watch: {
      'data' (val) {
      }
    }
  }
</script>
<style scoped>
  .clickchange:hover{
    color:#3592ef;
    cursor: pointer;
  }

</style>
