<template>
  <div id="unit" class="flex-row" :class="{'binary':showItem}">
<!--    <section>-->

    <div  :class="{'basic-main':!showItem,'binary-left':showItem}" >
          <select-check-plan @select-changed="selected" :style="style" :style2="style2" @checkstatus-changed="checkstatusChange" v-ref:check></select-check-plan>
        </div>
    <div  class="binary-right" v-show="showItem">
      <div class="flex">
          <check-detail v-if='$refs.check && $refs.check.selected' :check='$refs.check.selected' :checkstatus="checkstatus" :starttime="$refs.check.f_start_time" :endtime="$refs.check.f_end_time" :checkstart="$refs.check.f_check_start" :checkstart="$refs.check.f_check_start" :checkend="$refs.check.f_check_end"
                        v-ref:detail></check-detail>
        </div>
    </div>
  </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,
              style:'col-sm-2 form-group',
              style2:'col-sm-4 form-group'
            }
        },
        methods: {
          selected(row) {
            // //tag
            this.showItem = true
          },
          checkstatusChange(val){
            this.checkstatus = val
          }
        }
    }
</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>
