<template>
  <form novalidate class="form-horizontal  span auto compatible" style="width: 95%;margin: auto" v-if="showUser">
    <div class="row app-row" :class="style__">
      <div class="col-xs-4" style="margin-top: 7px">
        <img src="../../assets/用户ID.png" style="width: 20px;" alt="">
        <label class="font text-left">用户编号:</label>
      </div>
<!--      <div class="col-xs-8" >-->
<!--        <input class="userid-input input-font" type="text" v-model="model.f_userinfo_code" disabled="disabled">-->
<!--        <button type="button" class="btn text-rigth  btn-enter btn-enter-font" @click="enter()" style="margin-bottom: 5px;float: right">记录查询-->
<!--        </button>-->
<!--      </div>-->
    </div>
    <div class="row app-row" :class="style__">
      <div class="col-xs-4">
        <img src="../../assets/户姓名.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label class="font text-left">用户名称:</label>
      </div>
      <div class="col-xs-8">
        <input class="search_input input-font" type="text" v-model="model.f_user_name" @change="setParentValue('f_user_name')">
      </div>
    </div>
    <div class="row app-row" :class="style__">
      <div class="col-xs-4">
        <img src="../../assets/用户姓名.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label class="font text-left">证件号码:</label>
      </div>
      <div class="col-xs-8">
        <input class="search_input input-font" type="text" v-model="model.f_idnumber" @change="setParentValue('f_idnumber')">
      </div>
    </div>
    <div class="row app-row" :class="style__">
      <div class="col-xs-4">
        <img src="../../assets/用户ID.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label class="font text-left">用户类型:</label>
      </div>
      <div class="col-xs-8">
        <input class="search_input input-font" type="text" v-model="model.f_check_type" disabled="disabled">
      </div>
    </div>
    <div class="row app-row" :class="style__">
      <div class="col-xs-4">
        <img src="../../assets/用户电话.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label class="font text-left">用户电话:</label>
      </div>
      <div class="col-xs-8">
        <input class="search_input input-font" type="text" v-model="model.f_user_phone" @change="setParentValue('f_user_phone')"  >
      </div>
    </div>
    <div class="row app-row" :class="style__">
      <div class="col-xs-4">
        <img src="../../assets/小区.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label class="font text-left">区 &nbsp;&nbsp;/&nbsp;&nbsp; 县:</label>
      </div>
      <div class="col-xs-8">
        <input class="search_input input-font" type="text" v-model="model.f_area" @change="setParentValue('f_area')">
      </div>
    </div>
    <div class="row app-row" :class="style__">
      <div class="col-xs-4">
        <img src="../../assets/小区.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label class="font text-left">街 &nbsp;&nbsp; &nbsp;&nbsp; 道:</label>
      </div>
      <div class="col-xs-8">
        <input class="search_input input-font" type="text" v-model="model.f_street" @change="setParentValue('f_street')">
      </div>
    </div>
    <div class="row app-row" :class="style__">
      <div class="col-xs-4">
        <img src="../../assets/小区.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label class="font text-left">小区名称:</label>
      </div>
      <div class="col-xs-8">
        <input class="search_input input-font" type="text" v-model="model.f_residential_area" @change="setParentValue('f_residential_area')">
      </div>
    </div>
    <div class="row app-row" :class="style__">
      <div class="col-xs-4">
        <img src="../../assets/小区.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label class="font text-left">楼 &nbsp;&nbsp; &nbsp;&nbsp; 号:</label>
      </div>
      <div class="col-xs-8">
        <input class="search_input input-font" type="text" v-model="model.f_building" @change="setParentValue('f_building')">
      </div>
    </div>
    <div class="row app-row" :class="style__">
      <div class="col-xs-4">
        <img src="../../assets/小区.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label class="font text-left">单 &nbsp;&nbsp; &nbsp;&nbsp; 元:</label>
      </div>
      <div class="col-xs-8">
        <input class="search_input input-font" type="text" v-model="model.f_unit" @change="setParentValue('f_unit')">
      </div>
    </div>
    <div class="row app-row" :class="style__">
      <div class="col-xs-4">
        <img src="../../assets/小区.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label class="font text-left">楼 &nbsp;&nbsp; &nbsp;&nbsp; 层:</label>
      </div>
      <div class="col-xs-8">
        <input class="search_input input-font" type="text" v-model="model.f_floor" @change="setParentValue('f_floor')">
      </div>
    </div>
    <div class="row app-row" :class="style__">
      <div class="col-xs-4">
        <img src="../../assets/小区.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label class="font text-left">门&nbsp;牌&nbsp;号 :</label>
      </div>
      <div class="col-xs-8">
        <input class="search_input input-font" type="text" v-model="model.f_room" @change="setParentValue('f_room')">
      </div>
    </div>
    <div class="row app-row" :class="style__">
      <div class="col-xs-4">
        <img src="../../assets/详细住址.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label class="font text-left">详细住址:</label>
      </div>
      <div class="col-xs-8">
        <input class="search_input input-font" type="text" v-model="model.f_address" @change="setParentValue('f_address')">
      </div>
    </div>

    <div class="row app-row" :class="style__"  v-if="userproperties == 'true' || userproperties == true">
      <div class="col-xs-4" style="margin-top: 5px">
        <img src="../../assets/用户类型.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label for="f_room_style" class="font text-left">用户性质:</label>
      </div>
      <div class="col-xs-8" style="margin-bottom: 8px">
        <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 class="col-sm-8">
       <a href="#" class="btn btn-primary" @click="editUserInfo">修改用户信息</a>
     </div>-->
    <div class="row app-row" :class="style__" v-if="model.f_check_type == '民用' && (userproperties == 'false' || userproperties == false)">
      <div class="col-xs-4" style="margin-top: 5px">
        <img src="../../assets/房屋结构.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label for="f_room_style" class="font text-left">房屋结构:</label>
      </div>
      <div class="col-xs-8" style="margin-bottom: 8px">
        <v-select id="f_noncivil_style" :value.sync="parentData.f_room_style" class="input-font"
                  :options='room_style' placeholder='请选择房屋结构'  :value-single="true"
                  close-on-select clear-button></v-select>
      </div>
    </div>


    <!--<label class="col-sm-2 text-left">房屋结构:</label>-->
    <!--<div class="col-sm-10" style="display: inline">-->
    <!--<radio-group :value.sync="model.f_room_style" type="success" buttons="false">-->
    <!--<radio value="平房">平房</radio>-->
    <!--<radio value="多层">多层</radio>-->
    <!--<radio value="小高层">小高层</radio>-->
    <!--<radio value="高层">高层</radio>-->
    <!--<radio value="别墅">别墅</radio>-->
    <!--<radio value="独院">独院</radio>-->
    <!--</radio-group>-->

    <div class="row app-row" :class="style__" v-if="model.f_check_type == '民用' && (userproperties == 'false' || userproperties == false)">
      <div class="col-xs-4" style="margin-top: 5px">
        <img src="../../assets/供暖方式.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label for="f_heating_style" class="font text-left">供暖方式:</label>
      </div>
      <div class="col-xs-8" style="margin-bottom: 8px">
        <v-select id="f_noncivil_style" :value.sync="parentData.f_heating_style" class="input-font"
                  :options='heating_style' placeholder='请选择供暖方式' :value-single="true"
                  close-on-select clear-button></v-select>
      </div>
    </div>

    <!--<div class="col-xs-12 col-sm-12 col-md-12 form-input-group">-->
    <!--<label for="f_room_style" class="col-xs-4 control-label text-left">供暖方式：</label>-->
    <!--<v-select id="f_room_style" :value.sync="model.f_heating_style" class="col-xs-8"-->
    <!--:options='heating_style' placeholder='请选择供暖方式'-->
    <!--v-model="model.f_heating_style" close-on-select clear-button></v-select>-->

    <!--&lt;!&ndash;<label class="col-sm-2 text-left">供暖方式:</label>&ndash;&gt;-->
    <!--&lt;!&ndash;<radio-group :value.sync="model.f_heating_style" type="success" buttons="false">&ndash;&gt;-->
    <!--&lt;!&ndash;<radio value="热力公司集中供暖">热力公司集中供暖</radio>&ndash;&gt;-->
    <!--&lt;!&ndash;<radio value="小区集中供暖">小区集中供暖</radio>&ndash;&gt;-->
    <!--&lt;!&ndash;<radio value="客户自行供暖">客户自行供暖</radio>&ndash;&gt;-->
    <!--&lt;!&ndash;<radio value="其他供暖">其他供暖</radio>&ndash;&gt;-->
    <!--&lt;!&ndash;</radio-group>&ndash;&gt;-->
    <!--</div>-->

    <div class="row app-row" :class="style__" v-show="model.f_heating_style == '其他供暖' && (userproperties == 'false' || userproperties == false)">
      <div class="col-xs-4">
        <img src="../../assets/供暖方式.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label class="font text-left">其他供暖方式:</label>
      </div>
      <div class="col-xs-8">
        <input class="search_input input-font" type="text" v-model="model.f_heating_style_">
      </div>
    </div>
    <div class="row app-row" :class="style__" v-if="model.f_check_type == '非民用' && (userproperties == 'false' || userproperties == false)">
      <div class="col-xs-4" style="margin-top: 5px">
        <img src="../../assets/房屋结构.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label for="f_room_style" class="font text-left">房屋结构:</label>
      </div>
      <div class="col-xs-8 select">
        <v-select id="f_room_style" :value.sync="parentData.f_room_style" class="input-font"
                  :options='room_style' placeholder='请选择房屋结构'  :value-single="true"
                  close-on-select clear-button></v-select>
      </div>
    </div>
    <div class="row app-row" :class="style__" v-if="model.f_check_type == '非民用' && (userproperties == 'false' || userproperties == false)">
      <div class="col-xs-4" style="margin-top: 5px">
        <img src="../../assets/用户类型.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label for="f_noncivil_style" class="font text-left">用户类型:</label>
      </div>
      <div class="col-xs-8 select" >
        <v-select id="f_noncivil_style" :value.sync="parentData.f_noncivil_style" class="input-font"
                  :options='noncivil_style' placeholder='请选择用户类型'  :value-single="true"
                  close-on-select clear-button></v-select>
      </div>
    </div>
    <div class="row app-row" :class="style__">
      <div class="col-xs-4">
        <img src="../../assets/审核状态.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label class="font text-left">备注信息:</label>
      </div>
      <div class="col-xs-8">
        <input class="search_input input-font" type="text" v-model="model.f_comments" @change="setParentValue('f_comments')">
      </div>
    </div>

    <!--<div class="row app-row" :class="style__" v-if="$parent.$parent.role == 'inspect'">-->
      <!--<div class="col-xs-6 text-center">-->
        <!--<button  type="button" class="btn btn-primary" @click="create()">生成地址</button>-->
      <!--</div>-->
      <!--<div class="col-xs-6 text-center">-->
        <!--<button  type="button" class="btn btn-primary" @click="editUserInfo">上传信息</button>-->
      <!--</div>-->
    <!--</div>-->

    <div style="height:50px;"></div>
  </form>
  <div v-if="showInfo">
    <div class="page-header app-header auto">
      <div @click='disapprove()'>
        <img src="../../assets/back.png"/>
      </div>
    </div>
    <phone-info-table :user="user" :is-need-condition="false" :is-group="false"></phone-info-table>
  </div>
