<template>
  <div class="auto">
    <div class="" v-for="row in addGasModelArr">
      <add-gas-model-info v-on:toggle = "getArrParam" :row="row" :index="$index" :meter-type="data.f_meter_type[0]" @self-valid='valida'
                          v-ref:addgasmodel> </add-gas-model-info>
    </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>
  </div>
</template>

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

  export default {
    title: '表具信息',
    components: {AddGasModelInfo},
    data () {
      return {
        addGasModelArr: [],
        imgmeter: '/images/mainicon/addmeter.png',
        modelvalid: false,

        f_gasbrand_id: ''
      }
    },

    props: ['data', 'modelvalid'],
    ready () {
      this.judgeInitValue(this.data)
    },
    watch: {
      'data' (val) {
        this.judgeInitValue(val)
      }
    },
    methods: {

      judgeInitValue (val) {
        this.f_meter_type = val.f_meter_type[0]
        console.log('观察气表型号', val)
        if (val.id) {
          this.f_gasbrand_id = val.id
          this.getUpdate()
        } else {
          this.initmodel()
        }
      },

      async getUpdate () {
        let condition = 'g.f_gasbrand_id=' + "'" + this.f_gasbrand_id + "'"
        let http = new HttpResetClass()
        this.addGasModelArr = []
        let res = await http.load('POST', 'rs/sql/getModels', {data: {condition: condition}}, {resolveMsg: null, rejectMsg: null})
        console.log('查询气表型号信息', res.data)
        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()
        }
      },

      initmodel () {
        this.addGasModelArr = [{
          cardsize: [],
          type: [],
          model_used: false,
          f_meter_style: '',
          f_coding: ''
        }]
      },

      addMeter () {
        this.addGasModelArr.push({
          cardsize: [],
          type: [],
          model_used: false,
          f_meter_style: '',
          f_gasbrand_id: this.f_gasbrand_id
        })
      },
      valida () {
        for (var i = 0; i < this.addGasModelArr.length; i++) {
          if (!this.addGasModelArr[i].valid) {
            this.modelvalid = false
            return
          }
        }
        this.modelvalid = true
      }
    },

    events: {
      'delete-meter' (index) {
        this.addGasModelArr.splice(index, 1)
        if (this.addGasModelArr.length == 0) {
          this.addMeter()
        }
      }
    }
  }
</script>
<style lang="less">
  .user-meter-padding {
    .form-group {
      > div {
        padding-right: 5px;
      }
    }
  }
</style>
