<template>
  <form novalidate class="form-horizontal  span auto compatible" style="width: 100%;margin: auto;overflow-y: 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">
        <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_card_id"
                   disabled="disabled"/>
          </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_userinfo_code"
                   disabled="disabled"/>
          </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"
                   disabled="disabled"/>
          </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_idnumber"
                   disabled="disabled"/>
          </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"
                   disabled="disabled"/>
          </div>
        </div>
        <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_name"
                   disabled="disabled"/>
          </div>
        </div>
        <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"
                   disabled="disabled"/>
          </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.archives_state"
                   disabled="disabled"/>
          </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_table_state"
                   disabled="disabled"/>
          </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_reason"
                   disabled="disabled"/>
          </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_remark"
                   disabled="disabled"/>
          </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_plumb_id"
                   disabled="disabled"/>
          </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_safeagreement_id"
                   disabled="disabled"/>
          </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_is_safeagreement"
                   disabled="disabled"/>
          </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_contract_id"
                   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_area"
                   disabled="disabled"/>
          </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"
                   disabled="disabled"/>
          </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"
                   disabled="disabled"/>
          </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_building"
                   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_unit"
                   disabled="disabled"/>
          </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_floor"
                   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_room"
                   disabled="disabled"/>
          </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_address"
                   disabled="disabled"/>
          </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_people_num"
                   disabled="disabled"/>
          </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>
            <v-select id="f_rent" :value.sync="userinfo.f_rent" class="input-font"
                      :options='rents' placeholder='请选择' :value-single="true"
                      disabled
                      close-on-select clear-button></v-select>
          </div>
        </div>
        <div class="col-m-r">
          <div class="col-m-rr">
            <p class="col-m-p">小区性质:</p>
          </div>
          <div>
            <v-select id="f_residential_properties" :value.sync="userinfo.f_residential_properties" class="input-font"
                      :options='residentialProperties' placeholder='请选择' :value-single="true"
                      disabled
                      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">行政区域:</p>
          </div>
          <div>
            <v-select id="f_distinct" :value.sync="userinfo.f_distinct" class="input-font"
                      :options='distincts' placeholder='请选择' :value-single="true"
                      disabled
                      close-on-select clear-button></v-select>
          </div>
        </div>
        <div class="col-m-r">
          <div class="col-m-rr">
            <p class="col-m-p">运行区域:</p>
          </div>
          <div>
            <v-select id="f_distinct" :value.sync="userinfo.f_opera_area" class="input-font"
                      :options='opera_areas' placeholder='请选择' :value-single="true"
                      disabled
                      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">供暖方式:</p>
          </div>
          <div>
            <v-select id="f_heating_style" :value.sync="userinfo.f_heating_style" class="input-font"
                      :options='heating_style' placeholder='请选择' :value-single="true"
                      disabled
                      close-on-select clear-button></v-select>
          </div>
        </div>
        <div class="col-m-r">
          <div class="col-m-rr">
            <p class="col-m-p">重点用户:</p>
          </div>
          <div>
            <v-select id="f_emphasis_user" :value.sync="userinfo.f_emphasis_user" class="input-font"
                      :options='emphasisUsers' placeholder='请选择' :value-single="true"
                      disabled
                      close-on-select clear-button></v-select>
          </div>
        </div>
      </div>
      <div class="row-m" v-if="userinfo.f_emphasis_user=='临街商铺'">
        <div class="col-m-l">
          <div class="col-m-ll">
            <p class="col-m-p">商铺用途:</p>
          </div>
          <div>
            <v-select id="f_heating_style" :value.sync="userinfo.f_use_type" class="input-font"
                      placeholder='请选择' :value-single="true"
                      disabled
                      close-on-select clear-button></v-select>
          </div>
        </div>
        <div class="col-m-r">
          <div class="col-m-rr">
            <p class="col-m-p">气源接入:</p>
          </div>
          <div>
            <v-select id="f_user_equipmen" :value.sync="userinfo.f_source_type" class="input-font"
                      placeholder='请选择' :value-single="true"
                      disabled
                      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">自锁阀状态:</p>
          </div>
          <div>
            <v-select id="f_heating_style" :value.sync="userinfo.f_latchingvalve_state" class="input-font"
                      placeholder='请选择' :value-single="true"
                      disabled
                      close-on-select clear-button></v-select>
          </div>
        </div>
        <div class="col-m-r">
          <div class="col-m-rr">
            <p class="col-m-p">用气设备:</p>
          </div>
          <div>
            <v-select id="f_user_equipmen" :value.sync="userinfo.f_user_equipmen" class="input-font"
                      :options='equipmens' placeholder='请选择' :value-single="true"
                      disabled
                      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">气价类型:</p>
          </div>
          <div>
            <input class="search_input input-font" type="text" readonly v-model="userinfo.f_price_name"
                   disabled="disabled"/>
          </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_table_state"
                   disabled="disabled"/>
          </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_gasproperties"
                   disabled="disabled"/>
          </div>
        </div>
      </div>
    </div>
  </form>
