<template>
  <div class="auto">
    <validator name='m'>
      <form novalidate class="form-horizontal select-overspread" v-ref:meter>
        <ul class="nav nav-tabs">
          <li class="active"><a href="#">表具信息</a></li>
        </ul>
        <div class="form-group">
          <div :class="[$m.f_meternumber.required ? 'has-error' : 'has-success']">
            <label for="f_meternumber" class=" col-sm-2 control-label">表号</label>
            <div class="col-sm-3">
              <input class="form-control" type="text" v-model="model.f_meternumber" @blur.prevent="meternumberverifi()"
                     v-validate:f_meternumber='{required:true}' placeholder="表具号" :disabled="isEdit"/>
            </div>
          </div>
          <div :class="[$m.f_metertitles.required ? 'has-error' : 'has-success']">
            <label for="f_metertitles" class=" col-sm-2 control-label">表封号</label>
            <div class="col-sm-3">
              <input class="form-control" type="text" v-model="model.f_metertitles"
                     v-validate:f_metertitles='{required:true}' placeholder="表具封号" :disabled="isEdit"/>
            </div>
          </div>
        </div>

        <div class="form-group">
          <div :class="[$m.f_barcode.required ? 'has-error' : 'has-success']">
            <label for="f_barcode" class=" col-sm-2 control-label">条码号</label>
            <div class="col-sm-3">
              <input class="form-control" type="text" v-model="model.f_barcode"
                     v-validate:f_barcode='{required:true}' placeholder="表具条码号" :disabled="isEdit"/>
            </div>
          </div>
          <div :class="[$m.f_gasbrand_id.required ? 'has-error' : 'has-success']">
            <input type="text" v-show="false" v-model="$refs.brand.selectedItems"
                   v-validate:f_gasbrand_id='{required: true }' >
            <label for="f_gasbrand_id" class=" col-sm-2 control-label">气表品牌</label>
            <div class="col-sm-3">
              <v-select :value.sync="model.f_gasbrand" @change="verifigasbrand()"
                        :options='meterbrands'
                        placeholder="气表品牌"
                        v-model='model.f_gasbrand'
                        :disabled="isEdit"
                        v-ref:brand
                        close-on-select>
              </v-select>
            </div>
          </div>
        </div>

        <div class="form-group">
          <div :class="[$m.f_gasmodel_id.required ? 'has-error' : 'has-success']">
            <input type="text" v-show="false" v-model="$refs.model.selectedItems"
                   v-validate:f_gasmodel_id='{required: true }'>
            <label for="f_gasmodel_id" class=" col-sm-2 control-label">气表型号</label>
            <div class="col-sm-3">
              <v-select :value.sync="model.f_gasmodel"
                        :options='model.f_gasbrand[0].gasmodel'
                        placeholder='气表型号'
                        close-on-select
                        :disabled="isEdit"
                        v-model='model.f_gasmodel'
                        v-ref:model></v-select>
            </div>
          </div>
          <div :class="[$m.f_initial_base.required ? 'has-error' : 'has-success']">
            <label for="f_initial_base" class=" col-sm-2 control-label">初始表底数</label>
            <div class="col-sm-3">
              <input class="form-control" type="text" v-model="model.f_initial_base" :disabled="isEdit"
                     v-validate:f_initial_base='{required:true}' placeholder="初始表底数"/>
            </div>
          </div>
        </div>

        <div class="form-group">
          <div :class="[$m.f_real_base.required ? 'has-error' : 'has-success']">
            <label for="f_real_base" class=" col-sm-2 control-label">表具底数</label>
            <div class="col-sm-3">
              <input class="form-control" type="text" v-model="model.f_real_base" :disabled="isEdit"
                     v-validate:f_real_base='{required:true}' placeholder="表具底数"/>
            </div>
          </div>
        </div>
      </form>
      <div style="text-align:right;height:auto;" v-if="model.f_state !== '无效'">
        <button class="btn btn-success" @click="confirm()" :disabled='!$m.valid'>确认
        </button>
        <button class="btn btn-default" @click="close()">取消
        </button>
      </div>
    </validator>
  </div>
