<template>
  <!--<div class="auto">-->
    <validator name='v'  @valid="onValid()"  @invalid="onInvalid()">
        <form novalidate class="form-horizontal">
          <div class="row auto" >
            <div class="col-sm-4 form-group" :class="[$v.meternumber.required ? 'has-error' : '']">
              <label for="f_meternumber" class="font_normal_body">车牌号</label>
              <input type="text" class="input_search" style="width:60%" class="input_search"
                     @blur="meternumberValidate()"  v-model="metermessage.f_meternumber" v-validate:meternumber='{required: true }' placeholder='新车牌号' >
            </div>
            <div class="col-sm-4 form-group" :class="[$v.f_driving_num.required ? 'has-error' : '']">
              <label for="f_driving_num" class="font_normal_body">行驶证号</label>
              <input type="text" class="input_search" style="width:60%" class="input_search"
                     v-model="metermessage.f_driving_num" v-validate:f_driving_num='{required: true }' placeholder='新行驶证号' >
            </div>
            <div class="col-sm-4 form-group" :class="[$m.brand.required ? 'has-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='meterbrands' placeholder='新汽车品牌' close-on-select value-single
                        @change="getGasmodel" search v-model='metermessage.gasbrand' v-ref:brand></v-select>
            </div>
            <!--<div class="col-sm-4 form-group" :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 auto" >

            <div class="col-sm-4 form-group">
              <label class="font_normal_body">车架号</label>
              <input type="text" class="input_search" style="width:60%" v-model="metermessage.f_vin" placeholder='新车架号'
              >
            </div>

            <div class="col-sm-4 form-group" :class="[$v.meterstyle.required ? 'has-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.meterstyle.selectedItems" v-validate:meterstyle='{required: true }'>
              <v-select :value.sync="metermessage.gasmodel"
                        v-model="metermessage.gasmodel"
                        :options='meterStyle' placeholder='新汽车型号'
                        close-on-select v-ref:meterstyle style="width: 60%"></v-select>
            </div>
            <!--<div class="col-sm-4 form-group" :class="[$v.model.required ? 'has-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',
        meterStyle: [],
        // meterType: this.$appdata.getParam('气表类型')
      }
    },
    props: ['f_userfiles_id', 'metermessage'],
    methods: {
      getGasmodel () {
        let param = {
          f_gasbrand_id:this.metermessage.gasbrand.id
        }
        //查询品牌对应得型号
        this.$resetpost('rs/logic/getBrandModels', param, {
          resolveMsg: null,
          rejectMsg: '汽车型号查询失败！！'
        }).then((res) => {
          //重新组装型号下拉框
          let temArr = []
          res.data.forEach((item) => {
            let tem = {}
            tem.label = item.f_meter_style
            tem.value = item.id
            temArr.push(tem)
          })
          this.meterStyle = temArr
        })
      },
      onValid () {
        this.$dispatch('valid')
      },
      onInvalid () {
        this.$dispatch('invalid')
      },
      brandChange (val) {
        this.isdecimal = val.length > 0 ? val[0].f_isdecimal : '否'
        this.meternumberValidate()
      },
      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) => {
      //       if (item.value.f_meter_type === meterType[0]) {
      //         res.push(item)
      //       }
      //     })
      //   }
      //   return res
      // },
      async meternumberValidate () {
        if (this.metermessage.f_meternumber && this.metermessage.gasbrand.length > 0) {
          if (this.metermessage.gasbrand[0].f_meter_type === '物联网表') {
            let param = {
              f_userfiles_id: this.f_userfiles_id,
              f_meternumber: this.metermessage.f_meternumber,
              f_gasbrand_id: this.metermessage.gasbrand[0].id
            }

            let res = await this.$resetpost('rs/logic/meternumberValidate', param, {
              resolveMsg: null,
              rejectMsg: '车牌号验证失败！！'
            })
            console.log('标号验证返回：', res)
            if (res.data) {
              this.metermessage.f_meternumber = ''
              this.$showAlert('车牌号已存在！！', 'warning', 3000)
            }
          }
        }
      }
    },
    computed: {
      usertypes () {
        return this.$appdata.getParam('用户类型')
      },
      positions () {
        return this.$appdata.getParam('安装位置')
      },
      meterbrands () {
        let temArr = []
        console.log(this.$GetSaleParam.getGasbrand())
        this.$GetSaleParam.getGasbrand().forEach((item) => {
          let tem = {}
          tem.label = item.label
          tem.value = item.value
          temArr.push(tem)
        })
        console.log("看看组装后的数组----------：",temArr)
        return temArr
      }
    }
  }
</script>
