<template>
	<a-card :bordered="false" style="margin-bottom: 10px" class="mb-2">
		<a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
			<a-row :gutter="24">
				<a-col :span="6">
					<a-form-item label="设备区域" name="areaName">
						<a-select v-model:value="searchFormState.areaName" placeholder="请选择设备区域"
								  :options="areaList"
						> </a-select>
					</a-form-item>
				</a-col>
				<!--<a-col :span="6">
					<a-form-item label="内容" name="content">
						<a-input v-model:value="searchFormState.content" placeholder="内容查询" allow-clear />
					</a-form-item>
				</a-col>-->
				<a-col :span="6">
					<a-button type="primary" html-type="submit" @click="table.refresh()">查询</a-button>
					<a-button style="margin: 0 8px" @click="reset">重置</a-button>
				</a-col>
			</a-row>
		</a-form>
	</a-card>
    <a-card :bordered="false">
        <s-table
            ref="table"
            :columns="columns"
            :data="loadData"
            :alert="options.alert.show"
            bordered
            :row-key="(record) => record.id"
            :tool-config="toolConfig"
            :row-selection="options.rowSelection"
        >
            <template #operator class="table-operator">
                <a-space>
                    <a-button type="primary" @click="formRef.onOpen()" v-if="hasPerm('bizVideoAdd')">
                        <template #icon><plus-outlined /></template>
                        新增
                    </a-button>
                    <a-button danger @click="deleteBatchBizVideo()" v-if="hasPerm('bizVideoBatchDelete')">删除</a-button>
                </a-space>
            </template>
            <template #bodyCell="{ column, record }">
                <template v-if="column.dataIndex === 'action'">
                    <a-space>
                        <a @click="formRef.onOpen(record)" v-if="hasPerm('bizVideoEdit')">编辑</a>
                        <a-divider type="vertical" v-if="hasPerm(['bizVideoEdit', 'bizVideoDelete'], 'and')" />
                        <a-popconfirm title="确定要删除吗？" @confirm="deleteBizVideo(record)">
                            <a-button type="link" danger size="small" v-if="hasPerm('bizVideoDelete')">删除</a-button>
                        </a-popconfirm>
						<a-divider type="vertical" v-if="hasPerm('toPlay')" />
						<a @click="toPlay(record)" v-if="hasPerm('toPlay')">播放</a>
						<a-divider type="vertical" v-if="hasPerm('allocation')" />
						<a @click="openUserSelector(record)" v-if="hasPerm('allocation')">分配</a>
                    </a-space>
                </template>
            </template>
        </s-table>
    </a-card>
    <Form ref="formRef" @successful="table.refresh(true)" />
	<a-modal
		v-model:visible="visible"
		title="视频播放"
		:footer="null"
		width="800px"
		:body-style="{
			height: 'calc(100vh - 200px)',
			overflow: 'auto'
		}"
		@cancel="onClose"
	>

		<div>
			<!--<video id="videoPlayer" controls src="http://localhost:9025/imgFile/123.mp4" width="830" >
			</video>-->
			<iframe width="100%" height="430" frameborder="0" :src="videoUrl" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
		</div>

	</a-modal>

	<user-selector-plus
		ref="userSelectorPlusRef"
		:org-tree-api="selectorApiFunction.orgTreeApi"
		:user-page-api="selectorApiFunction.userPageApi"
		:checked-user-list-api="selectorApiFunction.checkedUserListApi"
		@onBack="userBack"
	/>
</template>

