<script setup lang="ts">
import ReCol from "@/components/ReCol";
import { barChart, pieChart, pie3DChart } from "./components/chart";
import DeviceStatus from "./components/DeviceStatus.vue";
import Notify from "./components/Notify.vue";
import SwiperShow from "./components/SwiperShow.vue";

defineOptions({
  name: "Workbench"
});

/** 分析概览 */
// const barChartData = [
//   {
//     requireData: [2101, 5288, 4239, 4962, 6752, 5208, 7450],
//     questionData: [2216, 1148, 1255, 1788, 4821, 1973, 4379]
//   },
//   {
//     requireData: [2101, 3280, 4400, 4962, 5752, 6889, 7600],
//     questionData: [2116, 3148, 3255, 3788, 4821, 4970, 5390]
//   }
// ];
const pie3Ddata = {
  data: [
    { name: "紧急", value: 30 },
    { name: "较高", value: 10 },
    { name: "一般", value: 60 }
  ]
};
</script>

<template>
  <div class="main ml-[16px]">
    <el-row :gutter="24" justify="space-around">
      <re-col
        v-motion
        class="mb-[18px]"
        :value="24"
        :md="24"
        :sm="24"
        :xs="24"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 480
          }
        }"
      >
        <el-card class="line-card" shadow="never" :body-style="{ padding: 0 }">
          <div class="flex justify-between h-[140px]">
            <SwiperShow />
          </div>
        </el-card>
      </re-col>
      <re-col
        v-motion
        class="mb-[18px]"
        :value="16"
        :md="16"
        :sm="16"
        :xs="16"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 480
          }
        }"
      >
        <span class="inline-block mb-3 text-base">违规总量</span>
        <el-card class="line-card" shadow="always">
          <div class="flex justify-between h-[422px]">
            <barChart />
          </div>
        </el-card>
      </re-col>
      <re-col
        v-motion
        class="mb-[18px]"
        :value="8"
        :md="8"
        :sm="8"
        :xs="8"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 480
          }
        }"
      >
        <span class="inline-block mb-3 text-base">消息通知</span>
        <el-card class="line-card" shadow="always">
          <div class="flex justify-between h-[422px]">
            <Notify />
          </div>
        </el-card>
      </re-col>
      <re-col
        v-motion
        class="mb-[18px]"
        :value="8"
        :md="8"
        :sm="8"
        :xs="8"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 480
          }
        }"
      >
        <span class="inline-block mb-3 text-base">设备状态</span>
        <el-card class="line-card" shadow="always">
          <div class="flex justify-between h-[282px]"><DeviceStatus /></div>
        </el-card>
      </re-col>
      <re-col
        v-motion
        class="mb-[18px]"
        :value="8"
        :md="8"
        :sm="8"
        :xs="8"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 480
          }
        }"
      >
        <span class="inline-block mb-3 text-base">设备告警情况</span>
        <el-card class="line-card" shadow="always">
          <div class="flex justify-between h-[282px]">
            <pie3DChart :data="pie3Ddata.data" />
          </div>
        </el-card>
      </re-col>
      <re-col
        v-motion
        class="mb-[18px]"
        :value="8"
        :md="8"
        :sm="8"
        :xs="8"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 480
          }
        }"
      >
        <span class="inline-block mb-3 text-base">算力占用</span>
        <el-card class="line-card" shadow="always">
          <div class="flex justify-between h-[282px]">
            <pieChart />
          </div>
        </el-card>
      </re-col>
    </el-row>
  </div>
</template>