</template>

<script>
import Vue from 'vue'

export default {
  title: '用户基本信息',
  data() {
    return {
      parentData: this.$parent.data,
      f_card_id: '',
      config: this.$parent.$parent.config,
      templateInfo: this.$parent.$parent.templateInfo,
      item: this.$parent.$parent.item,
      userinfo: this.$parent.data,
      showUser: true,
      showInfo: false,
      rents: [
        {label: '否', value: '否'},
        {label: '普通居住', value: '普通居住'},
        {label: '托管培训', value: '托管培训'},
        {label: '办公', value: '办公'},
        {label: '餐饮', value: '餐饮'},
        {label: '集体宿舍', value: '集体宿舍'}
      ],
      residentialProperties: [
        {label: '物业小区', value: '物业小区'},
        {label: '企事业单位', value: '企事业单位'},
        {label: '安置小区', value: '安置小区'},
        {label: '自建房', value: '自建房'},
        {label: '公租房', value: '公租房'},
        {label: '廉租房', value: '廉租房'}
      ],
      distincts: [
        {label: '航天', value: '航天'},
        {label: '曲江', value: '曲江'},
        {label: '高新', value: '高新'},
        {label: '长安', value: '长安'},
        {label: '沣东', value: '沣东'},
        {label: '雁塔', value: '雁塔'},
        {label: '沣西', value: '沣西'},
        {label: '浐灞生态区', value: '浐灞生态区'}
      ],
      opera_areas: [
        {label: '航天', value: '航天'},
        {label: '韦曲', value: '韦曲'},
        {label: '高新', value: '高新'},
        {label: '沣东', value: '沣东'},
        {label: '中心站', value: '中心站'}
      ],
      emphasisUsers: [
        {label: '否', value: '否'},
        {label: '孤寡老人', value: '孤寡老人'},
        {label: '重大隐患', value: '重大隐患'},
        {label: '气量出入', value: '气量出入'},
        {label: '临街商铺', value: '临街商铺'},
        {label: '小区大锅灶', value: '小区大锅灶'}
      ],
      heating_style: [
        {label: '壁挂炉供暖', value: '壁挂炉供暖'},
        {label: '集中供暖', value: '集中供暖'},
        {label: '其他', value: '其他'},
        {label: '燃气取暖器供暖', value: '燃气取暖器供暖'}
      ],
      equipmens: [
        {label: '请选择', value: ''},
        {label: '单灶', value: '单灶'},
        {label: '灶具+热水器', value: '灶具+热水器'},
        {label: '灶具+壁挂锅炉', value: '灶具+壁挂锅炉'},
        {label: '灶具+燃气取暖器', value: '灶具+燃气取暖器'},
        {label: '未用', value: '未用'},
        {label: '灶具+热水器+壁挂锅炉', value: '灶具+热水器+壁挂锅炉'},
        {label: '单热水器', value: '单热水器'},
        {label: '单壁挂锅炉', value: '单壁挂锅炉'}
      ],
      userproperties: ''
    }
  },
  ready() {
    console.log("userinfo", this.userinfo)
    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
        }
      }
    }
  }
}
</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: 47%;
  height: 100%;
  margin-left: 20px;
  float: left
}

.col-m-rr {
  width: 30%;
  height: 100%;
  float: left
}
</style>
