<template>
  <div id="unit" class="flex-row">
    <regional-list class="binary-left" v-ref:list :row="row"   :style="style"
                     style="width:50%;overflow-x: scroll;"></regional-list>
    <div class="binary-right" style="overflow-y: auto;" v-if="isdetail" :style="{width: isdetail?'50%':'auto'}">
      <regional-add style="height: 40%; margin-bottom: 30px;"  :data="row" v-ref:gas></regional-add>
      <div  v-show="row" class="auto">
        <ul class="nav nav-tabs" >
          <li class="active"><a href="#">区域变更记录</a></li>
        </ul>
        <regional-list-record v-ref:update :data="row"></regional-list-record>
      </div>
    </div>
    <div class="binary-right" style="overflow-y: auto;" v-if="isdetailshow" :style="{width: isdetailshow?'50%':'auto'}">
      <regional-show style="height: 40%; margin-bottom: 30px;"  :data="row" v-ref:gas2></regional-show>
      <div  v-show="row" class="auto">
        <ul class="nav nav-tabs" >
          <li class="active"><a href="#">区域变更记录</a></li>
        </ul>
        <regional-list-record v-ref:update :data="row"></regional-list-record>
      </div>
    </div>

  </div>
</template>
<script>
  export default {
    title: '区域状态管理',
    data () {
      return {
        style: 'col-sm-2 form-group',
        row: null,
        blodid: '',
        parentData: '',
        isdetail: false,
        isdetailshow: false,
        listshow: false
      }
    },
    methods: {
    },
    ready () {
    },
    events: {
      'success' (name, row, res) {
        // this.style='col-sm-2'
        this.row = null
        this.blodid = ''
        this.isdetail = false
        this.listshow = false
        this.isdetailshow = false
        this.$refs.list.hiddenflag = false;
        this.$refs.list.search()
      },
      'error' (name, row, res) {
        this.row = null
        this.blodid = ''
        this.isdetail = false
        this.listshow = false
        this.isdetailshow = false
        this.$refs.list.hiddenflag = false;
        this.$refs.list.search()
      },
      'close' (res) {
        this.style = 'col-sm-2 form-group'
        this.row = null
        this.blodid = ''
        this.isdetail = false
        this.listshow = false
        this.isdetailshow = false
        this.$refs.list.hiddenflag = false;
      },
      'search' () {
        this.style = 'col-sm-2 form-group'
        this.row = null
        this.blodid = ''
        this.isdetail = false
        this.listshow = false
        this.isdetailshow = false
        this.$refs.list.hiddenflag = false;
        // this.$refs.list.search()
      },
      'add' () {
        this.style = 'col-sm-3 form-group'
        this.isdetail = true
        this.isdetailshow = false
        this.listshow = true
        this.blodid = ''
        this.$refs.list.$refs.paged.$refs.grid.selectStore.selected = null
        this.row = null
      },
      'selectchange'(val){
        if (val) {
          this.style = 'col-sm-3 form-group'
          this.row = val
          this.isdetail = true
          this.isdetailshow = false
          this.listshow = true
        }
      },
      'selectshow'(val){
        if (val) {
          this.style = 'col-sm-3 form-group'
          this.row = val
          this.isdetailshow = true
          this.isdetail = false
          this.listshow = true
        }
      }
    }
  }
</script>
<style>
  .datapanel {
    color: #333;
    background-color: white;
    box-shadow: darkgrey 0.5px 0.5px 0.5px 0.5px ;
    padding: 10px 10px 5px 10px;
    border-radius:10px;
  }
</style>
