<template>
  <div style="height: auto;width: 100%">
    <!-- 新表 -->
    <div class="row  app-row">
      <div class="col-xs-4" style="margin-top: 5px">
        <img src="../../assets/换表.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label class="font text-left">新表编号</label>
      </div>
      <div class="col-xs-5">
        <input type="text" class="input_search input_ys" placeholder="请输入新表编号..." v-model="model.f_new_num">
      </div>
      <div class="col-xs-3">
        <button type="button" name="button" class="btn btn-primary" @click="Scanningtable">扫码</button>
        <button type="button" name="button" class="btn btn-primary" @click="metersearch">查询</button>

      </div>
    </div>
    <div class="row  app-row">
      <div class="col-xs-4" style="margin-top: 5px;">
        <img src="../../assets/换表.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label class="font text-left">新表类型</label>
      </div>
      <div class="col-xs-7">
        <input type="text" class="input_search input_ys" placeholder="请输入新表类型..." v-model="model.f_new_type" readonly="readonly">
      </div>

    </div>
    <div class="row  app-row">
      <div class="col-xs-4" style="margin-top: 5px;">
        <img src="../../assets/换表.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label class="font text-left">新表品牌</label>
      </div>
      <div class="col-xs-7">
        <input type="text" class="input_search input_ys" placeholder="请输入新表品牌..." v-model="model.f_new_brand" readonly="readonly">
      </div>
    </div>
    <div class="row  app-row">
      <div class="col-xs-4" style="margin-top: 5px;">
        <img src="../../assets/换表.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label class="font text-left">新表型号</label>
      </div>
      <div class="col-xs-7">
        <input type="text" class="input_search input_ys" placeholder="请输入新表型号..." v-model="model.gasmodel" readonly="readonly">
      </div>
      <!--      <v-select-->
      <!--        :value="model.gasmodel"-->
      <!--        :options='newTypeList'-->
      <!--        placeholder='请选择'-->
      <!--        close-on-select-->
      <!--        style="margin-bottom: 10px;"-->
      <!--        value-single-->
      <!--        :search="false"-->
      <!--        v-model="model.gasmodel"-->
      <!--      ></v-select>-->
    </div>


    <div class="row  app-row">
      <div class="col-xs-4" style="margin-top: 5px">
        <img src="../../assets/换表.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label class="font text-left">旧表底数</label>
      </div>
      <div class="col-xs-4">
        <input type="text" class="input_search input_ys" placeholder="请输入旧表底数..." v-model="model.f_original_meter">
      </div>
    </div>
    <div class="row  app-row">
      <div class="col-xs-4" style="margin-top: 5px">
        <img src="../../assets/换表.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label class="font text-left">新表底数</label>
      </div>
      <div class="col-xs-7">
        <input type="text" class="input_search input_ys" placeholder="请输入新表底数..." v-model="model.f_new_meter">
      </div>
    </div>


    <div class="row  app-row">
      <div class="col-xs-4" style="margin-top: 5px">
        <img src="../../assets/换表.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label class="font text-left">新表封号</label>
      </div>
      <div class="col-xs-7">
        <input type="text" class="input_search input_ys" placeholder="请输入新表封号..." v-model="model.f_metertitles">
      </div>
    </div>
    <div class="row  app-row">
      <div class="col-xs-4" style="margin-top: 5px">
        <img src="../../assets/换表.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label class="font text-left">换表原因</label>
      </div>
      <div class="col-xs-7">
        <input type="text" class="input_search input_ys" placeholder="请输入换表原因..." v-model="model.f_comments">
      </div>
    </div>
    <div class="row  app-row">
      <div class="col-xs-4" style="margin-top: 5px">
        <img src="../../assets/换表.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label class="font text-left">旧表累计</label>
      </div>
      <div class="col-xs-7">
        <input type="text" class="input_search input_ys" placeholder="请输入旧表累计..." v-model="model.f_old_leiji">
      </div>
    </div>
    <div class="row  app-row">
      <div class="col-xs-4" style="margin-top: 5px">
        <img src="../../assets/换表.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label class="font text-left">旧表剩余</label>
      </div>
      <div class="col-xs-7">
        <input type="text" class="input_search input_ys" placeholder="请输入旧表剩余..." v-model="model.f_old_shengyu">
      </div>
    </div>
    <div class="row  app-row">
      <div class="col-xs-4" style="margin-top: 5px">
        <img src="../../assets/换表.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label class="font text-left">新表累计</label>
      </div>
      <div class="col-xs-7">
        <input type="text" class="input_search input_ys" placeholder="请输入新表累计..." v-model="model.f_new_leiji">
      </div>
    </div>
    <div class="row  app-row">
      <div class="col-xs-4" style="margin-top: 5px">
        <img src="../../assets/换表.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label class="font text-left">新表剩余</label>
      </div>
      <div class="col-xs-7">
        <input type="text" class="input_search input_ys" placeholder="请输入新表剩余..." v-model="model.f_new_shengyu">
      </div>
    </div>

    <div class="row  app-row">
      <div class="col-xs-4" style="margin-top: 5px">
        <img src="../../assets/换表.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label class="font text-left">是否收费</label>
      </div>
        <v-select
          :value.sync="model.f_is_money"
          :options='ismoney'
          placeholder='请选择'
          close-on-select
          :search="false"
          value-single
          style="margin-bottom: 10px;"
          v-model="model.f_is_money"
        ></v-select>
    </div>
    <div class="row  app-row">
      <div class="col-xs-4" style="margin-top: 5px">
        <img src="../../assets/换表.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label class="font text-left">收费金额</label>
      </div>
      <div class="col-xs-7">
        <input type="text" class="input_search input_ys" placeholder="请输入收费金额..." v-model="model.f_fee_money">
      </div>
    </div>
    <div class="row  app-row">
      <div class="col-xs-4" style="margin-top: 5px">
        <img src="../../assets/换表.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label class="font text-left">是否换卡</label>
      </div>
      <v-select
        :value.sync="model.f_change_card"
        :options='ismoney'
        placeholder='请选择'
        close-on-select
        :search="false"
        value-single
        style="margin-bottom: 10px;"
        v-model="model.f_change_card"
      ></v-select>
    </div>
    <div class="row  app-row">
      <div class="col-xs-4" style="margin-top: 5px">
        <img src="../../assets/换表.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label class="font text-left">新卡编号</label>
      </div>
      <div class="col-xs-7">
        <input type="text" class="input_search input_ys" placeholder="请输入新卡编号..." v-model="model.f_new_card">
      </div>
    </div>
    <div class="row  app-row">
      <div class="col-xs-4" style="margin-top: 5px">
        <img src="../../assets/换表.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label class="font text-left">转移气费</label>
      </div>
      <div class="col-xs-7">
        <input type="text" class="input_search input_ys" placeholder="请输入转移气费..." v-model="model.f_transfer_money">
      </div>
    </div>




    <div class="row  app-row">
      <div class="col-xs-4" style="margin-top: 5px">
