<template>
  <div id="unit" class="flex-row" :class="{'binary':showItem}">
    <div :class="{'basic-main':!showItem,'binary-left':showItem}">
      <defect-paper-new @select-changed="selected" :style="style" :style2="style2" v-ref:check></defect-paper-new>
    </div>
    <div class="binary-right" v-show="showItem">
      <div class="flex">
        <defect-list-new v-if='$refs.check && $refs.check.selected' :check='$refs.check.selected'
                     v-ref:detail></defect-list-new>
      </div>
    </div>
  </div>
</template>

<script>
import DefectPaperNew from './DefectPaperNew'

export default {
  title: '隐患查看',
  props: ['f'],
  components: {DefectPaperNew},
  data() {
    return {
      showItem: false,
      style: 'col-sm-2 form-group',
      style2: 'col-sm-4 form-group'
    }
  },
  methods: {
    selected(row) {
      this.showItem = true
    }
  },
  watch: {
    'showItem'(val) {
      //tag
      //tag
      if (val) {
        this.style = 'col-sm-3 form-group'
        this.style2 = 'col-sm-6 form-group'
      } else {
        this.style = 'col-sm-2 form-group'
        this.style2 = 'col-sm-4 form-group'
      }
    }
  }
}
</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: 5px 7px 5px 7px;
  border-radius: 10px;
}
</style>