<script setup name="bizvideo">
    import { message } from 'ant-design-vue'
    import Form from './form.vue'
    import bizVideoApi from '@/api/biz/bizVideoApi'
	import userApi from '@/api/sys/userApi'
	import userCenterApi from '@/api/sys/userCenterApi'
	import UserSelectorPlus from './userSelectorPlus.vue'
	import bizUserVideoApi from '@/api/biz/bizUserVideoApi'
	import bizAreaApi from '@/api/biz/bizAreaApi'
	const userSelectorPlusRef = ref()

	const searchFormRef = ref()
	let searchFormState = reactive({})
	const areaList = ref()

	let userList = ref([])
    const table = ref()
    const formRef = ref()
    const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
    const visible = ref(false)
	const videoUrl = ref()
	const videoId = ref()
    const columns = [
		{
			title: '设备区域',
			dataIndex: 'areaName',
			width:180
		},
        {
            title: '设备名称',
            dataIndex: 'videoName',
			width:150
        },
        {
            title: '设备序列号',
            dataIndex: 'serial',
			width:100
        },
        {
            title: '设备通道号',
            dataIndex: 'channelNo',
			width:80
        },
		{
			title: '创建时间',
			dataIndex: 'createTime',
			width:150
		},
    ]
    // 操作栏通过权限判断是否显示
	columns.push({
		title: '操作',
		dataIndex: 'action',
		align: 'center',
		width: 100
	})

    let selectedRowKeys = ref([])
    // 列表选择配置
    const options = {
        alert: {
            show: false,
            clear: () => {
                selectedRowKeys = ref([])
            }
        },
        rowSelection: {
            onChange: (selectedRowKey, selectedRows) => {
                selectedRowKeys.value = selectedRowKey
            }
        }
    }
    const loadData = (parameter) => {
		bizAreaApi.bizAreaList().then((res)=>{
			areaList.value = res.map((item)=>{
				return{
					value:item.id,
					label:item.areaName
				}
			})
		})
		const searchFormParam = JSON.parse(JSON.stringify(searchFormState))
        return bizVideoApi.bizVideoPage(Object.assign(parameter, searchFormParam)).then((data) => {
            return data
        })
    }
    // 删除
    const deleteBizVideo = (record) => {
        let params = [
            {
                id: record.id
            }
        ]
        bizVideoApi.bizVideoDelete(params).then(() => {
            table.value.refresh(true)
        })
    }
    // 批量删除
    const deleteBatchBizVideo = () => {
        if (selectedRowKeys.value.length < 1) {
            message.warning('请选择一条或多条数据')
            return false
        }
        const params = selectedRowKeys.value.map((m) => {
            return {
                id: m
            }
        })
        bizVideoApi.bizVideoDelete(params).then(() => {
            table.value.clearRefreshSelected()
        })
    }

	// 传递设计器需要的API
	const selectorApiFunction = {
		orgTreeApi: (param) => {
			return userApi.userOrgTreeSelector(param).then((data) => {
				return Promise.resolve(data)
			})
		},
		userPageApi: (param) => {
			return userApi.userSelector(param).then((data) => {
				return Promise.resolve(data)
			})
		},
		checkedUserListApi: (param) => {
			return userCenterApi.userCenterGetUserListByIdList(param).then((data) => {
				return Promise.resolve(data)
			})
		}
	}

    const toPlay = (record) => {
		videoUrl.value = ''
    	console.log(record)
		bizVideoApi.getVideoUrl({id:record.id}).then((res)=>{
			console.log("url:"+res.url)
			videoUrl.value ='https://open.ys7.com/ezopen/h5/iframe_se?url=' +res.url+'&autoplay=1&accessToken='+res.accessToken
		})
		visible.value = true
	}

	// 打开人员选择器
	const openUserSelector = (record) => {
		videoId.value = record.id
		let ids = []
		// 打开之前选判断我们刚刚是否选过
		/*f (userList.value.length > 0) {
			userList.value.forEach((item) => {
				ids.push(item.id)
			})
		}*/
		bizUserVideoApi.biaUserVideoList({videoId:videoId.value}).then((res)=>{
			res.map((item)=>{
				ids.push(item.userId)
			})
			console.log("ids:"+JSON.stringify(ids))
			userSelectorPlusRef.value.showUserPlusModal(ids)
		})
	}

	// 人员选择回调
	const userBack = (value) => {
		userList.value = []
		value.forEach((res)=>{
			userList.value.push(res.id)

		})
		let param = {
			videoId:videoId.value,
			userIdList:userList.value
		}
		bizUserVideoApi.bizUserVideoSubmitForm(param,true).then(()=>{
			table.value.clearRefreshSelected()
		})
	}

	// 重置
	const reset = () => {
		searchFormRef.value.resetFields()
		table.value.refresh(true)
	}
</script>
<style scoped>
	.video-js {
		width: 600px;
		height: 400px;
	}
</style>