</template>
<script>
  /**
   *阶梯气价管理组件
   */
  import Vue from 'vue'

  let getGasbrandGen = async function (self) {
    let res1 = await self.$resetpost('rs/sql/getGasBrand', {data: {condition: `brand.id = '${self.model.f_gasbrand_id}' and model.id = '${self.model.f_gasmodel_id}'`}}, {resolveMsg: null, rejectMsg: null})
    console.log('获取气表品牌', res1.data[0])

    self.meterbrands.forEach((item) => {
      if(res1.data[0].f_meter_brand === null){
        self.$showAlert('气表品牌参数获取异常','danger',2000)
      }
      if (item.label === res1.data[0].f_meter_brand) {
        self.model.f_gasbrand = [item.value]
      }
    })

    self.model.f_gasbrand[0].gasmodel.forEach((item) => {
      if(res1.data[0].f_meter_style===null && res1.data[0].f_type === null){
        self.$showAlert('气表类型参数获取异常','danger',2000)
      }
      if (item.label === res1.data[0].f_meter_style + res1.data[0].f_type) {
        self.model.f_gasmodel = [item.value]
      }
    })
  }
  let veri = async function(self){
    let res1 = await self.$resetpost('rs/sql/verifimeter', {data: {condition: `f_meternumber = '${self.model.f_meternumber}' and f_gasbrand_id = '${self.model.f_gasbrand[0].id}'`}}, {resolveMsg: null, rejectMsg: null})
    if(res1.data.length > 0){
      self.model.f_meternumber = ''
      self.$showAlert('该品牌下已存在编号为'+self.model.f_meternumber+'的表具','danger',2000)
    }
  }
  export default {
    data() {
      return {
        model: '',
        isEdit: true
      }
    },
    props: ['data'],
    watch: {},
    ready() {
      this.model = Object.assign({}, this.model, this.data)
      console.log("model",this.model)
      if(!this.data){
        this.isEdit = false
      }
      if(this.model.f_meter_state === '入库' || this.model.f_meter_state === '调拨' || this.model.f_user_id === ''){
        this.isEdit = false
      }
      if(this.data){
        getGasbrandGen(this)
      }
    },
    methods: {
      initModel() {
        this.model = {
          f_user_id: '',
          f_meternumber: '',//表号
          f_metertitles: '',//表封号
          f_barcode: '',//表条码号
          f_gasbrand_id: '',//气表品牌
          f_gasmodel_id: '',//气表型号
          f_table_state: '',//表状态
          f_initial_base: '',//初始表底数
          f_real_base: '',//表底数
          f_meter_state: ''
        }
      },
      close() {
        this.$dispatch('close')
      },
      async confirm() {
        let datas = {
          f_meternumber: this.model.f_meternumber,
          f_metertitles: this.model.f_metertitles,//表封号
          f_barcode: this.model.f_barcode,//表条码号
          f_gasbrand_id: this.model.f_gasbrand[0].id,//气表品牌
          f_gasmodel_id: this.model.f_gasmodel[0].id,//气表型号
          f_table_state: '正常',//表状态
          f_initial_base: this.model.f_initial_base,//初始表底数
          f_real_base: this.model.f_real_base,
          f_meter_state : '入库',
          f_defname: '表具追溯',
          f_processId: '',
          type:'添加'
        }
        if(this.data && this.data.f_user_id != null){
          datas.type = '修改'
          datas.f_user_id = this.data.f_user_id
          datas.version = this.data.version
          datas.f_meternumber = data.f_meternumber[0]
          datas.f_barcode = data.f_barcode[0]
          datas.f_metertitles = data.f_metertitles[0]
        }
        console.log("save",datas)
        await Vue.resetpost('rs/logic/meternext', {data: datas})
        this.close()
        this.$dispatch('searchs')
      },
      meternumberverifi() {
        this.verifi()
      },
      verifigasbrand(){
        this.verifi()
      },
      verifi(){
        if((this.data == null) && (this.model.f_meternumber) && (this.model.f_gasbrand)){
          veri(this)
        }
      }
    },
    computed: {
      meterbrands() {
        return this.$GetSaleParam.getGasbrand()
      }
    }
  }
</script>
<style lang="less">
  #meter-trace-form {
    .form-group {
      margin-left: 0px;
      margin-right: 0px;
    }
  }
</style>
