<script setup>
import echartBarHoriz from "./portlet/echart-barHoriz.vue"
import echartLine from "./portlet/echart-line.vue"
import echartBarHorizScroll from "./portlet/echart-barHorizScroll.vue"
import echartGaugeTriple from "./portlet/echart-gaugeTriple.vue"
import echartSunburst from "./portlet/echart-sunburst.vue"
import counterGrid from "./portlet/counter-grid.vue"
import echartMap from "./portlet/echart-map.vue"
import mainNav from "@/common/mainNav.vue"
import externalLinks from "@/common/externalLinks.vue"


const comps = {
  echartBarHoriz,
  echartLine,
  echartBarHorizScroll,
  echartGaugeTriple,
  echartSunburst,
  echartMap,
  counterGrid,
}
const state = reactive({
  systemTitleConfig: {
    width: 1000
  },
  panelTitleConfig: {
    width: 160,
  },
  dialogConfig: {
    show: false,
    width: '60%',
    height: '60%',
    title: "对话框标题",
    titleWidth: 350,
  },
  // panelTitleConfig:{
  //   width:180,
  //   theme:true
  // },

  areas: [
    {
      name: "left", portlets: [
        { id: "l2", title: "收支情况", component: "echartBarHoriz", border: "aYinTechBorderA1", hideTitle: true },
        { id: "l3", title: "业务收益情况", component: "echartLine", border: "aYinTechBorderA1", hideTitle: true },
        { id: "l1", title: "销售任务", component: "echartBarHorizScroll", border: "aYinTechBorderA1", hideTitle: true },
      ]
    },
    {
      name: "right", portlets: [
        { id: "r1", title: "销售情况", component: "counterGrid", border: "blank", hideTitle: true },
        { id: "r2", title: "任务完成情况", component: "echartGaugeTriple", border: "aYinTechBorderA1", hideTitle: true },
        { id: "r3", title: "业务利润占比", component: "echartSunburst", border: "aYinTechBorderA1" },
      ]
    },

  ]

})


const { systemTitleConfig, panelTitleConfig, areas } = toRefs(state)


const getConfig = (item) => {
  const { id } = item
  if (id == 'r3') {
    return {
      directionAlt: true,
      rotate: "z",
      opacity: 0.7
    }
  } else if (id.includes("l")) {
    return {
      title: item.title,
      titleWidth: 120,
      decoration: false,
      decorationAlt: true,
      rotate: "y",
      opacity: 0.7
    }
  } else {
    return {
      title: item.title,
      titleWidth: 120,
      decoration: false,
      opacity: .7
    }
  }
}

onMounted(() => {
})


</script>
<template>
  <div class="screen1080A">
    <mainNav></mainNav>
    <externalLinks></externalLinks>
    <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">
        <component v-if="item.border" :is='item.border' :config="getConfig(item)">
          <panelTitleA1 v-if="!item.hideTitle" :config="panelTitleConfig">{{ item.title }}</panelTitleA1>
          <component :is='comps[item.component]'></component>
        </component>
        <template v-else>
          <component :is='item.component'></component>
          <i>{{ item.component }}</i>
        </template>
      </div>
    </div>
    <systemTitleA2 :config="systemTitleConfig">TechUI数据可视化成型工具</systemTitleA2>
    <echartMap></echartMap>
  </div>
</template>
<style lang="less">
.screen1080A {
  z-index: 1;
  padding: 60px 30px 30px 30px;
  height: 100%; //url(../common/images/bg.png) 

  .techButtonA2 {
    z-index: 10;
    .poa;
    bottom: 20px;
    left: 50%;
    .fixc("x");
  }

  .i() {
    .poa;
    bottom: 0;
    right: 10px;
    font-size: 12px;
    opacity: .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;

    .board-3d-wrap {
      .poa;
      .fullbox;

    }

    //<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;
    }

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

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

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

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

  .content-tabs {
    .poa;
    top: -40px;
    left: 80px;
    right: 80px;
    text-align: center;
    height: 40px;

    &:before {
      content: " ";
      .bdb(var(--button-bd_hov));
      left: 0;
      right: 0;
      bottom: 10px;
      .poa;
      z-index: 1;
    }

    .tabs-item {
      display: inline-block;
      padding: 0 10px;
      .ff("cn1");
      .fc(var(--font-normal));
      height: 30px;
      line-height: 30px;
      cursor: pointer;
      .ani;
      z-index: 2;
      .por;

      &:before {
        content: " ";
        .bgc(var(--button-bd_hov));
        .poa;
        .fullbox;
        opacity: 0;
      }

      &:hover {
        &:before {
          opacity: .3;
        }
      }

      &.active {
        .bdb(var(--font-strong));
        .fc(var(--font-strong));
      }
    }
  }
}</style>