<template>
	<div class="videoListBig">
		<div class="title"><i>监控设备列表</i></div>
		<vue-scroll style="height: 500px;">
			<div class="content">
				<div class="decivList">
					<div class="menuDev" v-for="item in videoList" :key="item.id" :class="item.deviceState == 1 ? 'online' : 'offline'">
						<div class="decName">
							<!-- <span v-show="item.deviceState == 1"><img src="@/assets/images/dustNoise/onlineImg.png" alt="" /></span> -->
							<!-- <span v-show="item.deviceState == 2"><img src="@/assets/images/dustNoise/offImg.png" alt="" /></span> -->
							<span style="white-space: nowrap"> {{ item.videoName }}</span>
						</div>
						<div class="status">{{ item.deviceState == 1 ? "在线" : "离线" }}</div>
					</div>
				</div>
			</div>
		</vue-scroll>
	</div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { GlobalStore } from "@/stores";
// import { useRouter } from "vue-router";
import { selectProjectVideoListApi, selectUserVideoListApi } from "@/api/modules/video";
// const router = useRouter();
const store = GlobalStore();

let videoList = ref([] as any);

function loadData() {
	selectProjectVideoListApi({
		projectSn: store.sn
	}).then(res => {
		videoList.value = res.result.videoList[0].list;
		console.log("视频列表", res);
	});
}
function loadData2() {
	selectUserVideoListApi({
		projectSn: store.sn
		// userId: store.userId
	}).then(res => {
		console.log("子账号视频列表", res);
	});
}

onMounted(async () => {
	loadData();
	loadData2();
});
</script>

<style lang="scss" scoped>
.videoListBig {
	width: 100%;
	overflow: scroll;
	.title {
		height: 5%;
		line-height: 35px;
		text-align: left;
		font-size: calc(100vw * 18 / 1920);
		color: #ffffff;
		background: url("@/assets/images/titleImg.webp") no-repeat;
		background-size: 150% 100%;
		i {
			margin-left: 50px;
			font-family: OPPOSansH;
		}
	}
	.content {
		height: 800px;
		width: 100%;
		margin-top: 10px;
		background: url("@/assets/images/cardImg.png") no-repeat;
		background-size: 100% 100%;
		color: #fff;
		display: flex;
		font-size: calc(100vw * 14 / 1920);
	}
}
.decivList {
	width: 100%;
	height: 70%;
	.menuDev {
		height: 6%;
		background: url("@/assets/images/dustNoise/listImg.png") no-repeat;
		background-size: 100% 100%;
		color: #fff;
		display: flex;
		line-height: 35px;
		font-size: calc(100vw * 14 / 1920);
		margin: 2% 3%;
		cursor: pointer;
		.decName {
			width: 30%;
			span {
				margin-left: 10%;
			}
		}
		.status {
			margin-left: 56%;
		}
	}
	.menuDev:hover {
		height: 6%;
		background: url("@/assets/images/dustNoise/devImg.png") no-repeat;
		background-size: 100% 100%;
	}
}
.online {
	.status {
		color: #65d7f9;
	}
}
.offline {
	.status {
		color: #ec6266;
	}
}
</style>
