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

<script>
    import SelectCheckPlan from './SelectCheckPlan'
    import CheckDetail from './CheckDetail'

    export default {
        title: '安检员考核',
        props: ['f'],
        components: {SelectCheckPlan, CheckDetail},
        data() {
            return {
                showItem: false,
                checkstatus: null
            }
        },
        methods: {
          selected(row) {
            // console.log('as')
            this.showItem = true
          },
          checkstatusChange(val){
            this.checkstatus = val
          }
        },
        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>
