<template>
  <div class="rightVideoBox" :class="foldShow ? 'show' : ''">
    <div class="pubTitle">
      <div class="text canClick" @click="rightShowFn(3)">现场设备</div>
    </div>
    <ul class="tabsBox">
      <li class="active">固定视频</li>
      <li>移动视频</li>
    </ul>
    <ul class="shebeiList">
      <li>
        <div class="top">
          <span class="name">视高派出所巡组1</span><br />
          <span class="other">35m</span>
        </div>
        <div class="address">
          <img src="@/assets/images/situationPresentation/dingwei.png" />
          <span>仁寿县金马路一段23号</span>
        </div>
        <div class="btnBox">
          <div class="left"></div>
          <div class="right">
            <button class="dp-default small">上屏</button>
            <button class="dp-default small">播放视频</button>
          </div>
        </div>
        <ul class="numbCheck">
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
          <li>8</li>
          <li>9</li>
        </ul>
      </li>
      <li>
        <div class="top">
          <span class="name">视高派出所巡组1</span><br />
          <span class="other">35m</span>
        </div>
        <div class="address">
          <img src="@/assets/images/situationPresentation/dingwei.png" />
          <span>仁寿县金马路一段23号</span>
        </div>
        <div class="btnBox">
          <div class="left"></div>
          <div class="right">
            <button class="dp-default small">上屏</button>
            <button class="dp-default small">播放视频</button>
          </div>
        </div>
      </li>
      <li>
        <div class="top">
          <span class="name">视高派出所巡组1</span><br />
          <span class="other">35m</span>
        </div>
        <div class="address">
          <img src="@/assets/images/situationPresentation/dingwei.png" />
          <span>仁寿县金马路一段23号</span>
        </div>
        <div class="btnBox">
          <div class="left"></div>
          <div class="right">
            <button class="dp-default small">上屏</button>
            <button class="dp-default small">播放视频</button>
          </div>
        </div>
        <div class="videoBox">
          <img src="@/assets/images/situationPresentation/video.png" />
        </div>
      </li>
      <li>
        <div class="top">
          <span class="name">视高派出所巡组1</span><br />
          <span class="other">35m</span>
        </div>
        <div class="address">
          <img src="@/assets/images/situationPresentation/dingwei.png" />
          <span>仁寿县金马路一段23号</span>
        </div>
        <div class="btnBox">
          <div class="left"></div>
          <div class="right">
            <button class="dp-default small">上屏</button>
            <button class="dp-default small">播放视频</button>
          </div>
        </div>
      </li>
      <li>
        <div class="top">
          <span class="name">视高派出所巡组1</span><br />
          <span class="other">35m</span>
        </div>
        <div class="address">
          <img src="@/assets/images/situationPresentation/dingwei.png" />
          <span>仁寿县金马路一段23号</span>
        </div>
        <div class="btnBox">
          <div class="left"></div>
          <div class="right">
            <button class="dp-default small">上屏</button>
            <button class="dp-default small">播放视频</button>
          </div>
        </div>
      </li>
    </ul>
    <div class="foldBox" @click="flodShowFn">
      <img
        :class="foldShow ? 'close' : ''"
        src="@/assets/images/situationPresentation/fold-arrow.png"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
let foldShow = ref(false);
function flodShowFn() {
  foldShow.value = !foldShow.value;
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/largeScreen.scss";
.rightVideoBox {
  position: fixed;
  top: 0px;
  right: -380px;
  width: 360px;
  padding: 10px;
  height: calc(100vh - 20px);
  background: #001022;
  transition: all 0.5s;
  .foldBox {
    width: 37px;
    height: 510px;
    line-height: 540px;
    position: absolute;
    top: 50%;
    left: -37px;
    transform: translateY(-50%);
    background: url("~@/assets/images/situationPresentation/fold-bg.png")
      no-repeat center;
    img {
      transition: all 0.5s;
      transform: rotate(180deg);
    }
    img.close {
      transition: all 0.5s;
      transform: rotate(0deg);
    }
  }
  &.show {
    right: 0px;
    transition: all 0.5s;
  }
}
.all ul.shebeiList {
  height: calc(100vh - 85px);
}
</style>
