<template>
  <div id="meter-message">
    <validator name='v'  @valid="onValid()"  @invalid="onInvalid()">
        <form class="form-horizontal">
          <div class="row" style="margin-top:10px;">
            <div class="col-sm-4 form-input-group" :class="[$v.meternumber.required ? 'has-error' : '']">
              <label for="f_meternumber" class=" col-sm-2 control-label">表号:</label>
              <input type="text" class="form-control" v-model="metermessage.f_meternumber" v-validate:meternumber='{required: true }' placeholder='表号' >
            </div>
            <div class="col-sm-4 form-input-group">
              <label for="f_metertitles" class=" col-sm-2 control-label">表封号:</label>
              <input type="text" class="form-control" v-model="metermessage.f_metertitles" placeholder='表封号'>
            </div>
            <div class="col-sm-4 form-input-group" :class="[$v.f_meter_base.required ? 'has-error' : '']">
              <label for="f_meter_base" class=" col-sm-2 control-label">表底数:</label>
              <input type="text" class="form-control" v-validate:f_meter_base='{required: true }' @blur='meterbase()' v-model="metermessage.f_meter_base" placeholder='表底数' >
            </div>
          </div>

          <div class="row" style="margin-top:10px;">
            <div class="col-sm-4 form-input-group" :class="[$v.brand.required ? 'select-error' : '']">
              <label for="gasbrand" class=" col-sm-2 control-label">气表品牌:</label>
              <div class="col-sm-2">
                <input type="text" v-show="false" v-model="$refs.brand.selectedItems" v-validate:brand='{required: true }'>
                <v-select :value.sync="metermessage.gasbrand" :options='meterbrands' @change='brandChange' placeholder='气表品牌' close-on-select
                          v-model='metermessage.gasbrand' v-ref:brand></v-select>
              </div>
            </div>
            <div class="col-sm-4 form-input-group" :class="[$v.model.required ? 'select-error' : '']">
              <label for="gasmodel" class=" col-sm-2 control-label">气表型号:</label>
              <div class="col-sm-2">
                <input type="text" v-show="false" v-model="$refs.model.selectedItems"  v-validate:model='{required: true }'>
                <v-select :value.sync="metermessage.gasmodel" :options='metermessage.gasbrand[0] ? metermessage.gasbrand[0].gasmodel : [] ' placeholder='气表型号' close-on-select
                          v-model='metermessage.gasmodel' :disabled= 'metermessage.gasbrand.length === 0 ' @change='modelChange' v-ref:model></v-select>
              </div>
            </div>

          </div>
        </form>
    </validator>
  </div>
</template>

<script>
  /**
   *公共组件
   *获取气表信息
   */
  export default {
    data () {
      return {
        isdecimal: '否',
        imgsrc: '/images/mainicon/biaopan.png',
        imgmeter: '/images/mainicon/addmeter.png'
      }
    },
    props: ['metermessage'],
    methods: {
      onValid () {
        this.$dispatch('valid')
      },
      onInvalid () {
        this.$dispatch('invalid')
      },
      brandChange (val) {
        this.isdecimal = val.length > 0 ? val[0].f_isdecimal : '否'
      },
      modelChange (val) {
        this.$dispatch('gasmodel', this.metermessage.gasbrand)
      },
      meterbase () {
        if (this.isdecimal === '是') {
          this.metermessage.f_meter_base = (this.metermessage.f_meter_base - 0).toFixed(2)
        } else {
          this.metermessage.f_meter_base = (this.metermessage.f_meter_base - 0).toFixed(0)
        }
      }
    },
    computed: {
      usertypes () {
        return this.$appdata.getParam('用户类型')
      },
      viewstyle () {
        return this.$appdata.getParam('显示类型')
      },
      positions () {
        return this.$appdata.getParam('安装位置')
      },
      meterbrands () {
        return this.$GetSaleParam.getGasbrand()
      }
    }
  }
</script>
