<template>
  <div class="home">
    <el-container style="height: 100vh;">
      <el-main>
        <el-row :gutter="20">
          <!-- 右侧展示区域 -->
          <el-col :span="18" class="content-area">
            <announcements />
            <financial-charts />
          </el-col>

          <!-- 左侧功能区域 -->
          <el-col :span="6" class="sidebar">
            <quick-access />
            <inventory />
            <project-management />
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { getCache } from "@/api/monitor/cache";
import { getFinishedCount, getOwnCount, getTodoListCount } from "@/api/oa/homeCount";
import { getNotice, listNoticeLimit } from "@/api/system/notice";
import QuickAccess from "../components/QuickAccess/index.vue";
import Inventory from "../components/Inventory/index.vue";
import Announcements from "../components/Announcements/index.vue";
import ProjectManagement from "../components/ProjectManagement/index.vue";
import FinancialCharts from "../components/FinancialCharts/index.vue";

export default {
  name: "Index",
  components: {
    FinancialCharts,
    ProjectManagement,
    Announcements,
    Inventory,
    QuickAccess,
  },
  data() {
    return {
      version: "0.8.3",
      commandstats: null,
      usedmemory: null,
      cache: [],
      finishedCount: 0,
      todoListCount: 0,
      ownCount: 0,
      noticeList: [],
      noticeTitle: '',
      noticeContent: '',
      drawer: false,
    };
  },
  created() {
    this.getList();
    this.getListNotice();
  },
  methods: {
    getList() {
      getCache().then((response) => {
        this.cache = response.data;
        this.$modal.closeLoading();
      });
    },
    getListNotice() {
      this.loading = true;
      listNoticeLimit().then((response) => {
        this.noticeList = response;
        this.loading = false;
      });
    },
    toDrawer(nid) {
      this.drawer = true;
      getNotice(nid).then((res) => {
        this.noticeTitle = res.data.noticeTitle;
        this.noticeContent = res.data.noticeContent;
      });
    },
    goTarget(href) {
      this.$router.push({path: href});
    },
  },
};
</script>

<style scoped lang="scss">

/* 栅格列样式 */
.content-area {
  background: #fff;
}

/* 左侧功能区域 */
.sidebar {
  background: #f9f9f9;
}

/* 响应式隐藏侧边栏 */
@media screen and (max-width: 768px) {
  .sidebar {
    display: none;
  }

  .content-area {
    width: 100% !important;
  }
}
</style>
