<template>
  <div style="pointer-events: all; margin-top: 00.25rem">
    <InfoHeader
      name="电梯现行状态"
      eName="Current status of elevator"
    ></InfoHeader>
    <InfoContent height="4.8rem">
      <el-row>
        <el-col :span="24">
          <div class="title d-flex jc-center a-c">
            <div class="video-title c-white fs-22 font-weight-br">实时运行</div>
          </div>
          <div class="video-box d-flex jc-center a-c">
            <dv-border-box-1 style="height: 3.6rem; width: 95%">
              <div class="d-flex a-c full-height full-width">
                <el-button
                  style="margin-left: 0.4rem"
                  type="primary"
                  @click="handlVideo"
                  >查看监控</el-button
                >

                <div class="d-flex">
                  <!-- <div class="d-flex a-c" style="margin-left: 0.3rem">
                    <el-button icon="el-icon-refresh" circle></el-button>
                  </div> -->
                  <div style="margin-left: 0.4rem">
                    <div
                      class="d-flex jc-center"
                      style="position: relative; z-index: 9"
                    >
                      <img
                        style="width: 1.8rem; height: 2.3rem"
                        src="../../../assets/images/elevator_run_close.png"
                        alt=""
                      />
                    </div>
                    <div
                      class="d-flex jc-center"
                      style="
                        position: absolute;
                        bottom: -0.2rem;
                        left: 23%;
                        transform: translate(-50%, -50%);
                      "
                    >
                      <img
                        src="../../../assets/images/elevator_run_base.png"
                        alt=""
                      />
                    </div>
                    <!-- <div class="d-flex jc-center" style="margin-top: 0.3rem">
                      <el-rate v-model="value1"></el-rate>
                    </div> -->
                  </div>
                  <div class="d-flex a-c" style="margin-left: 0.8rem">
                    <div>
                      <div
                        :style="{
                          marginBottom: '00.25rem',
                          cursor: 'pointer',
                          opacity: this.runInfo.runState == 17 ? '1' : '0.5',
                        }"
                      >
                        <img
                          src="../../../assets/images/elevator_btn_up.png"
                          alt=""
                        />
                      </div>
                      <div
                        style="text-align: center; margin-bottom: 10px"
                        class="c-white font-weight-br"
                      >
                        {{ this.runInfo.floor || "未知" }}
                      </div>
                      <div
                        :style="{
                          marginBottom: '00.25rem',
                          cursor: 'pointer',
                          opacity: this.runInfo.runState == 18 ? '1' : '0.5',
                        }"
                      >
                        <img
                          src="../../../assets/images/elevator_btn_down.png"
                          alt=""
                        />
                      </div>
                    </div>
                  </div>
                  <div class="d-flex">
                    <div
                      class="d-flex jc-center a-c"
                      style="margin-left: 0.8rem"
                    >
                      <div>
                        <div class="item-a">
                          事件编号 -{{ this.runInfo.type }}
                        </div>
                        <div class="item-n">
                          平层状态 -{{
                            this.runInfo.levelStatus === 1 ? "平层" : "非平层"
                          }}
                        </div>
                        <div class="item-a">
                          行梯状态 -{{
                            this.runInfo.runState
                              ? this.doorStateMap[this.runInfo.runState]
                              : "未知"
                          }}
                        </div>
                        <div class="item-n">
                          门开关状态 -{{
                            this.runInfo.doorState
                              ? this.doorStateMap[this.runInfo.doorState]
                              : "未知"
                          }}
                        </div>
                        <div class="item-a">
                          当前显示楼层 -{{ this.runInfo.floor || "未知" }}
                        </div>
                        <div class="item-n">
                          前后振幅峰值(mg) -{{
                            this.runInfo.frontAndRearAmplitude || ""
                          }}
                        </div>
                      </div>
                    </div>
                    <div
                      class="d-flex jc-center a-c"
                      style="margin-left: 0.8rem"
                    >
                      <div>
                        <div class="item-a">
                          左右振幅峰值(mg) -{{
                            this.runInfo.leftAndRightAmplitude || ""
                          }}
                        </div>
                        <div class="item-n">
                          冲顶/下蹲状态 -{{ this.runInfo.headUpSquattingState }}
                        </div>
                        <div class="item-a">
                          当前速度(cm/s) -{{ this.runInfo.speed || "" }}
                        </div>
                        <div class="item-n">
                          本次行梯距离(cm) -{{ this.runInfo.currRunDis || "" }}
                        </div>
                        <div class="item-a">
                          上行总距离(cm) -{{ this.runInfo.upRunDis || "" }}
                        </div>
                        <div class="item-n">
                          下行总距离(cm) -{{ this.runInfo.downRunDis || "" }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </dv-border-box-1>
          </div>
        </el-col>
      </el-row>
    </InfoContent>
  </div>
</template>

<script>
import InfoHeader from "@/components/infoHeader";
import InfoContent from "@/components/infoContent";
import { getWorkElevatorRunData, getVideoUrl } from "@/api/elevator";
export default {
  components: {
    InfoHeader,
    InfoContent,
  },

  data() {
    return {
      value1: 3,
      elevatorNum: "",

      runInfo: {},
      runStateMap: {
        0: "停梯",
        17: "上行",
        18: "下行",
        33: "上行到停梯",
        34: "下行到停梯",
        255: "未知",
        "": "未知",
      },
      doorStateMap: {
        0: "开门到位",
        1: "关门到位",
        2: "开门过程中",
        3: "关门过程中",
        255: "未知",
        "": "未知",
      },
    };
  },

  created() {
    console.log(this.$route.query);
    if (this.$route.query) {
      this.elevatorNum = this.$route.query.elevatorNum;
      this.getWorkElevatorRunDataApi();
    }
  },
  methods: {
    handlVideo() {
      getVideoUrl(this.elevatorNum).then((res) => {
        if (res.data) {
          window.open(res.data);
        }
      });
    },
    getWorkElevatorRunDataApi() {
      getWorkElevatorRunData(this.elevatorNum).then((res) => {
        this.runInfo = res.data;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep
  .el-table--enable-row-hover
  .el-table__body
  tr:hover
  > td.el-table__cell {
  background: rgba(1, 13, 56, 0.9) !important;
}
::v-deep .el-rate__icon {
  font-size: 0.35rem;
}
::v-deep .el-table__cell {
  background-color: #10295f;
  color: white;
  border-bottom: none !important;
}
::v-deep .el-button {
  background: rgba(6, 15, 48, 1);
  border: solid rgb(20, 45, 134) 1px;
  color: white !important;
}
.title {
  padding: 0.25rem;

  .video-title {
    background-image: url("../../../assets/images/biaoti-bck.png");
    background-size: 100% 100%;
    width: 1.675rem;
    height: 0.375rem;
    line-height: 0.375rem;

    text-align: center;
  }
}
.item-a {
  padding: 00.13rem 0.35rem;

  background-color: rgb(12, 31, 79);
  color: white;
  white-space: nowrap;
}
.item-n {
  padding: 00.13rem 0.35rem;
  white-space: nowrap;
  background-color: #10295f;
  color: white;
}
/* 针对特定元素的滚动条 */
.info-list::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
.info-list {
  .info-item {
    cursor: pointer;
    height: 0.65rem;
    background-color: #10295f;
    margin-bottom: 0.1rem;

    .classic {
      width: 1rem;
      font-size: 0.25rem;
      font-weight: bolder;

      color: #f6d54c;

      background-color: #173c7d;
    }
    .ele-name {
      width: 3.5rem;

      font-size: 0.18rem;

      color: white;
    }
    .time {
      width: 2rem;
      font-size: 0.18rem;
      color: white;
    }
    .status {
      font-size: 0.18rem;
      color: red;
    }
  }
}
</style>
