<template>
  <div id="unit" class="flex-row">
    <div :class="{'basic-main': !iseditmetetinfo,'binary-left': iseditmetetinfo}" :style="{width:iseditmetetinfo ? '50%' : '100%'}">
      <web-meter-list style="width:auto;" :styles="iseditmetetinfo?'form-group col-sm-3':'form-group col-sm-2'" :showfields="iseditmetetinfo?false:true" v-ref:list  @dblclick="showeditinfo"></web-meter-list>
    </div>
    <div class="binary-right" style="width:50%" v-if="iseditmetetinfo" >
      <edit-meter-info :oldmeter="row" v-if="ismeterinfo" :f_filialeid="f_filialeid" @close="closeedit" style="overflow-y: auto;"></edit-meter-info>

      <use-web-meter :meterinfos="meterinfos"  v-if="isUseMeter" @close="closeedit" style="overflow-y: auto;"></use-web-meter>
      <!--<ul class="nav nav-tabs">-->
      <!--<li class="active"><a>操作历史</a></li>-->
      <!--</ul>-->
      <!--<meter-history :id="row.id" @close="closeedit" style="height:30%"></meter-history>-->
    </div>
  </div>
</template>
<script>
import { PagedList } from 'vue-client'
import * as WebmeterUtil from '../../components/WebmeterUtil'
import * as webMeterList from './WebMeterList'
import * as meterHistory from './MeterHistory'
import Vue from 'vue'

export default {
  components: {webMeterList, meterHistory},
  title: '表计信息',
  data () {
    return {
      model: new PagedList('rs/sql/singleTable_OrderBy', 20, {items: '"*"', tablename: '"t_meterinfo"', orderitem: '"id"'}),
      f_filialeid: '',
      iseditmetetinfo: false,
      row: {},
      criteriaShow: false,
      show: false,
      isUseMeter: false,
      meterinfos: [],
      ismeterinfo: false
    }
  },
  ready () {

  },
  methods: {
    showeditinfo (obj) {
      console.log('====================obj')
      if (obj) {
        this.row = obj
        this.iseditmetetinfo = true
        this.ismeterinfo = true
        this.isUseMeter = false
      }
    },
    hidden () {
      this.criteriaShow = !this.criteriaShow
    },
    clearmsg () {
      this.$refs.paged.$refs.criteria.model = {}
    },
    closeedit () {
      this.iseditmetetinfo = false
      this.isUseMeter = false
      this.ismeterinfo = false
      this.$refs.list.search()
    }
  }
}
</script>
<style>
.form-input-group label {
  text-align: right;
  width: auto;
}
.datapanel {
  color: #333;
  background-color: white;
  box-shadow: darkgrey 0.5px 0.5px 0.5px 0.5px ;
  padding: 10px 30px 10px 30px;
  border-radius:15px;
}
</style>
