<template>
  <div class="main-container">
    <div class="common-info-container">
      <!-- <Right1></Right1> -->
      <!-- <Right2></Right2> -->
      <!-- <SearchArea></SearchArea> -->
    </div>
    <van-popup
      round
      v-model="show"
      position="bottom"
      :style="{ height: '90%' }"
      close-on-click-overlay
      get-container="#app"
      ><div class="pop-container">
        <div style="color: white" class="fs-22 font-weight-br">
          首页数据统计
        </div>
        <div class="">
          <div class="elevator-con-list d-flex flex-wrap">
            <div
              class="elevator-con-item"
              v-for="(item, index) in eleCondList"
              :key="index"
            >
              <div class="con-num d-flex jc-center">
                <!-- <dv-border-box-10 style="width: 1.75rem; height: 0.9rem"> -->
                <div class="d-flex jc-center a-c full-height">
                  {{ item.num }}
                </div>
                <!-- </dv-border-box-10> -->
              </div>
              <div class="con-name d-flex jc-center">
                <div>
                  <div class="d-flex jc-center textS-common">
                    {{ item.name }}
                  </div>
                  <div>
                    <dv-decoration-6
                      style="width: 1.2rem; height: 0.1rem; margin-top: 0.06rem"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="mt-4"><Left1 @closePop="closePop"></Left1></div>
          <div class="mt-4"><Left2></Left2></div>
        </div></div
    ></van-popup>
  </div>
</template>
<script>
import Left1 from "./components/left1.vue";
import Left2 from "./components/left2.vue";
import Right1 from "./components/right1.vue";
import Right2 from "./components/right2.vue";
import SearchArea from "./components/searchArea.vue";
import { getElevatorTotal } from "@/api/elevator";
export default {
  components: { Left1, Left2, Right1, Right2, SearchArea },
  data() {
    return {
      show: false,
      eleCondList: [
        {
          name: "电梯总数",
          num: 0,
          key: "total",
        },
        {
          name: "在用电梯",
          num: 0,
          key: "useTotal",
        },
        {
          name: "智能终端数量",
          num: 0,
          key: "smartTotal",
        },
        {
          name: "无纸化电梯",
          num: 0,
          key: "paperlessTotal",
        },
      ],
    };
  },
  mounted() {
    this.getElevatorTotalApi();
  },
  created() {
    this.$EventBus.$on("openData", (bool) => {
      if (bool) {
        console.log("0000");
        this.show = true;
      }
    });
  },
  methods: {
    handleClosePop() {
      this.show = false;
    },
    closePop() {
      this.show = false;
    },
    async getElevatorTotalApi() {
      const res = await getElevatorTotal();
      this.eleCondList.map((item) => {
        item.num = res.data[item.key];
      });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .van-popup {
  background-color: red !important;
}
.pop-container {
  background-color: #10295f;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 0.3rem;
  .elevator-con-list {
    // position: fixed;
    // top: 2.13rem;
    // left: 50%;
    // transform: translate(-50%, -50%);
    height: auto;
    width: auto;
    pointer-events: all; /* 允许点击事件穿透到地图 */
    margin-top: 0.3rem;
    .elevator-con-item {
      width: 46.8%;
      background: -webkit-gradient(
        linear,
        left top,
        right top,
        from(rgb(18, 92, 204)),
        color-stop(20%, rgb(18, 92, 204)),
        color-stop(40%, rgb(18, 92, 204)),
        color-stop(60%, rgb(18, 92, 204)),
        color-stop(80%, rgb(18, 92, 204)),
        to(rgb(18, 92, 204))
      );

      border: solid 1px #8ae0fa;
      border-radius: 12px;
      padding: 0.15rem;
      &:first-child {
        margin-bottom: 0.3rem;
      }
      &:nth-child(2) {
        margin-bottom: 0.3rem;
      }
      &:nth-child(odd) {
        margin-right: 0.3rem;
      }
      &:nth-child(even) {
      }
      .con-name {
        font-size: 0.2rem;
        color: #ffffff;
      }
      .con-num {
        font-size: 0.35rem;
        height: 0.575rem;
        color: #fefefe;
        font-weight: bolder;
      }
    }
  }
}
.main-container {
  color: red;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 1.25rem;
  left: 0;
  z-index: 9;
  padding: 0 0.2rem;
  pointer-events: none; /* 允许点击事件穿透到地图 */
  .left1 {
    width: 30%;
    height: 500px;
  }
}
</style>
