<template>
  <div class="elevator-container">
    <div class="ele-name c-white font-weight-br fs-14 d-flex a-c jc-center">
      {{ eleInfo.elevatorName || "-" }}
    </div>
    <div class="main-ele d-flex jc-center mt-3">
      <div class="d-flex a-c jc-center">
        <img
          v-if="eleInfo.doorStatus === 1 || eleInfo.doorStatus === 3"
          style="width: 1.5rem; height: 1.8rem"
          src="../../../assets/images/elevator_run_close.png"
          alt=""
        />
        <img
          v-else-if="eleInfo.doorStatus === 0 || eleInfo.doorStatus === 2"
          style="width: 1.5rem; height: 1.8rem"
          src="../../../assets/images/elevator_run_open.png"
          alt=""
        />
        <img
          v-else
          style="width: 1.5rem; height: 1.8rem"
          src="../../../assets/images/elevator_run_open.png"
          alt=""
        />
      </div>
      <div class="d-flex a-c jc-center" style="margin-left: 0.22rem">
        <div>
          <div>
            <img
              :style="{
                opacity: `${statusArrUp.includes(eleInfo.runStatus) ? 1 : 0.5}`,
              }"
              src="../../../assets/images/elevator_btn_up.png"
              alt=""
            />
          </div>
          <div>
            <div
              style="margin-top: 0.15rem"
              class="c-white font-weight-br d-flex jc-center fs-24"
            >
              {{ eleInfo.floor || "-" }}
            </div>
            <div
              style="margin-top: 0.15rem"
              class="c-white font-weight-br d-flex jc-center"
            >
              Floor
            </div>
          </div>
          <div style="margin-top: 0.15rem">
            <img
              :style="{
                opacity: `${
                  statusArrDown.includes(eleInfo.runStatus) ? 1 : 0.5
                }`,
              }"
              src="../../../assets/images/elevator_btn_down.png"
              alt=""
            />
          </div>
        </div>
      </div>
      <div class="base-img">
        <img style="width:2.5rem;height:0.5rem" src="../../../assets/images/elevator_run_base.png" alt="" />
      </div>

      <!-- <div class="level-box">
        <el-rate v-model="value1" disabled></el-rate>
      </div> -->
    </div>
    <div class="c-white d-flex jc-center fs-14">
      运行状态:{{ statusMap[eleInfo.runStatus] }}
    </div>
    <div class="c-white d-flex jc-center fs-14">
      梯门状态:{{ doorsMap[eleInfo.doorStatus] }}
    </div>
  </div>
</template>
<script>
export default {
  props: {
    eleInfo: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      value1: 3,
      statusArrUp: [17, 33],
      statusArrDown: [18, 34],
      statusMap: {
        0: "停梯",
        17: "上行",
        18: "下行",
        33: "上行到楼梯",
        34: "下行到楼梯",
        255: "未知",
      },
      doorsMap: {
        0: "开门到位",
        1: "关门到位 ",
        2: "开门过程中",
        3: "  关门过程中",
        255: "未知",
      },
    };
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-rate__icon {
  font-size: 0.35rem;
}
::v-deep .el-rate {
  white-space: nowrap;
}
.elevator-container {
  margin-right: 0.1rem;
  margin-top: 0.25rem;
  width: 100%;
  .main-ele {
    background: url("../../../assets/images/elevator_run_bck.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 2.8rem;
    height: 2.9rem;
    margin: 0 auto;
    position: relative;
  }
  .base-img {
    position: absolute;
    bottom: -0.13rem;
    left: 42%;
    transform: translate(-50%, -50%);
  }
  .level-box {
    position: absolute;
    bottom: -0.1rem;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .ele-name {
    width: 2.8rem;
    height: 0.5rem;
    margin-bottom: 0.25rem;
    background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0) 10%,
      rgba(9, 94, 163, 0.3) 20%,
      rgba(9, 94, 163, 0.4) 30%,
      rgba(9, 94, 163, 0.5) 40%,
      rgba(9, 94, 163, 0.8) 50%,
      rgba(9, 94, 163, 0.5) 60%,
      rgba(9, 94, 163, 0.4) 70%,
      rgba(9, 94, 163, 0.3) 80%,
      rgba(0, 0, 0, 0) 90%,
      rgba(0, 0, 0, 0) 100%
    );
  }
}
</style>