<!--        <img src="../../assets/换表.png" style="width: 20px;margin-bottom: 5px" alt="">-->
        <label class="font text-left">计量表更换是否加装辅助材料</label>
      </div>
      <v-select
        :value.sync="model.f_isdefect_a"
        :options='ismoney'
        placeholder='请选择'
        close-on-select
        :search="false"
        value-single
        style="margin-bottom: 10px;"
        v-model="model.f_isdefect_a"
      ></v-select>
    </div>
    <div class="row  app-row">
      <div class="col-xs-4" style="margin-top: 5px">
<!--        <img src="../../assets/换表.png" style="width: 20px;margin-bottom: 5px" alt="">-->
        <label class="font text-left">试压正常，无漏气</label>
      </div>
      <v-select
        :value.sync="model.f_isdefect_b"
        :options='ismoney'
        placeholder='请选择'
        close-on-select
        :search="false"
        value-single
        style="margin-bottom: 10px;"
        v-model="model.f_isdefect_b"
      ></v-select>
    </div>
    <div class="row  app-row">
      <div class="col-xs-4" style="margin-top: 5px">
<!--        <img src="../../assets/换表.png" style="width: 20px;margin-bottom: 5px" alt="">-->
        <label class="font text-left">计量设备运行正常</label>
      </div>
      <v-select
        :value.sync="model.f_isdefect_c"
        :options='ismoney'
        placeholder='请选择'
        close-on-select
        :search="false"
        value-single
        style="margin-bottom: 10px;"
        v-model="model.f_isdefect_c"
      ></v-select>
    </div>
    <div class="row  app-row">
      <div class="col-xs-4" style="margin-top: 5px">
