<script>
import {mapState} from "vuex"

export default {
  name: "AppDvWeiyang",
  label: "未央最新定制大屏",
  props: {
    instance: Function,
    dict: Object,
    menuName: {default: '未央最新定制大屏'}
  },
  data() {
    return {
      areaId: ""
    }
  },
  computed: {
    ...mapState(["user"]),
    currentAreaId: v => v.areaId || v.user.info.areaId,
    isLastAreaLevel: v => !/0{3}$/.test(v.currentAreaId)
  },
  mounted() {

  }
}
</script>

<template>
  <section class="AppDvWeiyang" :class="{isLastAreaLevel}">
    <template v-if="isLastAreaLevel">
      <div class="a"></div>
      <div class="a1"></div>
      <div class="b"></div>
      <div class="bb grid">
        <div class="item" v-for="(e,i) in Array(4)" :key="i"></div>
      </div>
      <div class="b2"></div>
      <div class="cc grid">
        <div class="item" v-for="(e,i) in Array(3)" :key="i"></div>
      </div>
      <div class="d"></div>
      <div class="e"></div>
      <div class="f"></div>
      <div class="g"></div>
      <div class="h"></div>
      <div class="i"></div>
      <div class="j"></div>
    </template>
    <template v-else>
      <div class="a"></div>
      <div class="a1"></div>
      <div class="b"></div>
      <div class="b1"></div>
      <div class="b2"></div>
      <div class="c"></div>
      <div class="c1 grid">
        <div class="item row"></div>
        <div class="item" v-for="(e,i) in Array(4)" :key="i"></div>
      </div>
      <div class="d"></div>
      <div class="e"></div>
      <div class="f"></div>
      <div class="g"></div>
      <div class="h"></div>
      <div class="i"></div>
      <div class="j"></div>
    </template>
  </section>
</template>
<style lang="scss">
.AiDvWrapper {
  .viewPanel {
    background-image: url("https://cdn.sinoecare.com/i/2024/09/03/66d6a644bcc6e.png");
  }
}
</style>
<style scoped lang="scss">
.AppDvWeiyang {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(8, 1fr);
  padding: 16px 0;
  grid-auto-rows: 128px;
  grid-template-areas:
  "a a1 b b1 b2 b2 c c1"
  "e e f f f f c c1"
  "e e f f f f g g"
  "e e f f f f g g"
  "e e f f f f g g"
  "h h i i j j g g"
  "h h i i j j g g";

  &.isLastAreaLevel {
    grid-template-areas:
    "a a1 b bb b2 b2 cc cc"
    "e e f f f f g g"
    "e e f f f f g g"
    "j j f f f f g g"
    "j j f f f f g g"
    "h h i i i i g g"
    "h h i i i i g g";

    .bb {
      gap: 10px;
      grid-template-columns: repeat(2, 1fr);
    }

    .cc {
      grid-area: cc;
      gap: 10px;
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .item {
    background: #7583900f;
    backdrop-filter: blur(8px);
  }

  @each $area in (a, a1, b, b1, b2, c, c1, c2, d, e, f, g, h, i, j) {
    .#{$area} {
      grid-area: $area;
      @if not index((c1),$area) {
        @extend .item;
      }
    }
  }

  .c1 {
    gap: 10px;
    grid-template-columns: repeat(2, 1fr);

    .row {
      grid-column: 1/3
    }
  }
}
</style>
