<template>
  <div>
    <n-button strong secondary type="info" size="large" @click="$router.push('/')" class="back-home-btn">返回首页</n-button>
    <div class="selectoption">
      <!-- <el-select :popper-append-to-body="false" v-model="selectedLineType" placeholder="请选择视频显示模式"
        class="select-line-type">
        <el-option label="一路" value="alone"></el-option>
        <el-option label="四路" value="fourWays"></el-option>
        <el-option label="九路" value="nineWays"></el-option>
        <el-option label="十六路" value="sixteen"></el-option>
      </el-select> -->
      <!-- <n-select v-model:value="selectedLineType" class="select-line-type" :options="options" placeholder="请选择" /> -->
      <div class="btngroup">
      <n-button strong secondary type="info" class="tech-button" @click="selectedLineType='alone'">单屏</n-button>
      <n-button strong secondary type="info" class="tech-button" @click="selectedLineType='fourWays'">四屏</n-button>
      <n-button strong secondary type="info" class="tech-button" @click="selectedLineType='nineWays'">九屏</n-button>
      <n-button strong secondary type="info" class="tech-button" @click="selectedLineType='sixteen'">十六屏</n-button>
    </div>
    </div>
    <ItemWrap title="实时监控" class="mainitem">
      <div class="app-container main-div">
        <!-- "alone", "fourWays", "nineWays", "sixteen" -->
        <videoController :lineType="selectedLineType"  :videoUrls="videoUrls"></videoController>
      </div>
    </ItemWrap>
  </div>

</template>

<script setup name="Index">
import videoController from "./videoController.vue";
import ItemWrap from "@/components/item-wrap";
import { NSelect,NButton } from "naive-ui";
import { ref, reactive } from "vue";
const selectedLineType = ref('sixteen'); // 默认为十六路

const videoUrls = ref([
  "rtmp://ns8.indexforce.com/home/mystream",
  "https://cph-p2p-msl.akamaized.net/hls/live/2000341/test/master.m3u8",
  "https://devstreaming-cdn.apple.com/videos/streaming/examples/img_bipbop_adv_example_fmp4/master.m3u8",
  "https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.ism/.m3u8",
  "http://192.168.1.102:800/live/test.flv",
  "http://192.168.1.102:800/live/test.flv",
  "http://192.168.1.102:800/live/test.flv",
  "http://192.168.1.102:800/live/test.flv",
  "http://192.168.1.102:800/live/test.flv",
  "http://192.168.1.102:800/live/test.flv",
  "http://192.168.1.102:800/live/test.flv",
  "http://192.168.1.102:800/live/test.flv",
  "http://192.168.1.102:800/live/test.flv",
  "http://192.168.1.102:800/live/test.flv",
  "http://192.168.1.102:800/live/test.flv",
  "http://192.168.1.102:800/live/test.flv",
]);
const options = reactive([
  {
    label: "一路",
    value: "alone",
  },
  {
    label: "四路",
    value: "fourWays",
  },
  {
    label: "九路",
    value: "nineWays",
  },
  {
    label: "十六路",
    value: "sixteen",
  },
])
</script>

<style scoped>
.mainitem {
  margin-top: 10px;
  font-size: 30px;
  height: 940px;
  align-items: center;
}

.main-div {
  padding: 0 !important;
  margin-top: 30px;
  width: 100%;
}

.back-home-btn {
  position: absolute;
  margin-top: 30px;
  top: 10px;
  left: 20px;
}

::v-deep .select-line-type {
  width: 200px;
  top: 10px;
  left: 85%;
  border: none;
  background-color: transparent !important;
}
 
::v-deep(.n-select) {
  /* 覆盖NSelect根元素的背景色 */
  background-color: transparent !important;

  /* 覆盖下拉列表的背景色 */
  .n-select-dropdown {
    background-color: transparent !important;
  }

  /* 覆盖其他可能影响背景色的元素 */
  .n-input__inner,
  .n-input-affix__content {
    background-color: transparent !important;
  }
}
.btngroup{
  margin-top: 15px;
  display: flex;
  justify-content: center;
}
.tech-button{
  margin-left: 10px;
  width: 100px;
}

</style>