<template>
  <div class="auto">
    <form>
      <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;" 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" >
          <input class="input-font search_input"  disabled
                 type="text" v-model="model.f_card_id" >
        </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/小区.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" disabled>
        </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/小区.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" disabled >
        </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/小区.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" disabled>
        </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/小区.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" disabled>
        </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/小区.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" disabled>
        </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/小区.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" disabled>
        </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/小区.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" disabled>
        </div>
      </div>
      <div class="row col-xs-12 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_address" disabled>
        </div>
      </div>

      <div class="row col-xs-12 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" type="text" v-model="model.f_meternumber" disabled>
        </div>
      </div>

      <div class="row col-xs-12 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" type="text" v-model="model.f_meter_base" disabled>
        </div>
      </div>
      <div class="row col-xs-12 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" type="text" v-model="model.f_totalgas" disabled>
        </div>
      </div>
      <div class="row col-xs-12 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" type="text" v-model="model.f_changegas" disabled>
        </div>
      </div>
      <div class="row col-xs-12 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" type="text" v-model="model.f_residue_gas" disabled>
        </div>
      </div>
      <div class="auto col-xs-12 col-sm-12">
        <div class="panel" style="padding: 10px 10px 5px 10px;">
          <div class="panel-body panel-self">
            <div class="row">
              <div id="photo" align="center">
                <p>请拍摄抄表照片</p>
                <!--<img-area :model="model.imgs"></img-area>-->
                <div class="auto" style="margin-top: 5px;" >
                  <div class="panel" style="padding: 10px 10px 5px 10px;">
                    <div class="panel-body panel-self" style="background-color: #F8F8F8;width: 100%;height: 260px;position: relative">
                      <div class="row" style="height: 240px;overflow: scroll;top: 1px">
                        <div class="col-xs-4 col-sm-3 col-md-2"  v-for="(index,img) in model.f_all_imgs">
                          <img-self :src="img.f_overall_path" alt="抄表照片" :width="140" :height="170"></img-self>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </form>
    <back-page :need-back='true' @flag="$back()"></back-page>
  </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: '抄表单',
    props: ['f_plan_id', 'item', 'role'],
    data() {
      return {
        type:'',
        hasChange:'否',
        changegas:'',
        referenceGas:'',
        onlySave:true,
        // f_user_defects: this.$parent.$parent.f_user_defects,
        // model: this.model,
        openRadiosss:[
          {
            label: '是',
            value: 0,
            isChecked: false,
          },
          {
            label: '否',
            value:1,
            isChecked: false,
          },
        ],
        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_complete:'',
          f_totalgas:'',
          f_changegas:'',
          f_meter_base:'',
          f_meternumber:'',
          f_residue_gas:'',
          f_all_imgs:[]
        },
      }
    },
    ready() {
      this.$resetpost(`/rs/logic/getCheckPaperInfo`, {data: {id:this.item.id}},{resolveMsg: null, rejectMsg: null}).then((respanse) => {
          console.log('result=====>', respanse)
          if (respanse.data.length != 0) {
            console.log('devices => ', respanse.data[0])
            this.model = Object.assign(this.model, respanse.data[0])
            Util.replaceFalse(this.model)
            Util.booleanFilter(this.model)
            if (this.role == 'view') {
              Util.ratifyPics(this.model)
              Util.ratifyPics(this.model)
            } else {
              Util.androidRatifyPics(this.model, this.$androidUtil.getProxyUrl())
            }
            console.log("this.model:", this.model)
          } else {
            alert("查询失败!")

          }
        }
      ).catch(
        (respanse) => {
          console.log('respanse',respanse)
          alert('查找安检单失败')
        })

    },
    methods: {
      back() {
        this.$showMessage('是否确认退出？', ['confirm', 'cancel']).then((res) => {
            console.log('res=====>' + res)
            if (res === 'confirm') {
              this.$back()
            }
          }
        )
        // }
      },
      delfile(prop, fileName,index) {
        if (fileName == Vue.nopic)
          return
        else {
          if(prop == 'f_overall_path'){
            this.model.f_all_imgs.splice(index,1)
            HostApp.delfile(fileName)
          }else{
            HostApp.delfile(fileName)
            this.model[prop] = Vue.nopic
          }
        }
      },
      cameraCallBack(prop, fileName) {
        if(prop == 'f_overall_path'){
          let f_overall_path = fileName + '?' + Math.random()
          HostApp.__this__.model.f_all_imgs.push({
            f_overall_path:f_overall_path,
            f_create_time : Util.toStandardDateString()
          })
        }else{
          HostApp.__this__.model[prop] = fileName + '?' + Math.random()
        }
        HostApp.__callback__ = null
        HostApp.__this__ = null
      },
      takePic(prop, title,index) {
        HostApp.__callback__ = this.cameraCallBack
        HostApp.__this__ = this
        console.log("prop:" + prop)
        console.log("this.prop:" + this.model[prop])
        let fileName
        if(prop == 'f_overall_path'){
          if (!this.model.f_all_imgs[index] || this.model.f_all_imgs[index].f_overall_path.includes("nopic.png")) {
            fileName = Util.guid() + '-' + prop + '.jpg'
          } else {
            fileName = Util.getFileName(this.model.f_all_imgs[index].f_overall_path)
          }
        }else{
          if (!this.model[prop] || this.model[prop].includes("nopic.png")) {
            fileName = Util.guid() + '-' + prop + '.jpg'
          } else {
            fileName = Util.getFileName(this.model[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' + Vue.user.name
          }
        })
      },
      findUser() {
        console.log('开始查询')
        console.log('this.model.f_card_id==='+this.model.f_card_id)
        if(this.model.f_card_id){
          this.$resetpost(`${this.$androidUtil.getProxyUrl()}/rs/logic/getUserInfoAndPlan`, {data: {f_card_id: this.model.f_card_id}}).then((res) => {
            console.log('通过卡号查询信息结果' + JSON.stringify(res))
            console.log('换表后累购==>>>>' + JSON.stringify(res.data.changeGas))

            if (res.data.userinfo.length > 0) {
              let userinfo = this.$androidUtil.bzLogic('getRepairUserInfo',{f_card_id:this.model.f_card_id})
              Object.assign(this.model, this.model, res.data.userinfo[0])
              if(res.data.totalGas.length > 0){
                this.model.f_totalgas = res.data.totalGas[0].f_pregas
              }
              this.model.f_changegas = res.data.changeGas
              // this.$parent.$parent.setGasMeterData(res.data.planMeter[0],totalgas,res.data.newmeterbase,res.data.changeGas,res.data.hasChange,res.data.devices)
            } else {
              this.$showMessage('没有查询到对应该卡号的用户！')
            }
            this.hasChange = res.data.hasChange
            this.changegas = res.data.changegas
          })
        }else{
          this.$showMessage('请输入卡号')
        }
      },
      upload(){
        this.onlySave = false
        let res = this.save()
      },
      save(){


        if(this.model.f_meter_base &&  this.model.f_residue_gas ){
          this.model.f_complete = '已完成'
        }
        HostApp.__this__ = this
        this.logicWithHint('saveReadMeter', {row:this.model,f_check_item_id:this.item.id,f_checker_id:Vue.user.id}, 'javascript:HostApp.__this__.saveCallBack()', 1)
      },
      saveCallBack(jo) {
        console.log('saveCallBack'+JSON.stringify(jo))
        if (jo.state == 'ok') {
          let res = JSON.parse(jo.result)
          if (res.code == 200) {
            if (!this.onlySave) {
              HostApp.__this__ = this
              this.logicWithHint('UpReadMeter',{row:this.model,f_check_item_id:this.item.id,f_checker_id:Vue.user.id}, 'javascript:HostApp.__this__.uploadCallBack()', 1)
            } else {
              this.$showMessage('保存成功！')
              if (this.clickBack) {
                // this.isStrat = false
                // this.$back()
              }
            }
          } else {
            this.$showMessage('保存失败！')
            return
          }
        } else {
          this.$showMessage('服务器内部错误,保存失败！')
          return
        }
      },
      uploadCallBack(jo) {
        //获取微信推送路径
        console.log(JSON.stringify(jo))
        if (jo.state == 'ok') {
          let res = JSON.parse(jo.result)
          console.log('上传结果===》' + JSON.stringify(res))
          console.log('上传结果的f_paper_id===》' + JSON.stringify(res.id))
          if (res.code == 200) {
            this.$showMessage('上传成功!')
            console.log('上传结束back')
            this.$back()
          } else {
            this.$showMessage('上传失败！')
            this.onlySave = true
          }
        } else {
          this.$showMessage('服务器内部错误,上传失败！')
          this.onlySave = true
        }
      },
      logicWithHint(logic, data, callback, backresult) {
        HostApp.logicWithHint({
          // logic别名，key必须为logic
          'logic': logic,
          // 回调执行方法名，key必须为callback
          'callback': callback,
          // logic执行需要的业务参数
          'data': data,
          // 固定key，代表是否将logic执行结果作为参数传入回调方法，1代表true，0代表false，
          // 执行回调方法传入key为backresult
          // 如需额外拼接参数，写在logic返回值的params，例如xxlogic返回:{"params": "success"}
          'backresult': backresult
        })
      },
    },
    destroyed() {
    },
    events: {
      'closeLatching'(){
        this.showLatching = false
      },
      'closeDisable'(){
        this.showDisable =false
        this.$parent.$parent.showBack = true
        // this.showUser = true
      }
    }
  }
</script>
<style scoped>
  .panel-self{
    border-radius: 5px;
    border:1px solid #c5e1f7;
    background-color: #F2F6FA;
  }
  .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;
  }
  .div-photo{
    width: auto;
    height: auto;
    /* margin-top: 10px; */
    position: absolute;
    bottom: 10px;
    right: 10px;
  }
</style>
