<template>
  <div class="auto clearfix">
    <div class="row app-row col-xs-12 col-sm-6 col-md-6">
      <div class="col-xs-4 col-sm-4 col-md-4">
        <img src="../../../assets/户编号.png" style="width: 20px;margin-bottom: 5px" alt="">
        <span class="text-left font">客户编号</span>
      </div>
      <div class="col-xs-8 col-sm-8 col-md-8">
        <p class="text-left show-font">{{ model.f_userinfo_code }}</p>
      </div>
    </div>
    <div class="row app-row col-xs-12 col-sm-6 col-md-6">
      <div class="col-xs-4 col-sm-4 col-md-4">
        <img src="../../../assets/姓名.png" style="width: 20px;margin-bottom: 5px" alt="">
        <span class="text-left font">客户姓名</span>
      </div>
      <div class="col-xs-8 col-sm-8 col-md-8">
        <p class="text-left show-font">{{ model.f_user_name }}</p>
      </div>
    </div>
    <div class="row app-row col-xs-12 col-sm-12 col-md-12">
      <div class="col-xs-4 col-sm-2 col-md-2">
        <img src="../../../assets/地址.png" style="width: 20px;margin-bottom: 5px" alt="">
        <span class="text-left font">客户地址</span>
      </div>
      <div class="col-xs-8 col-sm-10 col-md-10">
        <p class="text-left show-font">{{ model.f_address }}</p>
      </div>
    </div>
    <div class="row app-row col-xs-12 col-sm-6 col-md-6">
      <div class="col-xs-4 col-sm-4 col-md-4">
        <img src="../../../assets/表类型.png" style="width: 20px;margin-bottom: 5px" alt="">
        <span class="text-left font">气表类型</span>
      </div>
      <div class="col-xs-8 col-sm-8 col-md-8">
        <p class="text-left show-font">{{ model.f_meter_classify }}</p>
      </div>
    </div>
    <div class="row app-row col-xs-12 col-sm-6 col-md-6">
      <div class="col-xs-4 col-sm-4 col-md-4">
        <img src="../../../assets/表类型.png" style="width: 20px;margin-bottom: 5px" alt="">
        <span class="text-left font">气表品牌</span>
      </div>
      <div class="col-xs-8 col-sm-8 col-md-8">
        <p class="text-left show-font">{{ model.f_meter_brand }}</p>
      </div>
    </div>
    <div class="row app-row col-xs-12 col-sm-6 col-md-6">
      <div class="col-xs-4 col-sm-4 col-md-4">
        <img src="../../../assets/表号.png" style="width: 20px;margin-bottom: 5px" alt="">
        <span class="text-left font">表号</span>
      </div>
      <div class="col-xs-8 col-sm-8 col-md-8">
        <input type="text" class="form-control show-font" v-model="model.f_meternumber" placeholder="请输入表号">
      </div>
    </div>

    <div class="row app-row col-xs-12 col-sm-6 col-md-6">
      <div class="col-xs-4 col-sm-4 col-md-4">
        <img src="../../../assets/姓名.png" style="width: 20px;margin-bottom: 5px" alt="">
        <span class="text-left font">通气人</span>
      </div>
      <div class="col-xs-8 col-sm-8 col-md-8">
        <input type="text" class="form-control show-font" v-model="model.f_gas_person" placeholder="请输入通气人">
      </div>
    </div>
    <div class="row app-row col-xs-12">
      <div class="col-xs-4 col-sm-4 col-md-4">
        <img src="../../../assets/底数.png" style="width: 20px;" alt="">
        <span class="text-left font">备注</span>
      </div>
      <div class="col-xs-8 col-sm-8 col-md-8">
        <input class="form-control show-font" v-model="model.f_comments" placeholder="备注">
      </div>
    </div>
    <div class="col-xs-12 text-center  app-row">
      <button type="button" class="btn btn-lg btn-font btn-color" style="width: 22%;" @click="commit()">开通</button>
    </div>
  </div>
</template>
<script>
import * as Util from '../../../components/Util'
import Vue from 'vue'
// import {toStandardTimeString} from 'readmeter-client/src/components/Util'

export default {
  title: '物联网表单户开通',
  data() {
    return {
      showpictrue: false,
      showd: false,
      model: {
        f_userinfo_id: '',
        f_user_id: '',
        f_meternumber: '',
        version: '',
        f_gas_person: '',
        f_user_name: '',
        f_balance_amount: '',
        f_table_state: '',
        f_meter_classify: '',
        f_address: '',
        f_meter_brand: '',
      },
      tabname: '在线抄表'
    }
  },
  props: {},
  async ready() {
    await this.readyInit()
  },
  methods: {
    readyInit() {
      this.tabname = this.data.tabname
      console.log('-----------------------------------this.tabname', this.tabname)
      this.model = Object.assign({}, this.model, this.data)
      this.model.f_gas_person = Vue.user.name
    },
    cameraCallBack(prop, fileName) {
      HostApp.__this__.model.f_notified_path = fileName + '?' + Math.random()
      HostApp.__callback__ = null
      HostApp.__this__ = null
    },
    async commit() {
      if (!this.model.f_gas_person) {
        this.$showMessage(`请填写通气人`, ['confirm', 'cancel'])
        return
      }
      let param = {
        f_user_id: this.model.f_user_id,
        f_userinfo_id: this.model.f_userinfo_id,
        f_open_date: Util.toStandardTimeString(),
        f_open_person: Vue.user.name,
        f_comments: this.model.f_comments,
        f_state: '有效',
        f_operator: Vue.user.name,
        f_operatorid: Vue.user.id,
        f_orgname: Vue.user.orgs,
        f_orgid: Vue.user.orgid,
        f_depid: Vue.user.orgid,
        f_depname: Vue.user.orgs,
        f_meternumber: this.model.f_meternumber,
        version: this.model.version,
        f_table_state: '正常',
        f_gas_date: Util.toStandardTimeString(),
        f_gas_person: this.model.f_gas_person,
        f_userfiles_id: this.model.f_userfiles_id
      }
      this.$showMessage(`开通前请确认表号和表类型！！！`, ['confirm', 'cancel']).then((res) => {
        if (res === 'confirm') {
          this.$resetpost(`${this.$androidUtil.getProxyUrl()}/rs/logic/updateUserfiles`, param).then((res) => {
            if (res.data == 200) {
              this.$showMessage('开通成功')
            } else {
              this.$showMessage('网络异常，请稍后再试')
            }
          })
        }
      })
    },

  },
  watch: {
    'data'() {
    }
  }
}
</script>
<style scoped>
.mt-5 {
  margin-top: 5px;
}

.mt-10 {
  margin-top: 10px;
}

.mt-20 {
  margin-top: 20px;
}

.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;
}

.font {
  font: 15px PingFang-SC-Medium;
  color: #666666;
}

.show-font {
  font: 15px PingFang-SC-Medium;
  color: #333333
}

.btn-font {
  font: 600 16px PingFang-SC-Bold;
  color: #499EDF;
}

.btn-color {
  background-color: #FFFFFF;
  border-radius: 10px;
  border: 1px solid #499EDF;
}
</style>
