<template>
  <div class="auto">
    <div class="" v-for="row in meterinfo">
      <div style="margin-bottom: 2%; margin-top: 2%">
        <img style="margin-top: -5px" src="../../../../static/images/lefticon/矩形1183.png">
        <a style="font-size: 20px;font-weight: 500;">表具{{$index+1}}信息</a>&nbsp;<a style="color: #999999;text-decoration: none"></a>
        <button class="button_search" style="width: max-content" @click="deleteMeter($index, row)" v-if="!row.f_table_state ">删除表具
        </button>
        <button class="button_search" style="width: max-content" @click="showDevices($index, row)">设备信息</button>
      </div>
      <file-meter-info-new :meter="row" :f_filialeid="f_filialeid" :usertype="usertype" :gasproperties="gasproperties" @self-valid='valida'
                  @delete-meter="deleteMeter($index)" :f_userinfo_id="f_userinfo_id"></file-meter-info-new>

    </div>
    <div class="panel panel-default auto text-center" @click="addMeter()" style="cursor: pointer;">
      <span class="glyphicon glyphicon-plus"></span>
      <!--<img :src="imgmeter" alt="图片加载失败" class="img-rounded" style="width: 50px;margin:10px;">-->
    </div>
    <file-user-device-info-new :devicesinfo.sync="devicesinfo" :show_devices.sync="show_devices"
                           :userinfoid='data.baseinfo.base.f_userinfo_id'></file-user-device-info-new>
  </div>
</template>

<script>
  import UserDeviceInfoTest from './UserDeviceInfoTest'
export default {
    components: {UserDeviceInfoTest},
    title: '表具信息',
    data () {
      return {
        pricenames: [],
        devicesinfo: [],
        show_devices: false,
        imgdelete: '/images/mainicon/deletedevice.png',
        imgsrc: '/images/mainicon/biaopan.png',
        imgmeter: '/images/mainicon/addmeter.png'
      }
    },
    // props: ['meterinfo', 'usertype', 'gasproperties', 'metervalid'],

    props: {
      meterinfo: {},
      usertype: {},
      gasproperties: {},
      metervalid: {
        twoWay: true
      },
      f_filialeid: {},
      f_userinfo_id: {}
    },
    ready () {
      console.log('表具信息，，，，', this.meterinfo)
    },
    methods: {
      isNull (value) {
        return value && value.length > 0
      },
      addMeter () {
        this.meterinfo.push({
          // 表号
          f_meternumber: '',
          f_metertitles: '',
          f_area_code: '',
          // 气表品牌
          gasbrand: '',
          // 气表型号
          gasmodel: '',
          // 气表类型
          gasmodeltype: '',
          pricetype: '', // 气价类型
          pricename: '', // 气价名称
          f_user_type: '', // 用户类型
          f_gasproperties: '', // 用气性质
          f_inputtor: '',
          // 安装位置
          f_position: '',
          // 左右表
          f_aroundmeter: '',
          f_garbage_fee: '',
          f_meter_base: '',
          f_industry_comments: '',
          // 安装人
          f_instaler_person: '',
          // 通气人
          f_gas_person: '',
          f_adjustable: '', // 调压箱
          devicesinfo: []
        })
      },

      showDevices (index, row) {
        this.devicesinfo = []
        this.show_devices = true
        this.devicesinfo = row.devicesinfo
        console.log('查看设备信息', this.devicesinfo)
      },
      // 清楚表具信息

      clearMeter () {
        this.meterinfo = []
      },
      deleteMeter (index) {
        this.meterinfo.splice(index, 1)
        this.valida()
      },
      valida () {
        for (var i = 0; i < this.meterinfo.length; i++) {
          console.log('表具信息验证', this.meterinfo, this.meterinfo[i].valid)
          if (!this.meterinfo[i].valid) {
            this.metervalid = false
            return
          }
        }
        this.metervalid = true
      }
    }
  }
</script>
<style lang="less">
  .user-meter-padding {
    .form-group {
      > div {
        padding-right: 5px;
      }
    }
  }
</style>