<!--        <img src="../../assets/换表.png" style="width: 20px;margin-bottom: 5px" alt="">-->
        <label class="font text-left">用气设备运行正常</label>
      </div>
      <v-select
        :value.sync="model.f_isdefect_d"
        :options='ismoney'
        placeholder='请选择'
        close-on-select
        :search="false"
        value-single
        style="margin-bottom: 10px;"
        v-model="model.f_isdefect_d"
      ></v-select>
    </div>
    <div class="row  app-row">
      <div class="col-xs-4" style="margin-top: 5px">
        <img src="../../assets/换表.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label class="font text-left">备注</label>
      </div>
      <div class="col-xs-7">
        <input type="text" class="input_search input_ys" placeholder="请输入备注..." v-model="model.f_remarks">
      </div>
    </div>
    <div class="row  app-row">
      <div class="col-xs-4" style="margin-top: 5px">
        <img src="../../assets/换表.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label class="font text-left">换表人</label>
      </div>
      <div class="col-xs-7">
        <input type="text" class="input_search input_ys" placeholder="请输入换表人..." v-model="model.f_operator">
      </div>
    </div>
    <div class="row text-center" style="margin-top: 25px;margin-bottom: 30px">
      <button type="button" class="btn btn-lg btn-font btn-color" style="width: 28%;" @click="gotochengemeter()">确认
      </button>
      <!--            <button type="button" class="btn btn-lg btn-font btn-color" style="width: 25%;" @click="clean()">取消</button>-->
    </div>
    <!--<div>
      <button @click="gotochengemeter" class="btn_cz" style="margin-bottom: 10px">确认</button>
    </div>-->
  </div>
</template>

<script>
import Vue from 'vue'
import {HttpResetClass} from "vue-client";


