<template>
  <div class="flex">
    <div class="row auto app-row">
      <div class="col-xs-3">
        <p class="text-left">客户编号</p>
      </div>
      <div class="col-xs-9">
        <p class="text-right">{{ model.f_userinfo_id }}</p>
      </div>
    </div>
    <div class="row auto app-row">
      <div class="col-xs-3">
        <p class="text-left">用户姓名</p>
      </div>
      <div class="col-xs-9">
        <p class="text-right">{{ model.f_user_name }}</p>
      </div>
    </div>
    <div class="row auto app-row">
      <div class="col-xs-3">
        <p class="text-left">用户地址</p>
      </div>
      <div class="col-xs-9">
        <p class="text-right">{{ model.f_address }}</p>
      </div>
    </div>
    <div class="row auto app-row">
      <div class="col-xs-3">
        <p class="text-left">用户电话</p>
      </div>
      <div class="col-xs-9">
        <p class="text-right">{{ model.f_user_phone }}</p>
      </div>
    </div>
    <div class="row auto app-row">
      <div class="col-xs-3">
        <p class="text-left">表号</p>
      </div>
      <div class="col-xs-9">
        <p class="text-right app-text-muted">{{ model.f_meternumber }}</p>
      </div>
    </div>
    <div class="row auto app-row">
      <div class="col-xs-3">
        <p class="text-left">上月气量</p>
      </div>
      <div class="col-xs-9">
        <p class="text-right app-text-muted">{{ model.f_last_oughtamount }}</p>
      </div>
    </div>
    <div class="row auto app-row">
      <div class="col-xs-3">
        <p class="text-left">当月气量</p>
      </div>
      <div class="col-xs-9">
        <p class="text-right app-text-muted">{{ model.f_new_tablebase  - model.f_last_tablebase > 0 ? model.f_new_tablebase - model.f_last_tablebase : 0 }}</p>
      </div>
    </div>
    <div class="row auto app-row">
      <div class="col-xs-3">
        <p class="text-left">上期底数</p>
      </div>
      <div class="col-xs-9">
        <p class="text-right app-text-muted">{{ model.f_last_tablebase }}</p>
      </div>
    </div>
    <div class="row auto app-row">
      <div class="col-xs-3">
        <p class="text-left">本期底数</p>
      </div>
      <div class="col-xs-9">
        <input type="text" class="form-control" v-model="model.f_new_tablebase" maxlength="10">
      </div>
    </div>
    <!-- <div class="row auto mt-10  app-row">
      <div class="col-xs-6 hidden-md hidden-lg">
        <avatar-upload :img-src.sync="model.imgInfo" :filename.sync="model.imgName" v-ref:imginfo></avatar-upload>
      </div>
      <div class="col-xs-6 col-md-12 col-lg-12">
        <br class="hidden-md hidden-lg">
        <br class="hidden-md hidden-lg">
        <input type="text" class="form-control" v-model="model.f_new_tablebase" maxlength="10">
      </div>
    </div>
    <div class="row auto app-row-none-border" style="border: 0;">
      <p class="mt-10  col-xs-6 hidden-md hidden-lg">请录入抄表照片</p>
      <p class="mt-10 col-xs-6">请录入本期表底数</p>
    </div> -->
    <div class="row auto mt-10  col-xs-12 col-sm-12 col-md-1 col-md-1">
      <button type="button" class="btn btn-danger btn-lg" style="width: 100%;" @click="commit()">提交</button>
    </div>
    <div class="row auto mt-10">
      <p class="text-warning">&nbsp;&nbsp;提示：表底数输入燃气表黑色部分数字</p>
    </div>
  </div>
</template>
<script>
export default {
  title: '手机单户抄表',
  data () {
    return {
      model: {
        imgInfo: '',
        imgName: '',
        f_meter_base: ''
      },
      flag: false
    }
  },
  props: {
    data: {
      type: Object,
      default: function () {
        return {
        }
      }
    },
    type: {
      type: String,
      default: 'save'
    }
  },
  ready () {
    // 抄表按钮可以点击
    this.flag = true
    this.model = Object.assign({}, this.model, this.data)
  },
  methods: {
    commit () {
      if (!(this.model.f_new_tablebase >= 0)) {
        this.$showMessage('请检查你录入的表底数')
        return
      }
      if (!(this.model.f_new_tablebase - this.model.f_last_tablebase > 0)) {
        this.$showMessage('录入本期表底数不能小于等于上期表底数！')
        return
      }
      // if (!(this.model.imgName && this.model.imgName.length > 0)) {
      //   this.$showMessage('请录入抄表照片！')
      //   return
      // }
      if (!this.flag) {
        this.$showAlert('系统正在进行抄表，请勿重复操作！', 'warning', 2000)
        return
      }
      this.model.lastImgName = `.${this.model.f_user_name}${this.model.imgName.substring(this.model.imgName.indexOf('.'))}`
      // 设置抄表按钮不可用
      this.flag = false
      // 将客户编号放入抄表照片名中
      console.log(this.model.lastImgName)
      this.model.f_oughtamount = this.model.f_new_tablebase - this.model.f_last_tablebase
      let res = this.$androidUtil.bzLogic('phone-readmeter', this.model, {rejectMsg: null, resolve: null})
      console.log(res)
      if (res.status === 200) {
        console.log('抄表完成！')
        // 抄表完成设置按钮可用
        this.flag = true
        this.$showAlert('抄表成功！', 'success', 2000)
        // 发送抄表成功事件给父页面
        this.$dispatch('hand-success', this.type)
      }
    }
  }
}
</script>
<style>
  .mt-5 {
    margin-top: 5px;
  }
  .mt-10 {
    margin-top: 10px;
  }
  .app-row {
    background-color: white;
    padding: 10px 10px 0 10px;
    border-bottom: 1px solid rgba(235, 235, 235, 0.5);
  }
  .app-row-none-border {
    background-color: white;
    padding: 10px 10px 0 10px;
  }
</style>
