<template>
  <!--安检综合查询主界面-->
  <div v-show="!itemShow" class="flex-row">
    <div id="unit" class="row" :class="{'basic-main':!showItem,'binary':showItem}" >

      <!--展示查询界面-->
      <plan-list :class="{'binary-left':showItem}"  @select-changed="selected" @additem="additem" v-ref:planlist></plan-list>
      <plan-uers-list   :class="{'binary-right':showItem}" v-if="showItem" :item="rowData"  v-ref:uerslist></plan-uers-list>
    </div>
  </div>

  <div v-if="itemShow">
    <create-plan :checkplan="checkplan" :additemshow="true" @finish="finish"></create-plan>
  </div>
</template>

<script>
  import PlanList from './PlanList'
  import PlanUersList from './PlanUersList'

  export default {
    title: '计划下发',
    components: { PlanList, PlanUersList },
    data () {
      return {
        showItem:false,
        rowData:{},
        itemShow:false,
        checkplan:{}
      }
    },
    methods: {
      additem(row){
        this.checkplan = row
        this.itemShow = true
          console.log(this.itemShow,'a')
      },
      show () {
        this.showItem = this.showItem ? false : true
      },
      finish(){
        this.itemShow = false
        this.$refs.planlist.$refs.paged.$refs.criteria.search()
        this.$refs.uerslist.search()
      },
      selected (row) {
        this.showItem = true
        this.rowData = row.val
      }
    }
  }

</script>
<style>
  .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>
