<template>
    <div class="form-group col-sm-12">
      <label class="text-left font">总体安检照片</label>

      <div class="auto">
        <div class="panel" style="padding: 10px 10px 5px 10px;">
          <div class="panel-body panel-self col-xs-12 col-sm-12" style="background-color: #F8F8F8;width: 100%;height: 260px;position: relative">
            <div class="row col-xs-6 col-sm-12 col-md-6" style="height: 240px;overflow: scroll;top: 1px" >
              <!--<div class="col-xs-4 col-sm-3 col-md-2" style="margin-bottom: 35px" v-for="(index,img) in paper.f_all_imgs">-->
                <img src="../../assets/login_title_0002_loginbg.png" alt="总体安检照片" ></img>
                <!--<img src="../../assets/删除.png" @click="delfile('f_overall_path', img.f_overall_path,index)" style="width: 15px;margin-top: -80px" alt="">-->
              <!--</div>-->
            </div>

            <div class="row col-xs-6 col-sm-6 col-md-6 text-right div-photo">
              <button type="button" name="button" class="btn btn-photo" @click="takePic('f_overall_path', '总体安检照片')">拍照</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  <form novalidate class="form-horizontal  span auto compatible" style="width: 95%;margin: auto" v-if="showUser">
  <div class="row col-xs-6 col-sm-6 col-md-6 app-row">
    <div class="col-xs-4 col-sm-4 col-md-4" style="margin-top: 7px">
      <img src="../../assets/用户ID.png" style="width: 20px;" alt="">
      <label class="font text-left">卡&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号:</label>
    </div>
    <div class="col-xs-8 col-sm-8 col-md-8" style="margin-top: 7px">
      <input class="input-font search_input" style=" width: 50%;"
             type="text" v-model="model.f_card_id">
      <button type="button" class="btn text-rigth  btn-enter btn-enter-font" @click="findUser()"
              style="margin-bottom: 5px;float: right">查&nbsp;&nbsp;&nbsp;找
      </button>
    </div>
  </div>
  <div class="row col-xs-6 col-sm-6 col-md-6 app-row">
    <div class="col-xs-4 col-sm-4 col-md-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 col-sm-8 col-md-8" style="margin-top: 7px">
      <input class="input-font" style=" border: 0;background-color: #ffffff;width: 50%;border-radius: 3px;"
             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 col-xs-6 col-sm-6 col-md-6 app-row">
    <div class="col-xs-4 col-sm-4 col-md-4">
      <img src="../../assets/户姓名.png" style="width: 20px;margin-bottom: 5px" alt="">
      <label class="font text-left">用户名称:</label>
    </div>
    <div class="col-xs-8 col-sm-8 col-md-8">
      <input class="search_input input-font" type="text" v-model="model.f_user_name">
      <button type="button" class="btn text-rigth  btn-enter btn-enter-font" @click="bluetooth()"
              style="margin-top: -8px;float: right">读卡器
      </button>
    </div>
  </div>
  <div class="row col-xs-6 col-sm-6 col-md-6 app-row">
    <div class="col-xs-4 col-sm-4 col-md-4">
      <img src="../../assets/用户姓名.png" style="width: 20px;margin-bottom: 5px" alt="">
      <label class="font text-left">证件号码:</label>
    </div>
    <div class="col-xs-8 col-sm-8 col-md-8">
      <input class="search_input input-font" type="text" v-model="model.f_idnumber">
    </div>
  </div>
  <div class="row col-xs-6 col-sm-6 col-md-6 app-row">
    <div class="col-xs-4 col-sm-4 col-md-4">
      <img src="../../assets/户姓名.png" style="width: 20px;margin-bottom: 5px" alt="">
      <label class="font text-left">用户状态:</label>
    </div>
    <div class="col-xs-8 col-sm-8 col-md-8">
      <input class="search_input input-font" type="text" readonly v-model="model.f_table_state">
    </div>
  </div>
  <div class="row col-xs-6 col-sm-6 col-md-6 app-row">
    <div class="col-xs-4 col-sm-4 col-md-4">
      <img src="../../assets/用户姓名.png" style="width: 20px;margin-bottom: 5px" alt="">
      <label class="font text-left">停用原因:</label>
    </div>
    <div class="col-xs-8 col-sm-8 col-md-8">
      <input v-if="model.f_table_state == '停用'" class="search_input input-font" type="text" readonly v-model="model.f_reason">
    </div>
  </div>
  <!--<div class="row col-xs-12 col-sm-6 col-md-6 app-row">-->
  <!--<div class="col-xs-4 col-sm-4 col-md-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 col-sm-8 col-md-8">-->
  <!--<input class="search_input input-font" type="text" v-model="model.f_user_type" disabled="disabled">-->
  <!--</div>-->
  <!--</div>-->
  <div class="row col-xs-6 col-sm-12 col-md-6 app-row">
    <div class="col-xs-4 col-sm-4 col-md-4">
      <img src="../../assets/用户类型.png" style="width: 20px;margin-bottom: 5px" alt="">
      <label class="font text-left">安全用气协议编号:</label>
    </div>
    <div class="col-xs-8 col-sm-8 col-md-8">
      <input class="search_input input-font" style="width: 89%;" type="text" v-model="model.f_safeagreement_id">
    </div>
  </div>
  <div class="row col-xs-6 col-sm-12 col-md-6 app-row">
    <div class="col-xs-4 col-sm-4 col-md-4">
      <img src="../../assets/用户类型.png" style="width: 20px;margin-bottom: 5px" alt="">
      <label class="font text-left">供气合同编号:</label>
    </div>
    <div class="col-xs-8 col-sm-8 col-md-8">
      <input class="search_input input-font" style="width: 89%;" type="text" v-model="model.f_contract_id">
    </div>
  </div>
  <div class="row col-xs-6 col-sm-6 col-md-6 app-row">
    <div class="col-xs-4 col-sm-4 col-md-4">
      <img src="../../assets/用户电话.png" style="width: 20px;margin-bottom: 5px" alt="">
      <label class="font text-left">用户电话:</label>
    </div>
    <div class="col-xs-8 col-sm-8 col-md-8">
      <input class="search_input input-font" type="text" v-model="model.f_user_phone">
    </div>
  </div>
  <div class="row col-xs-6 col-sm-6 col-md-6 app-row">
    <div class="col-xs-4 col-sm-4 col-md-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 col-sm-8 col-md-8">
      <input class="search_input input-font" type="text" v-model="model.f_area">
    </div>
  </div>
  <div class="row col-xs-6 col-sm-6 col-md-6 app-row">
    <div class="col-xs-4 col-sm-4 col-md-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 col-sm-8 col-md-8">
      <input class="search_input input-font" type="text" v-model="model.f_street">
    </div>
  </div>
  <div class="row col-xs-6 col-sm-6 col-md-6 app-row">
    <div class="col-xs-4 col-sm-4 col-md-4">
      <img src="../../assets/小区.png" style="width: 20px;margin-bottom: 5px" alt="">
      <label class="font text-left">小区名称:</label>
    </div>
    <div class="col-xs-8 col-sm-8 col-md-8">
      <input class="search_input input-font" type="text" v-model="model.f_residential_area">
    </div>
  </div>
  <div class="row col-xs-6 col-sm-6 col-md-6 app-row">
    <div class="col-xs-4 col-sm-4 col-md-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 col-sm-8 col-md-8">
      <input class="search_input input-font" type="text" v-model="model.f_building">
    </div>
  </div>
  <div class="row col-xs-6 col-sm-6 col-md-6 app-row">
    <div class="col-xs-4 col-sm-4 col-md-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 col-sm-8 col-md-8">
      <input class="search_input input-font" type="text" v-model="model.f_unit">
    </div>
  </div>
  <div class="row col-xs-6 col-sm-6 col-md-6 app-row">
    <div class="col-xs-4 col-sm-4 col-md-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 col-sm-8 col-md-8">
      <input class="search_input input-font" type="text" v-model="model.f_floor">
    </div>
  </div>
  <div class="row col-xs-6 col-sm-6 col-md-6 app-row">
    <div class="col-xs-4 col-sm-4 col-md-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 col-sm-8 col-md-8">
      <input class="search_input input-font" type="text" v-model="model.f_room">
    </div>
  </div>
  <div class="row col-xs-6 col-sm-6 col-md-6 app-row">
    <div class="col-xs-4 col-sm-4 col-md-4">
      <img src="../../assets/详细住址.png" style="width: 20px;margin-bottom: 5px" alt="">
      <label class="font text-left">详细住址:</label>
    </div>
    <div class="col-xs-8 col-sm-8 col-md-8">
      <input class="search_input input-font" type="text" v-model="model.f_address">
    </div>
  </div>
  <div class="row col-xs-6 col-sm-6 col-md-6 app-row">
    <div class="col-xs-4 col-sm-4 col-md-4">
      <img src="../../assets/详细住址.png" style="width: 20px;margin-bottom: 5px" alt="">
      <label class="font text-left">常住人口:</label>
    </div>
    <div class="col-xs-8 col-sm-8 col-md-8">
      <input class="search_input input-font" type="text" v-model="model.f_people_num">
    </div>
  </div>
  <!-- <div class="col-sm-8">
     <a href="#" class="btn btn-primary" @click="editUserInfo">修改用户信息</a>
   </div>-->
  <div class="row col-xs-6 col-sm-6 col-md-6 app-row">
    <div class="col-xs-4 col-sm-4 col-md-4" style="margin-top: 5px">
      <img src="../../assets/房屋结构.png" style="width: 20px;margin-bottom: 5px" alt="">
      <label for="f_rent" class="font text-left">租住:</label>
    </div>
    <div class="col-xs-8 col-sm-8 col-md-8" style="margin-bottom: 8px">
      <v-select id="f_rent" :value.sync="model.f_rent" class="input-font"
                :options='rents' placeholder='请选择' :value-single="true"
                close-on-select clear-button></v-select>
    </div>
  </div>
  <div class="row col-xs-6 col-sm-6 col-md-6 app-row">
    <div class="col-xs-4 col-sm-4 col-md-4" style="margin-top: 5px">
      <img src="../../assets/房屋结构.png" style="width: 20px;margin-bottom: 5px" alt="">
      <label for="f_residential_properties" class="font text-left">小区性质:</label>
    </div>
    <div class="col-xs-8 col-sm-8 col-md-8" style="margin-bottom: 8px">
      <v-select id="f_residential_properties" :value.sync="model.f_residential_properties" class="input-font"
                :options='residentialProperties' placeholder='请选择' :value-single="true"
                close-on-select clear-button></v-select>
    </div>
  </div>
  <div class="row col-xs-6 col-sm-6 col-md-6 app-row">
    <div class="col-xs-4 col-sm-4 col-md-4" style="margin-top: 5px">
      <img src="../../assets/房屋结构.png" style="width: 20px;margin-bottom: 5px" alt="">
      <label for="f_distinct" class="font text-left">所属区域:</label>
    </div>
    <div class="col-xs-8 col-sm-8 col-md-8" style="margin-bottom: 8px">
      <v-select id="f_distinct" :value.sync="model.f_distinct" class="input-font"
                :options='distincts' placeholder='请选择' :value-single="true"
                close-on-select clear-button></v-select>
    </div>
  </div>
  <div class="row col-xs-6 col-sm-6 col-md-6 app-row">
    <div class="col-xs-4 col-sm-4 col-md-4" style="margin-top: 5px">
      <img src="../../assets/房屋结构.png" style="width: 20px;margin-bottom: 5px" alt="">
      <label for="f_emphasis_user" class="font text-left">重点用户:</label>
    </div>
    <div class="col-xs-8 col-sm-8 col-md-8" style="margin-bottom: 8px">
      <v-select id="f_emphasis_user" :value.sync="model.f_emphasis_user" class="input-font"
                :options='emphasisUsers' placeholder='请选择' :value-single="true"
                close-on-select clear-button></v-select>
    </div>
  </div>
  <div class="row col-xs-6 col-sm-6 col-md-6 app-row">
    <div class="col-xs-4 col-sm-4 col-md-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 col-sm-8 col-md-8" style="margin-bottom: 8px">
      <v-select id="f_heating_style" :value.sync="model.f_heating_style" class="input-font"
                :options='heating_style' placeholder='请选择' :value-single="true"
                close-on-select clear-button></v-select>
    </div>
  </div>
  <div class="row col-xs-6 col-sm-6 col-md-6 app-row">
    <div class="col-xs-4 col-sm-4 col-md-4" style="margin-top: 5px">
      <img src="../../assets/房屋结构.png" style="width: 20px;margin-bottom: 5px" alt="">
      <label for="f_user_equipmen" class="font text-left">用气设备:</label>
    </div>
    <div class="col-xs-8 col-sm-8 col-md-8" style="margin-bottom: 8px">
      <v-select id="f_user_equipmen" :value.sync="model.f_user_equipmen" class="input-font"
                :options='equipmens' placeholder='请选择' :value-single="true"
                close-on-select clear-button></v-select>
    </div>
  </div>
  </form>
