<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" 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-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" >
        </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" >
        </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">
        </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" >
        </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" >
        </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">
        </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">
        </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" >
        </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">
        </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="number" v-model.number="model.f_meter_base" >
        </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="number" v-model="model.f_totalgas">
          <button  type="button" class="btn text-rigth  btn-enter btn-enter-font" @click="findUserSelgasInfo()"
                   style="margin-bottom: 5px;float: right">购气记录
          </button>
        </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" >
        </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="referenceGas" 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="number" v-model="model.f_residue_gas" >
        </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>
                          <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 text-right div-photo" >
                        <button type="button" name="button" class="btn btn-photo" @click="takePic('f_overall_path', '抄表照片')">拍照</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="submitbutton" align="center" v-if="role == 'inspect' && item.f_upload_state != '已传'">
        <button @click.stop.prevent="save()" class="btn btn-lg btn-font btn-color">保存</button>
        <button @click.stop.prevent="upload" class="btn btn-lg btn-font btn-color">上传</button>
      </div>
    </form>


    <modal :show.sync="showModal">
      <div slot="modal-header" class="modal-header">
        <h4 class="modal-title">
          购气记录
        </h4>
      </div>
      <div slot="modal-body" class="modal-body">
            <list :model="modellist">
              <div partial>
                <div class="auto app-text" style="margin-top: 5px;">
                  <div class="panel" style="padding: 10px 10px 5px 10px;">
                    <div class="panel-body panel-self">
                      <div class="row col-xs-12 col-sm-6 col-md-6">
                        <p class="panel-title col-xs-4 col-sm-4 col-md-4 text-left font">卡号</p>
                        <p class="panel-title col-xs-8 col-sm-8 col-md-8 text-left input-font">{{ row.f_card_id }}</p>
                      </div>
                      <div class="row col-xs-12 col-sm-6 col-md-6">
                        <p class="panel-title col-xs-4 col-sm-4 col-md-4 text-left font">购气量</p>
                        <p class="panel-title col-xs-8 col-sm-8 col-md-8 text-left input-font">{{ row.f_pregas }}</p>
                      </div>
                      <div class="row col-xs-12 col-sm-6 col-md-6">
                        <p class="panel-title col-xs-4 col-sm-4 col-md-4 text-left font">购气金额</p>
                        <p class="panel-title col-xs-8 col-sm-8 col-md-8 text-left input-font">{{ row.f_preamount }}</p>
                      </div>
                      <div class="row col-xs-12 col-sm-6 col-md-6">
                        <p class="panel-title col-xs-4 col-sm-4 col-md-4 text-left font">付款方式</p>
                        <p class="panel-title col-xs-8 col-sm-8 col-md-8 text-left input-font">{{ row.f_payment }}</p>
                      </div>
                      <div class="row col-xs-12 col-sm-6 col-md-6">
                        <p class="panel-title col-xs-4 col-sm-4 col-md-4 text-left font">缴费日期</p>
                        <p class="panel-title col-xs-8 col-sm-8 col-md-8 text-left input-font">{{ row.f_operate_date }}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </list>
      </div>
      <div slot="modal-footer" class="modal-footer">
        <button type="button" class="btn btn-default" @click="showModal = false">确认</button>
      </div>
    </modal>

    <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'
  import {HttpResetClass} from 'vue-client'

  export default {
    title: '抄表单',
    props: ['f_plan_id', 'item', 'role'],
    data() {
      return {
        modellist: {
          'rows':[]
        },
        type:'',
        onlySave:true,
        showModal: false,
        hasChange:'否',
        referenceGas:0,
        openRadiosss:[
          {
            label: '是',
            value: 0,
            isChecked: false,
          },
          {
            label: '否',
            value:1,
            isChecked: false,
          },
        ],
        model: {
          f_totalgas: '',
          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_changegas:'',
          f_meter_base:0,
          f_meternumber:'',
          f_residue_gas:0,
          f_all_imgs:[]
        },
      }
    },
    async ready() {
      if(this.item.f_state != '未检'){
        let value = {}
        if (this.role == 'inspect') {
          console.log('this.item.f_no_checkplan', this.item.f_no_checkplan)
          value = this.$androidUtil.bzLogic('FetchCheckPaper', {id: this.item.id})
        } else {
          value = await this.$resetpost(`${this.$androidUtil.getProxyUrl()}/rs/logic/getCheckPaperInfo`, {data: {id: this.item.f_paper_id}})
          // value = await this.$resetpost(`rs/logic/getCheckPaperInfo`, {data: {id: this.item.f_paper_id}})
        }
        this.$set('model', value.data[0])
      }else{
        this.model.f_card_id = this.item.f_card_id
        this.model.f_check_item_id = this.item.id
        this.model.f_check_plan_id = this.f_plan_id
        this.model.f_checker_id = Vue.user.id
        this.model.f_checker_name = Vue.user.name
        this.model.f_subcompany = this.item.f_subcompany
        this.model.f_no_checkplan = this.item.f_no_checkplan
        this.model.f_approved = this.item.f_approved
        this.model.f_filialeids = this.item.f_filialeids
        this.model.f_orgstr = this.item.f_orgstr
        this.model.version = this.item.version
        console.log('用户信息。。。' + JSON.stringify(this.model))
      }
      // Object.assign(this.model, this.model, this.userinfo)
    },
    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() {
        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))
            console.log('总累购==>>>>' + JSON.stringify(res.data.totalGas[0].f_pregas))
            if (res.data.userinfo.length > 0) {
              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
            console.log('this.hasChange====>'+this.hasChange)
          })
        }else{
          this.$showMessage('请输入卡号')
        }
      },
      findUserSelgasInfo() {
        let http = new HttpResetClass()
        http.load('POST', `${this.$androidUtil.getProxyUrl()}/rs/sql/SafeSingleTable_OrderBy`, {
          data: {
            tablename:'t_sellinggas',
            condition: " f_card_id = '"+this.model.f_card_id+"' and f_state = '有效'",
            orderitem: ' f_operate_date desc',
            items: '*'
          }
        }, {resolveMsg: null, rejectMsg: null}).then((res) => {
          console.log(res.data)
          console.log("查找用户返回的结果")
          this.modellist.rows = res.data
          this.showModal = true
        })
      },
      upload(){
        this.onlySave = false
        let res = this.save()
      },
      save(){
        if(!this.model.f_meter_base && this.model.f_meter_base  !== 0){
          this.$showMessage('请输入基表读数')
        }
        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
      }
    },
    watch:{
      'model.f_meter_base'(val){
        console.log('valbase==>',val)
        if(val){
          if(this.hasChange == '是'){
            this.referenceGas = (parseFloat(this.model.f_changegas) - parseFloat(this.model.f_meter_base)).toFixed(2)
          }else{
            this.referenceGas = (parseFloat(this.model.f_totalgas) - parseFloat(this.model.f_meter_base)).toFixed(2)
          }
          console.log('this.referenceGas====>'+this.referenceGas)

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