export default {
  //name: "IndoorRepair"
  title: '在线换表',
  props: ['item'],
  data() {
    return {
      model: {
        f_userinfo_code: '',
        f_original_type: '', // 旧表品牌
        f_original_meter: '',//旧表底数
        f_original_Num: '',// 旧表编号
        f_new_type: '', //新表类型
        f_new_brand: '', // 新表品牌
        gasmodel: '', // 新表型号
        f_new_meter: '', //新表底数
        f_new_num: '', //新表表号
        f_new_leiji:'',
        f_new_shengyu:'',
        f_old_leiji:'',
        f_old_shengyu:'',
        f_isdefect_a:'',
        f_isdefect_b:'',
        f_isdefect_c:'',
        f_isdefect_d:'',
        f_metertitles: '',
        f_comments: '',
        f_is_money: '',
        f_fee_money: '',
        f_transfer_money: '',
        f_change_card:'',
        f_new_card:'',
        f_remarks:'',
        f_depname: Vue.user.deps,
        f_depid: Vue.user.depids,
        f_orgid: Vue.user.orgid,
        f_orgname: Vue.user.orgs,
        f_operator: Vue.user.name,
        f_operatorid: Vue.user.id
      },
      ismoney: [{label: "是", value: "是"}, {label: "否", value: "否"}],
      // changetypes: [{label: "换新表", value: "换新表"}, {label: "气表清零", value: "气表清零"}, {label: "换计费器", value: "换计费器"}],
      // changeReasonList: [{label: "漏气", value: "漏气"}, {label: "燃气表损坏", value: "燃气表损坏"}],
      // changeReason2List: [{label: "表计量异常", value: "表计量异常"}, {label: "表不走", value: "表不走"}],
      // changeTypeList: [{label: "换新表", value: "换新表"}, {label: "清零", value: "清零"}],
      // originalTypeList: [{label: "请选择。。。", value: ""}, {label: "物联网表", value: "物联网表"}, {
      //   label: "金额卡表",
      //   value: "金额卡表"
      // }, {label: "气量卡表", value: "气量卡表"}, {label: "机表", value: "机表"}, {label: "远传表", value: "远传表"}],
      // newBrandList: [{label: "111", value: "111"}, {label: "222", value: "222"}],
      // newTypeList: [{label: "G2.5", value: "G2.5"}, {label: "G4", value: "G4"}],
      // avoidReasonList: [{label: "原因1", value: "原因1"}, {label: "原因2", value: "原因2"}],
      // switchTypeList: [{label: "金额", value: "金额"}, {label: "气量", value: "气量"}],
      // filialeid: Vue.user.orgid,
      row: {}, //用户信息
      model1: {},// 换表的model值
      allBrandList: [],//所有表品牌
      f_userinfo_code: '',
      f_orgid: '',
      f_userfiles_id: '', //新表档案id
      islot: false

    }
  },
  methods: {
    getCode() {
      var datapa = HostApp.getCode().data;
      //tag
      this.model.f_new_num = datapa
      this.$showMessage(`扫码返回值为：${datapa}`)

    },
    Scanningtable() {
      //tag
      HostApp.__this__ = this
      HostApp.scanCode({callback: "javascript:HostApp.__this__.getCode();"})
    },
    metersearch(){
      new HttpResetClass().load('post',`${this.$androidUtil.getProxyUrl()}/rs/sql/webMeterInfo`,{data:{condition:`1=1 and f_meternumber='${this.model.f_new_num}'`,items: "*",
          orderitem: "id",
          tablename: "t_meterinfo"}}).then(res=>{
        if (res.data.length>0){
             this.model.f_new_type = res.data[0].f_metertype
             this.model.f_new_brand = res.data[0].f_meter_brand
             this.model.gasmodel = res.data[0].f_meter_style
        }else {
          this.$showMessage("未找到该表号信息")
        }

      })
    },
    // getallBrandList() {
    //   //tag
    //   this.$resetpost(`${this.$androidUtil.getProxyUrl()}/rs/logic/getSaleInitData`, {data: {f_orgid: this.f_orgid}}).then((row) => {
    //     //tag
    //     //tag)
    //     if (row.data.gasbrands) {
    //       row.data.gasbrands.forEach((item) => {
    //         let BrandList = {label: item.f_meter_brand, value: item}
    //         this.allBrandList.push(BrandList)
    //       })
    //     } else {
    //       this.$showMessage('表品牌获取失败！')
    //     }
    //     //tag)
    //   })
    // },
    // getPRICE() {
    //   //tag
    //   let http = new HttpResetClass()
    //   http.load('POST', `${this.$androidUtil.getProxyUrl()}/rs/sql/onlinegetprice`, {data: {condition: ` f_userinfo_id = '${this.item.f_userinfo_id}'`}}, {
    //     resolveMsg: null,
    //     rejectMsg: null
    //   }).then((row) => {
    //     //tag)
    //     //tag)
    //     this.model.f_remanent_price = row.data[0].f_price
    //   }).catch((e) => {
    //     //tag)
    //     this.$showMessage('补气单价获取失败！')
    //   })
    // },
    gotochengemeter() {
      //tag
      //tag)

      // 校验
      if (this.myverify()) {
        new HttpResetClass().load('post',`${this.$androidUtil.getProxyUrl()}/rs/logic/qinhuaChangeMeter`,{model:this.model}).then(res=>{
          if (res.data.code=='200'){
            this.$showMessage('换表成功')
            this.$dispatch('confirm')
            //tag
            //tag)
          }else{
            this.$showMessage('换表失败'+res.data.msg)
          }
        })

      } else {
        //tag
      }

    },
    myverify() {

      //tag
      let flag = false
      if (!this.model.f_new_num) {
        //tag
        this.$showMessage('请输入新表编号...')
        return flag
      }
      if (!this.model.f_original_meter) {
        //tag
        this.$showMessage('请输入旧表底数...')
        return flag
      }
      if (!this.model.f_new_meter) {
        //tag
        this.$showMessage('请输入新表底数...')
        return flag
      }
      if (!this.model.f_metertitles) {
        //tag
        this.$showMessage('请输入新表封号...')
        return flag
      }
      if (!this.model.f_comments) {
        //tag
        this.$showMessage('请输入换表原因...')
        return flag
      }
      if (!this.model.f_old_leiji) {
        //tag
        this.$showMessage('请输入旧表累计...')
        return flag
      }
      if (!this.model.f_old_shengyu) {
        //tag
        this.$showMessage('请输入旧表剩余...')
        return flag
      }
      if (!this.model.f_new_leiji) {
        //tag
        this.$showMessage('请输入新表累计...')
        return flag
      }
      if (!this.model.f_new_shengyu) {
        //tag
        this.$showMessage('请输入新表剩余...')
        return flag
      }
      if (!this.model.f_is_money) {
        //tag
        this.$showMessage('请选择是否收费...')
        return flag
      }
      if (this.model.f_is_money == '是' && !this.model.f_fee_money) {
        //tag
        this.$showMessage('请输入收费金额...')
        return flag
      }
      if (!this.model.f_transfer_money) {
        //tag
        this.$showMessage('请输入转移气费...')
        return flag
      }
      if (!this.model.f_change_card) {
        //tag
        this.$showMessage('请选择是否换卡...')
        return flag
      }
      if (this.model.f_change_card == '是' && !this.model.f_new_card) {
        //tag
        this.$showMessage('请输入新卡编号...')
        return flag
      }
      if (!this.model.f_isdefect_a) {
        //tag
        this.$showMessage('请选择计量表更换是否加装辅助材料...')
        return flag
      }
      if (!this.model.f_isdefect_b) {
        //tag
        this.$showMessage('请选择试压正常，无漏气...')
        return flag
      }
      if (!this.model.f_isdefect_c) {
        //tag
        this.$showMessage('请选择计量设备运行正常...')
        return flag
      }
      if (!this.model.f_isdefect_d) {
        //tag
        this.$showMessage('请选择用气设备运行正常...')
        return flag
      }
      flag = true
      return flag

    }
  },
  ready() {
    //tag)
    // //tag)
    this.model.f_userinfo_code = this.item.f_userinfo_code
    this.model.f_original_type = this.item.f_meter_type   //旧表类型
    this.model.f_original_Num = this.item.f_meternumber   //旧表编号
    // this.model.f_original_meter = this.item.f_meter_base  //旧表底数
    // this.model.f_original_remain = this.item.f_total_gas  //旧表累气
    // this.model.f_original_money = this.item.f_total_fee  //旧表累金
    this.model.f_orgid = this.item.f_orgid
    //tag)
    //tag)
    //tag

    // // 所有新表品牌
    // this.getallBrandList()
    // // 获取单价
    // this.getPRICE()
  },
  watch: {
    // 'model.f_new_num'(val) {
    //   //tag
    //   //tag
    //   //tag
    //   let res = {
    //     "data": {
    //       f_new_type: "表类型1",
    //       f_new_brand: '表品牌1', // 新表品牌
    //       gasmodel: '表型号1' // 新表型号
    //     }
    //   }
    //   this.model.f_new_type = res.data.f_new_type
    //   this.model.f_new_brand = res.data.f_new_brand
    //   this.model.gasmodel = res.data.gasmodel
    //
    // },
    // 'model.f_new_type'(val) {
    //   // 输入新表类型时获取新表品牌和型号
    //   //tag
    //   if (val) {
    //     this.newBrandList = []
    //     //tag + '----新表类型----')
    //     this.allBrandList.forEach((item) => {
    //       // //tag+'新表类型3333')
    //       if (item.value.f_meter_type == val) {
    //         //tag
    //         //tag)
    //         this.newBrandList.push(item)
    //       }
    //     })
    //     //tag)
    //     /*if (val=='物联网表') {
    //       //tag
    //       this.islot = true
    //     }else {
    //       this.islot = false
    //     }*/
    //   } else {
    //     //tag
    //   }
    // },
    // 'model.f_original_meter'(val) {
    //   //tag
    //   //tag)
    //   if (this.item.f_collection_type == '按气量') {
    //     //tag
    //     this.model.f_transfer_gas = this.item.f_total_gas - val - 0   // 补气量 = 累购 - 底数 - 余量
    //     //tag
    //     //tag
    //     this.model.f_transfer_money = parseFloat(this.model.f_transfer_gas) * parseFloat(this.model.f_remanent_price) //补气金额 =  补气量*气量单价
    //     this.model.f_transfer_money = this.model.f_transfer_money.toFixed(2);
    //     //tag
    //   } else if (this.item.f_collection_type == '按金额') {
    //     //tag
    //     //tag
    //     // 计算总气量
    //     var f_total_gas = parseFloat(this.item.f_total_fee) / parseFloat(this.model.f_remanent_price)
    //     this.model.f_transfer_gas = parseFloat(f_total_gas) - parseFloat(val) - 0   // 补气量 = 累购 - 底数 - 余量
    //     this.model.f_transfer_gas = this.model.f_transfer_gas.toFixed(2);
    //     //tag
    //     this.model.f_transfer_money = parseFloat(this.model.f_transfer_gas) * parseFloat(this.model.f_remanent_price) //补气金额 =  补气量*气量单价
    //     this.model.f_transfer_money = this.model.f_transfer_money.toFixed(2);
    //     //tag
    //   }
    //
    // }

  }

}
</script>

<style scoped>
.app-row {
  background-color: white;
  padding: 5px 10px 0 10px;
  border-bottom: 1px solid rgba(235, 235, 235, 0.7);
}

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

.input_ys {
  /*border: 1px solid #93B2D3 !important;*/
  border: none !important;
  width: 220px;
  height: 35px;
}

.btn_cz {
  background-color: #499edf;
  color: #FFFFFF;
  width: 65px;
  height: 40px;
  border-radius: 8px;
  font: 600 16px PingFang-SC-Bold;
  float: right;
  margin-right: 10px;
}
</style>
