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

          <div class="row" style="margin-top:5px;">

            <div class="col-sm-4" :class="[$v.metertype.required ? 'select-error' : '']">
              <label for="f_meter_type" class="font_normal_body">气表类型</label>
              <input type="text" class="input_search" style="width: 60%" v-show="false" v-model="$refs.metertype.selectedItems" v-validate:metertype='{required: true }'>
              <v-select :value.sync="metermessage.f_meter_type"
                        v-model="metermessage.f_meter_type"
                        :options='meterType' placeholder='气表类型'
                        close-on-select v-ref:metertype style="width: 60%"></v-select>
            </div>

            <div class="col-sm-4" :class="[$v.brand.required ? 'select-error' : '']">
              <label for="gasbrand" class="font_normal_body">气表品牌</label>
                <input type="text" class="input_search" style="width:60%" v-show="false" v-model="$refs.brand.selectedItems" v-validate:brand='{required: true }'>
                <v-select :value.sync="metermessage.gasbrand" :options='getMeterBrands(metermessage.f_meter_type)' @change='brandChange' placeholder='气表品牌' close-on-select
                          search v-model='metermessage.gasbrand' v-ref:brand></v-select>
            </div>
            <div class="col-sm-4" :class="[$v.model.required ? 'select-error' : '']">
              <label for="gasmodel" class="font_normal_body">气表型号</label>
                <input type="text" class="input_search" style="width:60%" 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>
        </form>
    </validator>
  </div>
</template>

<script>
  /**
   *公共组件
   *获取气表信息
   */
  export default {
    data () {
      return {
        isdecimal: '否',
        imgsrc: '/images/mainicon/biaopan.png',
        imgmeter: '/images/mainicon/addmeter.png',

        meterType: this.$appdata.getParam('气表类型')
      }
    },
    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)
      },
      resetValidate() {
        this.$resetValidation()
      },
      meterbase () {
        if (this.isdecimal === '是') {
          this.metermessage.f_meter_base = (this.metermessage.f_meter_base - 0).toFixed(4)
        } else {
          this.metermessage.f_meter_base = (this.metermessage.f_meter_base - 0).toFixed(0)
        }
      },
      getMeterBrands (meterType) {
        let res = []
        if (meterType.length > 0) {
          this.meterbrands.forEach((item) => {
            console.log('遍历', meterType[0],item)
            if (item.value.f_meter_type === meterType[0]) {
              res.push(item)
            }
          })
        }
        return res
      }
    },
    computed: {
      usertypes () {
        return this.$appdata.getParam('用户类型')
      },
      positions () {
        return this.$appdata.getParam('安装位置')
      },
      meterbrands () {
        return this.$GetSaleParam.getGasbrand()
      }
    }
  }
</script>
