<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="16">
        <Systems />
        <el-row :gutter="20">
          <el-col :span="20">
            <ScreenEntry />
          </el-col>
          <el-col
            v-if="userStore.user.canSetIP || userStore.user.canSetPermission"
            :span="4"
          >
            <Set />
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="8">
        <Task />
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <Message />
      </el-col>
      <el-col :span="8">
        <Message />
      </el-col>
      <el-col :span="8">
        <Message />
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import Systems from "@/views/systems/systems.vue";
import ScreenEntry from "@/views/main/screenEntry.vue";
import Set from "@/views/main/set.vue";
import Task from "@/views/main/task.vue";
import Message from "@/views/main/message.vue";
import { useUserStore } from "@/store";

const userStore = useUserStore();
const router = useRouter();
const gotoZHDP = () => {
  router.push({ name: "totalScreen" });
};
</script>

<style lang="scss" scoped></style>