</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.$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:''
      }
    },
    props: ['userinfo'],
    ready() {
      console.log('查询到的data上传状态' + JSON.stringify(this.$parent.$parent.data))
      console.log('查询到的item上传状态' + JSON.stringify(this.$parent.$parent.item))
      console.log('查询到的上传状态' + JSON.stringify(this.$parent.$parent.item.f_upload_state))
      if (this.$parent.$parent.role == 'repair') {
        this.$set('style__', 'divmask')
        this.$set('style_view_', '')
      }
      else if (this.$parent.$parent.role == 'view' || this.$parent.$parent.item.f_upload_state == '已传') {
        this.$set('style__', 'divmask')
        this.$set('style_view_', 'divmask')
        console.log('set style for ....')
      } else {
        this.$set('style__', '')
        this.$set('style_view_', '')
      }

      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
          }
        }
      }
      console.log('用户信息。。。', this.userinfo)
      Object.assign(this.model, this.model, this.userinfo)
    },
    methods: {
      enter() {
        this.$parent.$parent.showBack = false
        this.showUser = false
        this.showInfo = true
      },
      disapprove() {
        this.$parent.$parent.showBack = true
        this.showUser = true
        this.showInfo = false
      },
      editUserInfo() {
        var r = confirm("确定是否修改用户信息？")
        if (r) {
          this.$resetpost(`${this.$androidUtil.getProxyUrl()}/api/af-safecheck/logic/SaveEntity`,
                  {
                    data: {
                      row: {
                        f_time: Util.toStandardTimeString(),
                        f_plan_item_id: this.model.f_check_item_id,
                        f_modifier: Vue.user.name,
                        f_modifier_id: Vue.user.id,
                        f_modify_type: '用户档案',
                        f_userinfoid: this.model.f_userinfoid,
                        f_userinfo_code: this.model.f_userinfo_code,
                        f_user_name: this.model.f_user_name,
                        f_approved: '未审核',
                        filialestr: this.parentData.f_filialeid,
                        version: this.model.version,
                        f_content: {
                          "f_user_name":this.model.f_user_name,
                          "f_user_phone": this.model.f_user_phone,
                          "f_area": this.model.f_area,
                          "f_street": this.model.f_street,
                          "f_building": this.model.f_building,
                          "f_unit": this.model.f_unit,
                          "f_floor": this.model.f_floor,
                          "f_room": this.model.f_room,
                          "f_residential_area": this.model.f_residential_area,
                          "f_address": this.model.f_address,
                          "f_comments":this.model.f_comments,
                          "f_userproperties":this.model.f_userproperties
                        }
                      },
                      tablename: 't_modify_userinfo'
                    }
                  }).then((res) => {
            this.$showMessage("上传成功！")
          }).
          catch(() => {
            this.$showMessage("上传失败！")
          })
        }
      },
      //取暖方式框赋值
      assigHeating(val) {
        console.log(`val=${val}`)
        this.model.f_heating_style = val
        this.parentData.f_heating_style = this.model.f_heating_style
      },
      //房屋结构框赋值
      assigRoom(val) {
        console.log(`val[0]=${val}`)
        if (val.length == 0) {
          val = ['']
        }
        this.model.f_room_style = val[0]
        this.parentData.f_room_style = this.model.f_room_style
      },
      //更新父组件用户信息
      setParentValue(key){
        if (key == 'f_user_phone') {
          if (this.model.f_user_phone != '') {
            if (!(/^[0-9]*$/.test(this.model[key]))) {
              this.$showMessage("电话号有误，请重填")
              this.model[key] = this.parentData[key]
              return
            }
          }
        }
        console.log('asd==', this.model[key])
        this.parentData[key] = this.model[key]
        console.log('asd==', this.parentData[key])
      },

      create(){
        let addresstype = 'A'
        if (Vue.config.safecheck != undefined) {
          if (Vue.config.safecheck.ApproveConfig != undefined) {
            if (Vue.config.safecheck.ApproveConfig.addresstype != undefined) {
              addresstype = Vue.config.safecheck.ApproveConfig.addresstype
            }
          }
        }
        if (addresstype == 'A') {
          this.createA()
        } else if (addresstype == 'B') {
          this.createB()
        } else if (addresstype == 'C') {
          this.createC()
        } else if (addresstype == 'D') {
          this.createD()
        }
      },
      createA(){
        if (!this.model.f_street) {
          this.$set('model.f_street', ' ')
          this.$set('parentData.f_street', ' ')
        }
        if (!this.model.f_residential_area) {
          this.$set('model.f_residential_area', ' ')
          this.$set('parentData.f_residential_area', ' ')
        }
        let address = this.model.f_street + this.model.f_residential_area
        if (this.model.f_building) {
          address += isNaN(this.model.f_building) ? this.model.f_building : this.model.f_building + '栋'
        }
        if (this.model.f_unit) {
          address += isNaN(this.model.f_unit) ? this.model.f_unit : this.model.f_unit + "单元"
        }
        if (this.model.f_floor) {
          address += isNaN(this.model.f_floor) ? this.model.f_floor : this.model.f_floor + "层"
        }
        if (this.model.f_room) {
          address += isNaN(this.model.f_room) ? this.model.f_room : this.model.f_room + "室"
        }
        this.$set('model.f_address', address)

        this.$set('parentData.f_address', address)
      },
      createB(){
        if (!this.model.f_residential_area) {
          this.$set('model.f_residential_area', ' ')
          this.$set('parentData.f_residential_area', ' ')
        }
        let address = this.model.f_residential_area
        if (this.model.f_building) {
          address += ''+ this.model.f_building
        }
        if (this.model.f_unit) {
          address += '-' + this.model.f_unit
        }
        if (this.model.f_floor) {
          address += '-' + this.model.f_floor
        }
        if (this.model.f_room) {
          address += '-' + this.model.f_room
        }
        this.$set('model.f_address', address)

        this.$set('parentData.f_address', address)
      },
      createC(){
        if (!this.model.f_street) {
          this.$set('model.f_street', ' ')
          this.$set('parentData.f_street', ' ')
        }
        if (!this.model.f_residential_area) {
          this.$set('model.f_residential_area', ' ')
          this.$set('parentData.f_residential_area', ' ')
        }
        let address = this.model.f_street + this.model.f_residential_area
        if (this.model.f_building) {
          address += isNaN(this.model.f_building) ? this.model.f_building : this.model.f_building + '号楼'
        }
        if (this.model.f_unit) {
          address += isNaN(this.model.f_unit) ? this.model.f_unit : this.model.f_unit + "单元"
        }
        if (this.model.f_floor) {
          address += isNaN(this.model.f_floor) ? this.model.f_floor : this.model.f_floor + "层"
        }
        if (this.model.f_room) {
          address += isNaN(this.model.f_room) ? this.model.f_room : this.model.f_room + "室"
        }
        this.$set('model.f_address', address)

        this.$set('parentData.f_address', address)
      },
      createD(){
        if (!this.model.f_area) {
          this.$set('model.f_area', ' ')
          this.$set('parentData.f_area', ' ')
        }
        if (!this.model.f_street) {
          this.$set('model.f_street', ' ')
          this.$set('parentData.f_street', ' ')
        }
        if (!this.model.f_residential_area) {
          this.$set('model.f_residential_area', ' ')
          this.$set('parentData.f_residential_area', ' ')
        }
        let address = this.model.f_area + this.model.f_street + this.model.f_residential_area
        if (this.model.f_building) {
          address += isNaN(this.model.f_building) ? this.model.f_building : this.model.f_building + '号楼'
        }
        if (this.model.f_unit) {
          address += isNaN(this.model.f_unit) ? this.model.f_unit : this.model.f_unit + "单元"
        }
        if (this.model.f_floor) {
          address += isNaN(this.model.f_floor) ? this.model.f_floor : this.model.f_floor + "层"
        }
        if (this.model.f_room) {
          address += isNaN(this.model.f_room) ? this.model.f_room : this.model.f_room + "室"
        }
        this.$set('model.f_address', address)

        this.$set('parentData.f_address', address)
      }
    }

  }
</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;
  }

  .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 {
    font: 15px PingFang-SC-Medium;
    color: #333333;
  }

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

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

  .btn-enter-font {
    font: 15px PingFang-SC-Medium;
    color: #499edf;
  }
</style>
