<template>
  <div class="homePage">
      <div class="container">
          <!-- 上侧数据模块列表 -->
          <div class="topModuleBox">
              <div style="width: 78%;margin: 0 1%;height: 100%;">
                  <TopOne @getHomeData="getHomeData" @openDialog="handleDialog"></TopOne>
              </div>
              
              <div style="width: 20%;margin: 0 1%;height: 100%;">
                <TopTwo :pageData="pageData.monthAbnormalBean" @openDialog="handleDialog"></TopTwo>
              </div>
          </div> 
          <!-- 下侧数据模块列表 -->
          <div class="bottomModuleBox">
              <div style="width: 48%;margin: 0 1%;height: 100%;">
                <BottomOne :orgNumBean="pageData.orgNumBean"></BottomOne>
              </div>
              <div style="width: 48%;margin: 0 1%;height: 100%;">
                <BottomTwo></BottomTwo>
              </div>
          </div>
      </div>
      <!-- 弹窗统一控制组件 -->
      <!-- <common-dialog ref="dialogRef"></common-dialog> -->
  </div>
</template>

<script>
 
import TopOne from './dashboard/topOne.vue';
import TopTwo from './dashboard/topTwo.vue';
import BottomOne from './dashboard/bottomOne.vue';
import BottomTwo from './dashboard/bottomTwo.vue';
// import CommonDialog from '../../components/home/commonDialog.vue' 
import { getHomePageData } from '@/api/dashboard'
export default {
  components: {
    TopOne,
    TopTwo,
    BottomOne,
    BottomTwo
      // CommonDialog,
  },
  name: 'Home',
  data() {
      return {
        pageData:{}
      }
  },
  created() {
 
  },

  mounted() { 
    // setTimeout(()=>{
    //   this.getHomePageData()
    // },2000)
  },
  computed: {
 
  },
  methods: {
    getHomeData(data){
      this.pageData = data;
      console.log(this.pageData,11111111111111111111)
      this.$set(this,"pageData",data)
    },
    handleDialog(val) {
        this.$refs.dialogRef.setOpen({
            open: true,
            param: val,
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.homePage {
  width: 100%;
  height: auto;
  // background: url(../../assets/img/bgd.png) no-repeat center;
  // background-size: 100% 100%;
  background: #F8F8F8;
  color: #000;
  position: relative;
 
  .container {
      width: 100%;
      height: auto;
      // min-height: 100%;
      background: #F8F8F8;

      .topModuleBox {
          width: 100%;
          height: 320px;
          display: flex;
      }
      .bottomModuleBox {
          width: 100%;
          height: 450px;
          margin: 20px 0;
          display: flex;
      }
 
  }
}
</style>