</template>

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


  export default {
    title: '用户反馈',
    data() {
      return {
        printContent:[],
        hasdefect:false,
        checkersid:[],
        repairitems:[],
        // repairstypes:this.$appdata.getParam('报修类型'),
        // f_repair_person: this.readRepair(),
        showrepair: false,
        safeCheckToRepair:'',
        showCheckToRepair:false,
        userid: '',
        model: {
          f_card_id: '',
          f_user_name: '',
          f_userinfo_code: '',
          f_area: '',
          f_address: '',
          f_user_phone: '',
          f_user_type: '',
          f_idnumber: '',
          f_street: '',
          f_building: '',
          f_unit: '',
          f_floor: '',
          f_room: '',
          f_residential_area: '',
          // f_userproperties: '',
          f_rent: '',
          f_emphasis_user: '',
          f_user_equipmen: '',
          f_residential_properties: '',
          f_people_num: '',
          f_safeagreement_id: '',
          f_contract_id:'',
          f_reason:'',
          f_table_state:''
        },
        // user_properties:this.$appdata.getParam('安检用户性质'),
        // user_properties:[
        //   {label: '平房', value: '平房'},
        //   {label: '多层', value: '多层'}
        // ],
        showUser: true,
        showInfo: false,
        // room_style : this.$appdata.getParam('民用房屋结构'),
        // heating_style : this.$appdata.getParam('供暖方式')

        rents: [
          {label: '否', value: '否'},
          {label: '普通居住', value: '普通居住'},
          {label: '托管培训', value: '托管培训'},
          {label: '办公', value: '办公'},
          {label: '餐饮', value: '餐饮'},
          {label: '集体宿舍', value: '集体宿舍'}
        ],
        residentialProperties: [
          {label: '物业小区', value: '物业小区'},
          {label: '企事业单位', value: '企事业单位'},
          {label: '安置小区', value: '安置小区'},
          {label: '自建房', value: '自建房'}
        ],
        distincts: [
          {label: '航天', value: '航天'},
          {label: '长安', value: '长安'},
          {label: '曲江', value: '曲江'},
          {label: '高新', value: '高新'},
          {label: '沣西', value: '沣西'},
          {label: '浐灞生态区', value: '浐灞生态区'}
        ],
        emphasisUsers: [
          {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: '单壁挂锅炉'}
        ],
        defaultCheckMust: ['表后管', '灶具连接管', '报警器', '立管', '阀门', '其他', '抽油机', '燃气表'],
        equipmensChart: {
          '单灶': '灶具',
          '灶具': '灶具',
          '单热水器': '热水器',
          '热水器': '热水器',
          '单壁挂炉': '壁挂锅炉',
          '壁挂炉': '壁挂锅炉',
          '壁挂锅炉': '壁挂锅炉',
          '表后管': '表后管',
          '灶具连接管': '灶具连接管',
          '报警器': '报警器',
          '立管': '立管',
          '阀门': '阀门',
          '其他': '其他',
          '抽油机': '抽油机',
          '燃气表': '燃气表',
          '燃气取暖器': '',
          '未用': ''
        },
        equipmensChart: {
          '单灶': '灶具',
          '灶具': '灶具',
          '单热水器': '热水器',
          '热水器': '热水器',
          '单壁挂炉': '壁挂锅炉',
          '壁挂炉': '壁挂锅炉',
          '壁挂锅炉': '壁挂锅炉',
          '表后管': '表后管',
          '灶具连接管': '灶具连接管',
          '报警器': '报警器',
          '立管': '立管',
          '阀门': '阀门',
          '其他': '其他',
          '抽油机': '抽油机',
          '燃气表': '燃气表',
          '燃气取暖器': '',
          '未用': ''
        },
        userproperties: ''
      }
    },

    props: ['idx'],
    components: {
      RadioGroup,
      Radio
    },
    methods: {
      cameraCallBack(prop, fileName) {
        console.log('拍照回调')
        // if(prop == 'f_overall_path'){
        //   let f_overall_path = fileName + '?' + Math.random()
        //   HostApp.__this__.paper.f_all_imgs.push({
        //     f_overall_path:f_overall_path,
        //     f_create_time : Util.toStandardDateString()
        //   })
        // }else{
        //   HostApp.__this__.paper[prop] = fileName + '?' + Math.random()
        // }
        HostApp.__callback__ = null
        HostApp.__this__ = null
      },
      takePic(prop, title) {
        HostApp.__callback__ = this.cameraCallBack
        HostApp.__this__ = this
        let fileName = '测试'
        // if(prop == 'f_overall_path'){
        //   if (!this.paper.f_all_imgs[index] || this.paper.f_all_imgs[index].f_overall_path.includes("nopic.png")) {
        //     fileName = Util.guid() + '-' + prop + '.jpg'
        //   } else {
        //     fileName = Util.getFileName(this.paper.f_all_imgs[index].f_overall_path)
        //   }
        // }else{
        //   if (!this.paper[prop] || this.paper[prop].includes("nopic.png")) {
        //     fileName = Util.guid() + '-' + prop + '.jpg'
        //   } else {
        //     fileName = Util.getFileName(this.paper[prop])
        //   }
        // }

        HostApp._open_a_page({
          type: 'boomerang',
          page: 'com.aofeng.hybrid.android.peripheral.CameraActivity',
          param: {
            file: fileName,
            requestCode: 111,
            callback: 'javascript:HostApp.__callback__("' + prop + '", "%s");',
            watermark: title + '\t时间：' + Util.toStandardTimeString() + '\t' + '测试'
          }
        })
      },
    },
    ready() {
    },
  }
