<template>
  <div class="datavScr box">
    <div v-if="powers.some((i) => i == '001')">
      <div class="dataBox">
        <div class="top">
          <div style="width: 35%">
            <topLeft></topLeft>
          </div>
          <div style="width: 20%">
            <topCenter></topCenter>
          </div>
          <div style="width: 35%">
            <div style="width: 100%">
              <topRight1></topRight1>
            </div>
            <div style="width: 100%">
              <topRight2></topRight2>
            </div>
          </div>
        </div>

        <div class="center">
          <div style="width: 30%">
            <centerLeft></centerLeft>
          </div>
          <div style="width: 30%">
            <centerCon></centerCon>
          </div>
          <div style="width: 30%">
            <centerRight></centerRight>
          </div>
        </div>

        <div class="bottom">
          <div style="width: 35%">
            <bottomLeft></bottomLeft>
          </div>
          <div style="width: 20%">
            <bottomCenter></bottomCenter>
          </div>
          <div style="width: 35%">
            <bottomRight></bottomRight>
          </div>
        </div>
      </div>
    </div>

    <div v-else>
      <no-auth></no-auth>
    </div>
  </div>
</template>

<script>
// import drawMixin from "../drawMixin";
import { mapGetters } from "vuex";
import resToken from "@/mixins/resToken";
import topLeft from "./components/topLeft";
import topCenter from "./components/topCenter";
import topRight1 from "./components/topRight1";
import topRight2 from "./components/topRight2";
import centerLeft from "./components/centerLeft";
import centerCon from "./components/centerCon";
import centerRight from "./components/centerRight";
import bottomLeft from "./components/bottomLeft";
import bottomCenter from "./components/bottomCenter";
import bottomRight from "./components/bottomRight";

export default {
  mixins: [resToken],
  computed: {
    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
    powers() {
      const tran =
        this.$store.getters.btnList.find((i) => i.menu_route == "bigScreenNew") || {};
      const { action } = tran ?? {};
      return action ?? [];
    },
  },
  data() {
    return {
      loading: true,
    };
  },
  components: {
    topLeft,
    topCenter,
    topRight1,
    topRight2,
    centerLeft,
    centerCon,
    centerRight,
    bottomLeft,
    bottomCenter,
    bottomRight,
  },
  mounted() {},
  beforeDestroy() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.datavScr.box {
  width: 100%;
  //   height: 100vh;
  // background: #000;
  // background: url("./img/pageBg.png");
  background: url("./img/1.jpeg");
  background-size: 100% 100%;
  margin: 0;
  padding: 20px 20px 70px;
  // color: #fff;
}
.dataBox {
  width: 100%;
  height: 100%;
  min-width: 1300px;
}

.top {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.center {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}
.bottom {
  width: 100%;
  display: flex;
  justify-content: space-between;
  //   margin-top: 30px;
  max-height: 400px;
}
</style>
