<template>
  <div id="unit" class="flex-row"  v-if="listpage">
    <div :class="{'basic-main':!(!isEmpty(val) || isChange),'binary-left':!isEmpty(val) || isChange}"
         :style="{width: (!isEmpty(val) || isChange || usershow) ?'50%':'100%'}">
      <gas-brand-list :visiable="visiable" v-ref:list :row="row" @select-changed="selected" :f_filialeid.sync="f_filialeid"></gas-brand-list>
    </div>
    <div class="binary-right" v-el:gasbrand style="margin-left: 10px;overflow-y: auto" v-if="!isEmpty(val) || isChange" :style="{width: (!isEmpty(val) || isChange) ? '50%' : 'auto'}">
      <span v-show='row'>
        <ul v-if="showParameValue" class="nav nav-tabs">
          <li role="presentation" class="active"><a href="#">气表型号参数</a></li>
        </ul>
        <div v-if="showParameValue" style="height:150px; overflow: auto;">
          <parames :id="row.id" :type="0"></parames>
        </div>
     </span>
      <add-gas-brand v-if="isChange" :data="gasmodel" :f_filialeid.sync="f_filialeid" v-on:toggle="getChange"></add-gas-brand>
    </div>

    <div class="binary-right" v-if="usershow" :style="{width: usershow ? '50%' : 'auto'}">
      <gas-brand-user :brandid="brand_id" :meterbrand="meter_brand" :orgcondition="f_orgid"></gas-brand-user>
    </div>

  </div>
  <div v-if="!listpage">
    <user-info-detail-manage-new :f_userinfo_id="f_userinfo_id" @cancel-main="cancel"></user-info-detail-manage-new>
  </div>
</template>
<script>
  import GasBrandUser from './GasBrandUser'

  export default {
    components: {GasBrandUser},
    title: '气表管理',
    data () {
      return {
        f_userinfo_id: '',
        f_orgid: '',
        meter_brand: '',
        brand_id: '',
        usershow: false,
        listpage: true,
        f_filialeid: this.$login.f.orgid,
        isChange: false,
        row: null,
        gasmodel: null,
        showParameValue: false,
        parame: undefined,
        dataType: 0,
        visiable: true
      }
    },
    methods: {
      cancel (obj) {
        this.listpage = true
      },
      selected (obj) {
        this.visiable = false
        this.showParameValue = false
        this.usershow = false
        this.row = obj.val
        this.gasmodel = obj.val
        this.isChange = true
        this.listpage = true
      },
      getChange () {
        this.isChange = true
        this.usershow = false
        this.listpage = true
      },
      isEmpty (value) {
        for (let id in value) {
          return false
        }
        return true
      },
      showParame () {
        this.showParameValue = !this.showParameValue
      }
    },
    events: {
      'search' () {
        this.isChange = false
        this.usershow = false
        this.listpage = true
        this.row = null
        this.gasmodel = {}
        this.$refs.list.$refs.paged.$refs.cri.search()
      },
      'success' (name, row, res) {
        this.isChange = false
        this.listpage = true
        this.usershow = false
        this.row = null
        this.gasmodel = {}
        this.$refs.list.search()
      },
      'error' (name, row, res) {
        this.listpage = true
        this.isChange = false
        this.usershow = false
        this.row = null
        this.gasmodel = {}
      },
      'close' () {
        this.listpage = true
        this.isChange = false
        this.usershow = false
        this.row = null
        this.gasmodel = {}
        this.visiable = true
        this.$refs.list.search()
      },
      'add' () {
        this.listpage = true
        this.usershow = false
        this.isChange = true
        this.row = null
        this.$refs.list.$refs.paged.$refs.grid.selectStore.selected = null
        this.gasmodel = null
      }
    }
  }
</script>
<style>

</style>