</script>
<style>
  .panel-self{
    border-radius: 5px;
    border:1px solid #c5e1f7;
    background-color: #F2F6FA;
  }
  .text-left{
    text-align:left;
  }
  .font{
    font: 15px PingFang-SC-Medium;
    color: #333333;
  }
  .showInput{
    font: 14px PingFang-SC-Medium;
    color: #666666;
  }
  .info{
    margin-top: 15px;
    border-radius: 5px;
    background-color: #f3faff;
  }
  .btn-photo{
    border: 0;
    border-radius: 7px;
    background-color: #7dc1f4;
    font: 15px PingFang-SC-Bold;
    height: 20%;
  }
  .div-photo{
    width: auto;
    height: auto;
    /* margin-top: 10px; */
    position: absolute;
    bottom: 10px;
    right: 10px;
  }
  .btn-voice{
    border-radius: 7px;
    border: 1px solid #dedede;
    background-color: #f5fbff;
    font: 15px PingFang-SC-Bold;
    color: #499edf;
  }
  .save-btn{
    width: 25%;
    background-color:#499edf;
    border-radius: 6px;
    color: #FFFFFF;
    font: 15px PingFang-SC-Bold;
  }
  .upload-btn{
    width: 25%;
    background-color:#ffffff;
    border: 1px solid #499edf;
    border-radius: 6px;
    color: #499edf;
    font: 15px PingFang-SC-Bold;
  }
  .repair-btn{
    width: 25%;
    border: 1px solid #499edf;
    border-radius: 6px;
    font: 15px PingFang-SC-Bold;
  }
</style>
