<!--
  Description: 场站详情-云台控制
  Author: 李亚光
  Date: 2023-09-06
 -->
<script lang="ts" setup name="StationDetailControlVideo">
import monitorDataGasList from './monitorDataGasList.vue'
import controlBtn from '@/views/home/station/control/components/control.vue'
</script>

<template>
  <div class="container-station">
    <!-- 视频区域 -->
    <div class="left-video">
      <!-- 回放，预览按钮 -->
      <div class="header">
        <div>
          <el-button type="primary" round>
            预览
          </el-button>
          <el-button style="margin-left: 100px;" round>
            回放
          </el-button>
        </div>
      </div>
      <!-- 视频播放 -->
      <div class="video">
        <video class="player" src="" autoplay muted controls />
      </div>
      <!-- 云台控制按钮 -->
      <div>
        <div class="control-btn">
          <control-btn />
        </div>
      </div>
    </div>
    <!-- 浓度数据展示区域 -->
    <div class="right-gas">
      <monitor-data-gas-list />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container-station {
  width: 100%;
  display: flex;

  .left-video {
    width: 50%;

    .header {
      width: 100%;
      display: flex;
      justify-content: center;
    }

    .video {
      height: 400px;
      width: 100%;
      background-color: #666;
      margin-top: 10px;

      .player {
        height: 400px;
        width: 100%;
      }
    }

    .control-btn {
      width: 40%;
      margin: 0 auto;
      margin-top: 10px;
      // display: flex;
    }
  }
}
</style>