<template>
  <!--在该页面添加参数管理按钮-->
  <div class="flex-row auto" style="margin-top:10px;height: auto" >
    <validator name='m' @valid="mValid(true)"  @invalid="mValid(false)">
      <form class="form-horizontal" style="flex: 1;">
        <div class="row auto">
          <div class="col-sm-4 form-group" :class="[$m.f_meter_style.required ? 'has-error' : 'has-success']">
            <label for="f_meter_style"  class="font_normal_body">气表型号</label>
            <input type="text" class="input_search" style="width: 60%" v-model="row.f_meter_style" placeholder='气表型号' v-validate:f_meter_style='{required: true }' >
          </div>
          <div class="col-sm-4 form-group">
            <label for="f_topup_ceil" class="font_normal_body ">充值上限</label>
            <input class="input_search" style="width: 60%" type="number" v-model="row.f_topup_ceil"  >
          </div>
          <div class="col-sm-4 form-group">
            <label for="f_police_gas" class="font_normal_body">报警气量</label>
            <input class="input_search" style="width: 60%" type="number" v-model="row.f_police_gas"  >
          </div>
          <div class="col-sm-4 form-group">
            <label for="f_overdr_lines" class="font_normal_body">透支额度</label>
            <input class="input_search" style="width: 60%" type="number" v-model="row.f_overdr_lines"  >
          </div>
          <div class="col-sm-4 form-group">
            <label  class="font_normal_body ">最大量程</label>
            <input class="input_search" placeholder="最大量程" style="width:60%" type="number" v-model="row.f_capacity">
          </div>
          <div class="col-sm-4 form-group" :class="[$m.mtype.required ? 'has-error' : '']">
            <label for="f_meter_style"  class="font_normal_body">表类型&emsp;</label>
            <input type="text" class="input_search" v-show="false" v-model="$refs.mtype.selectedItems" v-validate:mtype='{required: true }'>
            <v-select :value.sync="row.type"
                      :options='metertitles'
                      placeholder='表类型'
                      v-model="row.type"
                      close-on-select  v-ref:mtype>
            </v-select>
          </div>
          <div class="col-sm-4 form-group">
            <label for="f_coding"  class="font_normal_body">卡类型&emsp;</label>
            <input type="text" class="input_search"  style="width: 60%" v-model="row.f_coding" placeholder='卡类型' >
          </div>
          <div class="col-sm-4 form-group">
            <label for="f_meter_style"  class="font_normal_body">气表协议</label>
            <input type="text" class="input_search" style="width: 60%" v-model="row.f_size_card" placeholder='气表协议'>
          </div>
        </div>
      </form>
    </validator>
    <div style="width: 60px;">
      <img :src="imgdelete" alt="图片加载失败" style="padding-top: 10px;height: 40px;;cursor: pointer;" @click="deleteMeter()" v-if="!row.model_used">
      <!--<button type="button" class="btn btn-primary" v-if="row.id && !row.f_param_list" @click='gasParamter(row)'>添加参数</button>-->
      <!--<button type="button" class="btn btn-primary" v-if="row.id && row.f_param_list" @click='gasParamter(row)'>修改参数</button>-->
    </div>
  </div>
  <modal :show.sync="showParame"  v-ref:modal backdrop="false" >
    <header slot="modal-header" class="modal-header">
      <button type="button" class="close" @click="cancel"><span>&times;</span></button>
      <h3 class="modal-title" style="text-align: center;">添加参数</h3>
    </header>
    <article slot="modal-body" class="modal-body">
      <add-json-parameter v-ref:addparamlist :gasmodel_id="gasmodel_id" :gastype="gastype"></add-json-parameter>
    </article>
    <footer slot="modal-footer" class="modal-footer">
      <button type="button" class="btn btn-primary"  @click='confirm()'>确认</button>
    </footer>
  </modal>
</template>

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

export default {
  title: '气表型号管理',
  data () {
    return {
      addGasModelArr: [],
      imgsrc: '/images/mainicon/biaopan.png',
      imgdelete: '/images/mainicon/deletedevice.png',
      f_meter_type: '',
      show: false,
      showParame: false,
      selectGas: null, // 选中的表类型
      gasmodel_id: '',
      gastype: 'gasmodel',
      metertitles: this.$appdata.getParam('表类型')

    }
  },
  props: ['row', 'index', 'meterType'],
  ready () {
    this.isIOT(this.meterType)
  },
  watch: {
    'meterType' (val) {
      this.isIOT(val)
    },
    'row' (val) {
      console.log(val, '=================row')
    }
  },
  methods: {
    async confirm () {
      if (this.$refs.addparamlist.confirm()) {
        var paramlist = this.$refs.addparamlist.addGasParameter
        await this.$resetpost('rs/logic/updateGasParam', {data: {id: this.selectGas.id, paramlist: paramlist, gastype: 'gasmodel'}}, {resolveMsg: '更新成功', rejectMsg: '更新失败'})
        this.showParame = false
      }
    },
    gasParamter (val) {
      this.selectGas = val
      this.gasmodel_id = val.id
      this.showParame = true
    },
    cancel () {
      this.gasmodel_id = ''
      this.showParame = false
    },
    deleteMeter () {
      console.log('删除气表型号', this.index)
      this.$dispatch('delete-meter', this.index)
    },
    mValid (bool) {
      this.row.valid = bool
      this.$dispatch('self-valid', bool)
    },
    isIOT (val) {
      this.f_meter_type = val
      this.show = val === '物联网表'
    }
  }
}
</script>
