<template>
  <div class="main-container">
    <div class="elevator-con-list d-flex">
      <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.5rem; height: 0.125rem; margin-top: 0.1rem"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="common-info-container">
      <Left1></Left1>
      <Left2></Left2>
      <Right1></Right1>
      <Right2></Right2>
      <!-- <SearchArea></SearchArea> -->
    </div>
  </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 {
      eleCondList: [
        {
          name: "电梯总数",
          num: 0,
          key:'total'
        },
        {
          name: "在用电梯",
          num: 0,
          key:'useTotal'
        },
        {
          name: "智能终端数量",
          num: 0,
          key:'smartTotal'
        },
        {
          name: "无纸化电梯",
          num: 0,
          key:'paperlessTotal'
        },
      ],
    };
  },
  mounted() {
    this.getElevatorTotalApi();
  },
  methods: {
    async getElevatorTotalApi() {
      const res = await getElevatorTotal();
      this.eleCondList.map(item=>{
        item.num = res.data[item.key]
      })
    },
  },
};
</script>
<style lang="scss" scoped>
.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;
  }
  .elevator-con-list {
    background: -webkit-gradient(
      linear,
      left top,
      right top,
      from(rgb(3, 54, 132)),
      color-stop(20%, rgb(3, 54, 132)),
      color-stop(40%, rgb(3, 54, 132)),
      color-stop(60%, rgb(3, 54, 132)),
      color-stop(80%, rgb(3, 54, 132)),
      to(rgb(3, 54, 132))
    );


border: solid 1px #8ae0fa;
    position: fixed;
    top: 2.13rem;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 1.75rem;
    pointer-events: all; /* 允许点击事件穿透到地图 */
    .elevator-con-item {
      margin-left: 0.375rem;
      padding: 0.15rem;
      &:first-child {
        margin-left: 0rem;
      }
      .con-name {
        font-size: 0.225rem;
        color: #ffffff;
      }
      .con-num {
        font-size: 0.45rem;
        height: 0.875rem;
        color: #fefefe;
        font-weight: bolder;
      }
    }
  }
}
</style>
