<template>
  <form novalidate class="form-horizontal  span auto compatible" style="width: 100%;margin: auto" v-if="showUser">

    <div class="auto">
      <div style="width: 100%;height: 36px;background-color: #f1f8ff">
        <div style="width: 8px;height: 100%;background-color: #6aa6e2;margin-right: 20px;float: left"></div>
        <div style="width: auto;height:100%;float: left;"><p class="title-font" style="margin-top: 5px">用户基本信息：</p></div>
      </div>

      <div class="row-m" style="margin-top: 20px">
        <div class="col-m-l">
          <div class="col-m-ll">
            <p class="col-m-p">用户编号:</p>
          </div>
          <div>
            <input class="search_input input-font" type="text" readonly v-model="userinfo.f_userinfo_code" disabled="disabled">
          </div>
        </div>

        <div class="col-m-r">
          <div class="col-m-rr">
            <p class="col-m-p">楼 &nbsp;&nbsp; &nbsp;&nbsp; 号:</p>
          </div>
          <div>
            <input class="search_input input-font" type="text" readonly v-model="userinfo.f_building" @change="setParentValue('f_building')">
          </div>
        </div>
      </div>


      <div class="row-m">
        <div class="col-m-l">
          <div class="col-m-ll">
            <p class="col-m-p">用户名称:</p>
          </div>
          <div>
            <input class="search_input input-font" type="text" readonly v-model="userinfo.f_user_name" @change="setParentValue('f_user_name')">
          </div>
        </div>

        <div class="col-m-r">
          <div class="col-m-rr">
            <p class="col-m-p">单 &nbsp;&nbsp; &nbsp;&nbsp; 元:</p>
          </div>
          <div>
            <input class="search_input input-font" type="text" readonly v-model="userinfo.f_unit" @change="setParentValue('f_unit')">
          </div>
        </div>
      </div>


      <div class="row-m">
        <div class="col-m-l">
          <div class="col-m-ll">
            <p class="col-m-p">证件号码:</p>
          </div>
          <div>
            <input class="search_input input-font" type="text" readonly v-model="userinfo.f_idnumber" @change="setParentValue('f_idnumber')">
          </div>
        </div>
        <div class="col-m-r">
          <div class="col-m-rr">
            <p class="col-m-p">楼 &nbsp;&nbsp; &nbsp;&nbsp; 层:</p>
          </div>
          <div>
            <input class="search_input input-font" type="text" readonly v-model="userinfo.f_floor" @change="setParentValue('f_floor')">
          </div>
        </div>
      </div>



      <div class="row-m">
        <div class="col-m-l">
          <div class="col-m-ll">
            <p class="col-m-p">用户类型:</p>
          </div>
          <div>
            <input class="search_input input-font" type="text" readonly v-model="userinfo.f_check_type" disabled="disabled">
          </div>
        </div>
        <div class="col-m-r">
          <div class="col-m-rr">
            <p class="col-m-p">门&nbsp;牌&nbsp;号 :</p>
          </div>
          <div>
            <input class="search_input input-font" type="text" readonly v-model="userinfo.f_room" @change="setParentValue('f_room')">
          </div>
        </div>
      </div>


      <div class="row-m">
        <div class="col-m-l">
          <div class="col-m-ll">
            <p class="col-m-p">用户电话:</p>
          </div>
          <div>
            <input class="search_input input-font" type="text" readonly  v-model="userinfo.f_user_phone" @change="setParentValue('f_user_phone')"  >
          </div>
        </div>
        <div class="col-m-r">
          <div class="col-m-rr">
            <p class="col-m-p">用户性质:</p>
          </div>
          <div>
            <input class="search_input input-font" type="text" readonly  v-model="parentData.f_userproperties" @change="setParentValue('f_userproperties')"  >
            <!--           <v-select id="f_noncivil_style" :value.sync="parentData.f_userproperties" class="input-font"-->
            <!--                     :options='user_properties' placeholder='请选择用户性质'  :value-single="true"-->
            <!--                     close-on-select clear-button></v-select>-->
          </div>
        </div>
      </div>


      <div class="row-m">
        <div class="col-m-l">
          <div class="col-m-ll">
            <p class="col-m-p">区 &nbsp;&nbsp;/&nbsp;&nbsp; 县:</p>
          </div>
          <div>
            <input class="search_input input-font" type="text" readonly v-model="userinfo.f_area" @change="setParentValue('f_area')">
          </div>
        </div>
        <div class="col-m-r">
          <div class="col-m-rr">
            <p class="col-m-p">备注信息:</p>
          </div>
          <div>
            <input class="search_input input-font" type="text" readonly v-model="userinfo.f_comments" @change="setParentValue('f_comments')">
          </div>
        </div>
      </div>

      <div class="row-m">
        <div class="col-m-l">
          <div class="col-m-ll">
            <p class="col-m-p">街 &nbsp;&nbsp; &nbsp;&nbsp; 道:</p>
          </div>
          <div>
            <input class="search_input input-font" type="text" readonly v-model="userinfo.f_street" @change="setParentValue('f_street')">
          </div>
        </div>
        <div class="col-m-r">
          <div class="col-m-rr">
            <p class="col-m-p">小区名称:</p>
          </div>
          <div>
            <input class="search_input input-font" type="text" readonly v-model="userinfo.f_residential_area" @change="setParentValue('f_residential_area')">
          </div>
        </div>
      </div>

     <div class="row-m">
         <div class="col-m-rr" style="width: 12%">
           <p class="col-m-p">详细住址:</p>
         </div>
         <div>
           <input class="search_input input-font" style="width: 80%" type="text" readonly v-model="userinfo.f_address" @change="setParentValue('f_address')">
         </div>
     </div>
     <div class="row-m">
       <div class="col-m-l">
         <div class="col-m-ll">
           <p class="col-m-p">备用电话:</p>
         </div>
         <div>
           <input class="search_input input-font" type="text" readonly v-model="userinfo.f_rent_phone">
         </div>
       </div>
     </div>
   </div>
  </form>
