<template>
    <div>
      <div class='fixed-header'>
        <oabar />
      </div>
      <div class="dashboard-container">
       <div v-if="status" class="apply-box">
        <el-card class="box-card" style="min-height: 800px;border-radius: 10px">
          
          <el-button type="primary" icon="el-icon-search" @click="openPS" size="mini" >打开选人组件</el-button>
          <PeopleSelect ref="peopleSelect" :type="type" :isCheck="true" :open="peopleOpen" @cancel="peopleOpen=false"   @submit="submitPeople"></PeopleSelect>
        </el-card>
       
       </div>
       <div v-else class="data-list-box">
        <el-card class="box-card" style="min-height: 800px;border-radius: 10px">
            查看数据
        </el-card>
        
       </div>
  
      </div>
     
    </div>
  </template>
  
  <script>
  import { getUnreadNotifyMessageList } from "@/api/system/notify/message";
  import Oabar from '../../layout/components/Oabar.vue'
  import PeopleSelect from "@/components/PeopleSelect/index.vue";
  
  export default {
    name: 'Index',
    components: {
        Oabar,
        PeopleSelect,
    },
    data() {
      return {
        status:true,
        
        type: 'single',
        //是否打开选人组件，默认不打开
        peopleOpen:false,
      }
    },
  
    created() {
  
    },
    methods: {
      //打开选人弹窗
      openPS(){
        this.peopleOpen=true;
       },
      //选择人的确定按钮事件 submitPeople(nikeNamelist)方法传参一个默认接收用户昵称数组   submitPeople(peopleList,nikeNamelist)方法传参两个则是接收用户昵称数组和用户账号数组
      submitPeople(peopleList){
      console.log(peopleList);
        this.peopleOpen=false;
      },
        setStatus(status){
            this.status = status
        },
    }
  }
  </script>
  <style>
  .fixed-header {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9;
    width: 100%;
    transition: width 0.28s;
  }
  
  .dashboard-container {
    background: #f5f6f8;
    bottom: 0;
    left: 0;
    overflow: auto;
    position: absolute;
    right: 0;
    top: 60px;
    padding: 32px;
    .apply-box{
        width: 80%;
        margin: 0 auto;
    }
    .data-list-box{
        width: 100%;
        margin: 0 auto;
    }
  }
  
  
  
  </style>
  