<template>
	<div>
		<a-table :bordered="false" :dataSource="list" :columns="columns">
			<template #bodyCell="{ column, record }">
				<template v-if="column.key === 'action'">
					<a-button type="primary" @click="open(record)">查看摄像头</a-button>
				</template>
			</template>
		</a-table>
	</div>
	<a-modal style="width: 850px" v-model:visible="showModal" title="摄像头" :maskClosable="false" :footer="null">
		<video class="video" autoplay muted :src="url"></video>
	</a-modal>
</template>

<script setup name="monit">
	const columns = ref([
		{
			title: '摄像头名称',
			dataIndex: 'name',
			key: 'name'
		},
		{
			title: 'ip',
			dataIndex: 'ip',
			key: 'ip'
		},
		{
			title: '操作',
			dataIndex: 'action',
			key: 'action'
		}
	])
	const list = ref([
		{
			id: 1,
			name: '育肥一舍一单元',
			ip: '192.168.1.12',
			url: 'http://119.3.93.18/video/qingshan/sample.mp4'
		}
	])
	const showModal = ref(false)
	const url = ref('')
	const open = (item) => {
		showModal.value = true
		url.value = item.url
	}
</script>

<style scoped>
	.video {
		width: 800px;
		height: 400px;
	}
</style>
