<template>
  <!--安检综合查询主界面-->
  <div id="unit" class="flex-row" v-show="!itemShow">
    <!--展示查询界面-->
    <plan-list class="flex datapanel" style="width:100%;" @select-changed="selected" @additem="additem"></plan-list>
    <div style="width: 50%;" class="flex datapanel" v-if="showItem">
      <div style="height:100%;overflow: auto;">
        <plan-uers-list style="height: 100%;" :item="rowData"  v-ref:uerslist></plan-uers-list>
      </div>
    </div>
  </div>
  <div v-if="itemShow">
    <create-plan-area :checkplan="checkplan" :additemshow="true" @finish="finish"></create-plan-area>
  </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
      },
      show () {
        this.showItem = this.showItem ? false : true
      },
      finish(){
        this.itemShow = false
        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>
