<template>
	<view class="monitor-container">
		<playerContainer></playerContainer>
		
		<view class="footer">
			<u-row>
				<u-col :span="10" :offset="1">
					<u-button type="primary" :plain="false"
						text="清除全部" shape="circle"
						@click="handleClear"
					>
					</u-button>
				</u-col>
				
			</u-row>
		</view>
	</view>
</template>

<script>
import {vehVideo} from '@/api/monitor.js'
import {isArray} from 'lodash'
import playerContainer from './module/playerContainer.vue'

export default {
	components: {
		playerContainer
	},
	data() {
		return {
		}
	},
	onLoad(option) {
		let {id} = option
		this.getVehVideo(id)
	},
	onShow() {
		
	},
	onHide() {
		
	},
	methods: {
		 async getVehVideo(id) {
			 let list = []
			let res = await vehVideo({id});
			
			if (res.code == "0") {
				if(isArray(res.data)) {
					res.data.forEach((item) => {
						list.push({
							...item,
							objId: item.deviceId,
							code: 'camera',
						})
					})
					
					this.$store.dispatch('setCheckedArr',list)
				
				}
			}
		},
		
		handleClear() {
			// console.log(1231)
			this.$store.dispatch('setCheckedArr',[])
		}
	},
	beforeDestroy() {
		this.$store.dispatch('setCheckedArr',[])
	},
}
</script>

<style lang="scss" scoped>
.monitor-container {
	width: 100%;
	// height: 100vh;
	position: relative;
	padding-bottom: 100rpx;
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding-bottom: 20rpx;
	}
}	
</style>
