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

<script>
  import DefectPaper from './DefectPaper'
  import DefectDetail from './DefectDetail'

  export default {
    title: '隐患查看',
    props: ['f'],
    components: {DefectPaper, DefectDetail},
    data() {
      return {
        showItem: false
      }
    },
    methods: {
      selected(row) {
        this.showItem = true
      }
    },
    watch:{

    }
  }
</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>