</template>

<script>
  import Vue from 'vue'
  import * as Util from '../Util'
  import RadioGroup from 'vue-client/src/vue-strap/src/radioGroup'
  import Radio from 'vue-client/src/vue-strap/src/radioBtn'

  export default {
    title: '用户基本信息',
    data() {
      return {
        parentData: this.$parent.data,
        userinfo:this.$parent.data,
        model: {
          f_user_name: '',
          f_userinfo_code: '',
          f_area: '',
          f_address: '',
          f_user_phone: '',
          f_check_type:'',
          f_idnumber:'',
          f_street: '',
          f_building: '',
          f_unit: '',
          f_floor: '',
          f_room: '',
          f_residential_area: '',
          f_comments:'',
          f_userproperties:''
        },
        user_properties:this.$appdata.getParam('安检用户性质'),
        // user_properties:[
        //   {label: '平房', value: '平房'},
        //   {label: '多层', value: '多层'}
        // ],
        showUser: true,
        showInfo: false,
        /*user: {f_userinfo_id: this.$parent.$parent.data.f_userinfoid},*/
        // room_style : this.$appdata.getParam('民用房屋结构'),
        // heating_style : this.$appdata.getParam('供暖方式')
        // room_style: [
        //   {label: '平房', value: '平房'},
        //   {label: '多层', value: '多层'},
        //   {label: '小高层', value: '小高层'},
        //   {label: '别墅', value: '别墅'},
        //   {label: '独院', value: '独院'}
        // ],
        heating_style: [
          {label: '热力公司集中供暖', value: '热力公司集中供暖'},
          {label: '小区集中供暖', value: '小区集中供暖'},
          {label: '客户自行供暖', value: '客户自行供暖'},
          {label: '其他供暖', value: '其他供暖'}
        ],
        // room_style : [
        //   {label: '地上', value: '地上'},
        //   {label: '半地下', value: '半地下'},
        //   {label: '地下', value: '地下'},
        //   {label: '楼顶', value: '楼顶'}
        // ],
        noncivil_style : [
          {label: '餐饮用户', value: '餐饮用户'},
          {label: '公福用户', value: '公福用户'},
          {label: '锅炉用户', value: '锅炉用户'},
          {label: '工业用户', value: '工业用户'}
        ],
        userproperties:''
      }
    },
    ready() {

      //tag
      if(Vue.config.safecheck != undefined) {
        if (Vue.config.safecheck.ApproveConfig != undefined) {
          if (Vue.config.safecheck.ApproveConfig.userproperties != undefined) {
            this.userproperties = Vue.config.safecheck.ApproveConfig.userproperties
          }else{
            this.userproperties = false
          }
        }
      }
      Object.assign(this.model, this.model, this.userinfo)
    },

    methods: {
    }
  }
</script>
<style scoped>
  .app-header {
    border-radius: 50%;
    position: fixed;
    background: rgba(73, 158, 223, 0.12);
    color: #FFF;
    padding: 8px;
    text-align: center;
    font-size: 1.2em;
    z-index: 10;
    opacity: 0.5;
    bottom: 50px;
    margin-top: -20px;
  }

  .col-xs-4{
  }

  .col-xs-8{
    float: left;
  }
  .search_input {
    border: 1px solid #c0c0c0;
    border-radius: 3px;
    background-color: #f8fcff;
  }

  .userid-input {
    border: 0;
    background-color: #ffffff;
    width: 40%;
    border-radius: 3px;
  }

  .input-font {
    width: 170px;
    font: 15px PingFang-SC-Bold;
    color: #333333;
  }

  .input-diy{
    width: 100px;
  }
  .font {
    font: 16px PingFang-SC-Bold;
    color: #666666;
    margin-top: 5px
  }

  .btn-enter {
    background-color: #f5fbff;
    border-radius: 3px;
    border: 1px solid #499EDF;
  }

  .btn-enter-font {
    font: 15px PingFang-SC-Bold;
    color: #499edf;
    height: 20px;
    width: 40px;
  }

  .title-font{
    font: 18px PingFang-SC-Bold;
    color: #333333;
  }

  .row-m{
    width: 100%;
    height: 40px;
    border: #6aa6e2;
    margin-top: 10px;
    margin-left: 10px;
  }

  .col-m-l{
    width: 48%;
    height: 100%;
    float: left
  }

  .col-m-ll{
    width: 25%;
    height: 100%;
    float: left
  }

  .col-m-p{
    font-family: PingFang-SC-Bold;
    font-size: 16px;
    color: #666666;
    left: auto;
  }
  .col-m-r{
    width: 48%;
    height: 100%;
    margin-left: 20px;
    float: left
  }
  .col-m-rr{
    width: 30%;
    height: 100%;
    float: left
  }
</style>
