<template>
	<div class="dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px" :close-on-click-modal="false"
			draggable destroy-on-close @close="onCancel">
			<span v-for="(item, index) in state.srcList" :key="index">
				<video v-if="item.substring(item.length - 3) == 'mp4'" :src="item" controls
					style="width: 100%;height: 100%;"></video>
				<el-image v-else :src="item" style="width: 100%;height: 100%;"></el-image>
			</span>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="configDialog">
import { reactive, ref, defineAsyncComponent, nextTick, toRaw } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { ConfigApi } from '/@/api/api'
// 引入组件

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义变量内容
const topicDialogRef = ref();//新增主题弹窗
const state = reactive({
	tableData: {
		data: [] as any,
		total: 0,
		loading: false,
	},
	configForm: {
	},
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
	},
	srcList: [] as any
});

const DialogFormRef = ref()//表单form对象
// 打开弹窗
const openDialog = (type: string, row: any) => {
	console.log('row1', row)
	state.srcList = row.srcList
	state.dialog.title = '查看';
	state.dialog.isShowDialog = true;//打开弹窗-显示
};
// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
	closeDialog();
};
// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style scoped lang="scss">
.dialog-container {}
</style>
