<template>
  <!--在该页面添加参数管理按钮-->
  <div class="flex-row auto" v-for="row in addGasModelArr" style="margin-top:10px;width:96%" >
    <div class="thumbnail"style=" margin-right: 50px;" >
      <img :src="imgsrc" alt="图片加载失败" class="img-rounded" style="width: 60px;">
    </div>
    <!--<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 form-input-group">
             <div class="col-sm-1"></div>
             <input type="text" class="form-control" v-model="row.f_meter_style" placeholder='气表型号' >
           </div>
           <div class="col-sm-4 form-group form-input-group" :class="[$m.mtype.required ? 'select-error' : '']">
             <div class="col-sm-1"></div>
             <!--<div class="col-sm-3">-->
               <!--<input type="text" 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>
           <div class="col-sm-4 form-group form-input-group">
             <div class="col-sm-1"></div>
             <input type="text" class="form-control" v-model="row.f_pulse" placeholder='脉冲'>
           </div>
         </div>

         <div class="row auto">
             <div class="col-sm-4 form-group form-input-group">
               <div class="col-sm-1"></div>
               <input type="text" class="form-control" v-model="row.f_rated_traffic" placeholder='额定流量'>
             </div>

             <div class="col-sm-4 form-group form-input-group" v-if="!show">
               <div class="col-sm-1"></div>
               <input type="text" class="form-control" v-model="row.f_coding" placeholder='卡类型' >
             </div>
             <div class="col-sm-4 form-group form-input-group" v-if="f_meter_type !=='机表' && !show">
               <div class="col-sm-1"></div>
               <v-select :value.sync="row.cardsize"  :options='cardsizes' placeholder='卡类型' close-on-select>
               </v-select>
             </div>

             <div class="col-sm-4 form-group form-input-group" v-if="show">
               <div class="col-sm-1"></div>
               <v-select :value.sync="row.f_billing"  :options='billing' placeholder='计费方式' close-on-select>
               </v-select>
             </div>

             <div class="col-sm-4 form-group form-input-group" v-if="show">
               <div class="col-sm-1"></div>
               <v-select :value.sync="row.f_calculation"  :options='calculation' placeholder='结算方式' close-on-select>
               </v-select>
             </div>

         </div>
      </form>
    <!--</validator>-->
    <div style="width: 60px;">
      <img :src="imgdelete" alt="图片加载失败" style="width: 50px;padding: 10px;cursor: pointer;" @click="deleteMeter($index)" 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>

  <div class="panel panel-default auto text-center" @click="addMeter()" style="cursor: pointer;">
    <img :src="imgmeter" alt="图片加载失败" class="img-rounded" style="width: 50px;margin:10px;">
  </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',
      imgmeter: '/images/mainicon/addmeter.png',
      imgaddparam: '',
      imgupdateparam: '',
      f_gasbrand_id: '',
      f_meter_type: '',
      show: false,
      showParame: false,
      selectGas: null, // 选中的表类型
      gasmodel_id: '',
      gastype: 'gasmodel',

      metertitles: this.$appdata.getParam('表类型'),
      cardsizes: this.$appdata.getParam('大小卡'),
      billing: this.$appdata.getParam('计费方式'),
      calculation: this.$appdata.getParam('结算方式')
    }
  },
  props: ['data'],
  watch: {
    'data': {
      handler (val) {
        this.judgeInitValue(val)
      }
    },
    'data.f_meter_type[0]' (val) {
      this.f_meter_type = val
      if(val === '物联网表'){
        this.show = true
      }else{
        this.show = false
      }
    }
  },
  ready () {
    this.judgeInitValue(this.data)
  },
  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
    },
    addMeter () {
      this.addGasModelArr.push({
        cardsize: [],
        type: [],
        model_used: true,
        f_gasbrand_id: this.f_gasbrand_id
      })
    },
    deleteMeter (index) {
      this.addGasModelArr.splice(index, 1)
      console.log('气表型号删除之后，，，，', this.addGasModelArr)
    },
    getUpdate () {
      // let tablename = 't_gasmodel'
      let condition = 'g.f_gasbrand_id=' + "'" + this.f_gasbrand_id + "'"
      let http = new HttpResetClass()
      http.load('POST', 'rs/sql/getModels', {data: {condition: condition}}, {resolveMsg: null, rejectMsg: null}).then((res) => {
        if (res.data.length > 0) {
          for (var i = 0; i < res.data.length; i++) {
            res.data[i].type = res.data[i].f_type ? [res.data[i].f_type] : ''
            res.data[i].cardsize = res.data[i].f_size_card ? [res.data[i].f_size_card] : ''
          }
          res.data.forEach((item) => {
            Vue.set(item, 'model_used', item.counts === 0)
          })
          this.addGasModelArr = res.data
        }

        if (this.addGasModelArr.length === 0) {
          this.initmodel()
        }
      }).catch ((error) => this.$dispatch('error', '获取气表明细错误', this.data, error))
    },
    judgeInitValue (val) {
      this.f_meter_type = val.f_meter_type[0]
      if (val.id && val.id !== '') {
        this.f_gasbrand_id = val.id
        this.getUpdate()
      } else {
        this.isConfirm = true
        this.isModify = false
        this.initmodel()
      }
    },
    initmodel () {
      this.addGasModelArr = [{
        cardsize: [],
        type: [],
        model_used: true
      }]
    },
    mValid (bool) {
      this.$dispatch('self-valid', bool)
    },
  }
}
</script>
