<!--
 * @Author: wuhao930406 1148547900@qq.com
 * @Date: 2023-08-16 11:24:18
 * @LastEditors: wuhao930406 1148547900@qq.com
 * @LastEditTime: 2023-08-17 17:01:37
 * @FilePath: /vue3portal/src/viewsCN/dashboardC/layout.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<script setup>
import echartBarHorizScroll from "./portlet/echart-barHorizScroll.vue";
import echartPie from "./portlet/echart-pie.vue";
import echartGaugeTriple from "./portlet/echart-gaugeTriple.vue";
import echartMap from "./portlet/echart-map.vue";
import echartSunburst from "./portlet/echart-sunburst.vue";
import echartHill from "./portlet/echarts-hill-group/echart-hill.vue";
import echartBar from "./portlet/echart-bar.vue";
import echartLine from "./portlet/echart-line.vue";
import counterGrid from "./portlet/counter-grid.vue";
import echartBarHoriz from "./portlet/echart-barHoriz.vue";

const comps = {
  echartMap,
  echartGaugeTriple,
  echartPie,
  echartBarHorizScroll,
  echartSunburst,
  echartHill,
  echartBar,
  echartBarHoriz,
  echartLine,
  counterGrid,
};

const state = reactive({
  systemTitleConfig: {
    ani: true,
    width: 800,
    dur: 6,
    gradientReverse: true,
    decoration: true,
    decorationColorAlt: true,
    gradientBG: true,
  },

  panelTitleConfig: {
    scale: 1.1,
  },

  tabActive: 0,

  configBLeft: {
    rotate: {
      y: 8,
    },
    transformOrigin: "right",
    view3d: true,
    showShadow: false,
    hoverDelay: 0,
  },
  configBCenter: {
    rotate: {
      x: 30,
    },
    transformOrigin: "bottom",
    view3d: true,
    showShadow: false,
    hoverDelay: 0,
  },
  configBRight: {
    rotate: {
      y: -8,
    },
    transformOrigin: "left",
    view3d: true,
    showShadow: false,
    hoverDelay: 0,
  },
  areas: [
    {
      name: "left",
      portlets: [
        {
          id: "r1",
          title: "注册用户年度分布(人)",
          component: "echartBar",
          border: "blank",
        },
        {
          id: "r2",
          title: "年度访问量(次)",
          component: "echartGaugeTriple",
          border: "blank",
        },
        {
          id: "r3",
          title: "学校使用排名",
          component: "echartSunburst",
          border: "blank",
        },
      ],
    },
    {
      name: "right",
      portlets: [
        {
          id: "l2",
          title: "最热实训榜",
          component: "echartPie",
          border: "blank",
        },
        {
          id: "l3",
          title: "活跃学生榜",
          component: "echartHill",
          border: "blank",
        },
        {
          id: "l1",
          title: "活跃教师榜",
          component: "echartBarHorizScroll",
          border: "blank",
        },
      ],
    },
  ],
});

const { systemTitleConfig, panelTitleConfig, areas } = toRefs(state);
const config = {
  backgroundColor: $c.bll9,
  decorationColor: [$c.bll3, $c.cyl5],
  borderColor: $c.bll7,
}
</script>
<template>
  <div class="screen1080C">
    <div :class="`area-box area-${area.name}`" v-for="area in   areas  " :key="area.id">
      <div class="portlet-wrapper" v-for="item in   area.portlets  " :key="item.id">
        <aYinTechBorderA1 :config="{
          ...config,
          title: item.title,
          //decorationAlt:area?.name === 'right' ?true:false,
          rotate: area?.name === 'right' ? '' : 'y'
        }">
          <component :is="comps[item.component]"></component>
        </aYinTechBorderA1>
      </div>
    </div>
    <systemTitleA1 :config="systemTitleConfig">教学资源库运行监测云图</systemTitleA1>
    <echartMap></echartMap>
  </div>
</template>
<style lang="less">
.screen1080C {
  z-index: 1;
  padding: 60px 30px 30px 30px;
  height: 100%;

  .i() {
    .poa;
    bottom: 0;
    right: 10px;
    font-size: 12px;
    opacity: 0.1;
    .fc(@wh);
    z-index: 10;
  }

  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-template-rows: repeat(24, 1fr);
  grid-gap: 30px;

  .area-box {
    .bdr(5px);
    pointer-events: visible;
    position: relative;
    z-index: 10;
    padding: 0;
    .bdFilter(5px, 120%);
    .bdr(10px);

    &:before {
      content: " ";
      .poa;
      .fullbox;
      .bdFilter(10px, 300%);
      .bdr(10px);
      opacity: 0.8;
    }

    //
    //<row-start> / <column-start> / <row-end> / <column-end>;
    .blank,
    .portlet-wrapper {
      .por;

      >i {
        .i;
      }
    }

    .border-content {
      >i {
        .i;
      }
    }

    &.area-left {
      grid-area: 1 / 1 / 25 / 7;

      .portlet-wrapper {
        &:nth-child(3) {
          grid-area: 3 / 1 /5/ 2;
        }
      }
    }

    &.area-right {
      grid-area: 1 / 19 / 25 / 25;
    }

    &.area-center {
      grid-area: 19 / 7 / 25 / 19;
    }

    &.area-right {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows: repeat(3, 1fr);
      grid-gap: 20px;
    }

    &.area-left {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows: repeat(4, 1fr);
      grid-gap: 20px;
    }

    &.area-center {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(1, 1fr);
      grid-gap: 20px;

      .portlet-wrapper {
        margin-top: -8px;
      }
    }
  }

  .panelTitleB1 {
    left: 0;
    top: 0;
  }

  // .systemTitle-01{left:40px; transform: none;}
}
</style>
