<template>
  <div id="unit" class="flex-row">
    <div :class="{'basic-main':!showDetail,'binary-left':showDetail}">
      <manage-company-gas-summary v-ref:gas
                                  @select-changed="selected"
                                  :style="style">
      </manage-company-gas-summary>
    </div>
    <div v-if="showDetail" class="binary-right">
      <div class="flex">
        <manage-company-gas-detail v-if="showDetail" :data="row">
        </manage-company-gas-detail>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  title: '单位用气售气汇总',
  components: {},
  data () {
    return {
      row: {},
      showDetail: false,
      companyId: null,
      style: 'col-sm-2 form-group'
    }
  },
  methods: {
    selected (obj) {
      console.log('看看选中的数据', obj)
      if (obj && obj.val) {
        this.style = 'col-sm-3 form-group'
        this.showDetail = true
        this.row = obj.val
        this.row.startDate = this.$refs.gas.$refs.paged.$refs.cri.model.startDate
        this.row.endDate = this.$refs.gas.$refs.paged.$refs.cri.model.endDate
        this.row.f_user_type = this.$refs.gas.$refs.paged.$refs.cri.model.f_user_type
        this.row.f_user_usetype = this.$refs.gas.$refs.paged.$refs.cri.model.f_user_usetype
        this.row.f_user_usenature = this.$refs.gas.$refs.paged.$refs.cri.model.f_user_usenature
        this.row.f_use_institution = this.$refs.gas.$refs.paged.$refs.cri.model.f_use_institution
      }
    },
    refresh () {
    }
  },
  events: {
    'cancel' () {
      this.style = 'col-sm-2 form-group'
      this.row = null
      this.$refs.gas.$refs.paged.$refs.grid.cleanSelected()
      this.showDetail = false
    }
  }
}
</script>
<style>
</style>
