<!-- eslint-disable vue/v-on-event-hyphenation -->
<template>
	<div class="setvideodialog" v-if="dialogInfo.showDialog">
		<div class="listdetail">
			<div class="dialog-content-more">
				<div class="dialog-title">
					<img src="@/assets/images/titleIcon.png" alt="" />
					<div class="title-text">
						<i>{{ dialogInfo.postData?.title }}</i>
					</div>
					<div class="close-icon" @click="closeDialog">
						<el-icon>
							<Close />
						</el-icon>
					</div>
				</div>
				<div class="contont-video" style="color: #fff; font-size: 24px">
					<div style="border: 1px solid #ccc; width: 95%">
						<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
						<Editor class="editor" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" />
					</div>
					<div class="footer-btn">
						<el-button color="#0a2249" :icon="CircleCloseFilled" @click="closeDialog">取消</el-button>
						<el-button color="#0a2249" :icon="CircleCheckFilled" @click="saveBtn">保存</el-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { onMounted, reactive, ref, onBeforeUnmount, shallowRef, watch } from "vue";
import { CircleCloseFilled, CircleCheckFilled } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
//引入现场大屏API
import { getLiveScreenDanmuSaveObj } from "@/api/modules/agjtLiveApi";
import { GlobalStore } from "@/stores";
// import moment from "moment";
// import { COMPANY } from "@/config/config";
const store = GlobalStore();
// const BASEURL = import.meta.env.VITE_API_URL;
const props = defineProps(["valueHtml"]);
const emits = defineEmits(["updateConfig"]);
const mode = ref("default"); // 或 'simple'
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

// 内容 HTML
const valueHtml = ref("");

// 模拟 ajax 异步获取内容
onMounted(() => {
	// setTimeout(() => {
	// 	valueHtml.value = "<p>模拟 Ajax 异步设置内容</p>";
	// }, 1500);
});

watch(
	() => props.valueHtml,
	() => {
		console.log("我是弹幕配置", props.valueHtml);
		valueHtml.value = props.valueHtml;
	}
);

const toolbarConfig = {
	toolbarKeys: ["undo", "redo", "fontFamily", "bold", "italic", "underline", "color"]
};
const editorConfig = {
	placeholder: "请输入文字...",
	hoverbarKeys: {
		text: {
			menuKeys: [
				"bold", // 加粗
				"italic", // 斜体
				"underline", // 下划线
				"color", // 颜色
				"clearStyle" // 清除格式
			]
		}
	}
};

const saveBtn = async () => {
	console.log(valueHtml.value);
	const requestData = {
		projectSn: store.sn,
		userId: store.userId,
		content: valueHtml.value
	};
	const res: any = await getLiveScreenDanmuSaveObj(requestData, true);
	if (res.success) {
		console.log("修改成功", res);
		ElMessage({
			showClose: true,
			message: "保存成功",
			type: "success"
		});
		dialogInfo.showDialog = false;
		// configWeekVideoListFn(true);
		emits("updateConfig");
	}
};

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
	const editor = editorRef.value;
	if (editor == null) return;
	editor.destroy();
});

const handleCreated = (editor: any) => {
	editorRef.value = editor; // 记录 editor 实例，重要！
};

const dialogInfo = reactive({
	showDialog: false,
	postData: {} as any,
	videoUploadList: [
		{
			id: 1,
			title: "周一"
		},
		{
			id: 2,
			title: "周二"
		},
		{
			id: 3,
			title: "周三"
		},
		{
			id: 4,
			title: "周四"
		},
		{
			id: 5,
			title: "周五"
		},
		{
			id: 6,
			title: "周六"
		},
		{
			id: 7,
			title: "周日"
		}
	]
});

const closeDialog = () => {
	dialogInfo.showDialog = false;
	dialogInfo.postData = {};
};
function openDialog(obj: any) {
	dialogInfo.postData = obj;
	dialogInfo.showDialog = true;
}

// 暴露给父组件的参数和方法(外部需要什么，都可以从这里暴露出去)
defineExpose({
	openDialog
});
onMounted(async () => {});
</script>

<style lang="scss" scoped>
.setvideodialog {
	position: absolute;
	width: 100%;
	height: 100%;
	right: 0%;
	top: 0%;
	background: rgba(7, 28, 49, 0.5);
	z-index: 100;

	.dialog-content {
		position: absolute;
		box-sizing: border-box;
		padding: 1%;
		left: 15%;
		top: 21%;
		width: 70%;
		height: 60%;
		background: url("@/assets/images/commandScreen/dialog-bg.png") no-repeat;
		background-size: 100% 100%;
		z-index: 21;
	}

	.dialog-content-show {
		position: absolute;
		box-sizing: border-box;
		padding: 1%;
		left: 15%;
		top: 1%;
		width: 70%;
		height: 98%;
		background: url("@/assets/images/commandScreen/dialog-bg.png") no-repeat;
		background-size: 100% 100%;
		z-index: 21;
	}

	.listdetail {
		position: absolute;
		// box-sizing: border-box;
		// padding: 1%;
		// right: 3%;
		// top: 5%;
		width: 70%;
		// height: 50%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: rgba(8, 31, 63, 0.7);
		z-index: 21;

		.dialog-content-more {
			// position: absolute;
			// box-sizing: border-box;
			// padding: 1%;
			// left: 15%;
			// top: 21%;
			width: 100%;
			height: 100%;
			background: url("@/assets/images/overviewScreen/card-content.png") no-repeat;
			background-size: 100% 100%;
			z-index: 21;
		}

		.contont-video {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			// flex-wrap: wrap;
			margin-top: 10px;
			.footer-btn {
				padding: 20px;
				> button:first-child {
					margin-right: 40px;
				}
				> button {
					border: 1px solid #ccc;
				}
			}
			:deep(.w-e-bar) {
				color: #ffecec !important;
				background-color: transparent !important;
				svg {
					fill: #ffecec !important;
				}
				.w-e-bar-item .disabled,
				.w-e-bar-item button {
					color: #ffecec !important;
					background-color: transparent;
				}
				.w-e-bar-item .disabled:hover,
				.w-e-bar-item button:hover {
					background-color: transparent;
				}
				.w-e-bar-divider {
					display: none;
				}
				.w-e-select-list {
					background-color: #112748 !important;
				}

				.w-e-select-list ul .selected,
				.w-e-select-list ul li:hover {
					background-color: white !important;
					color: black !important;
				}
			}
			.editor {
				height: 380px !important;
				:deep(.w-e-text-container) {
					color: #ffecec !important;
					background-color: transparent !important;
					font-size: 16px !important;
				}
				:deep() {
					.w-e-hover-bar {
						background-color: #0a2249 !important;
					}
				}
			}
			// .video-list {
			// 	width: 33%;
			// 	display: flex;
			// 	align-items: center;
			// 	justify-content: center;
			// 	font-size: 15px;
			// 	margin-top: 30px;
			// 	font-weight: bold;
			// 	.no-inherit {
			// 		margin-left: 8px;
			// 	}
			// 	.upload-demo {
			// 		width: 45%;
			// 	}
			// 	:deep(.el-upload-list),
			// 	:deep(.el-upload-list__item) {
			// 		margin: 0;
			// 	}
			// 	:deep(.el-upload-list__item-info) {
			// 		width: 100%;
			// 	}
			// 	:deep(.el-button.el-button--primary.el-button--default) {
			// 		padding: 10px 15px;
			// 		height: 40px;
			// 	}

			// 	:deep(.videoupload) {
			// 		font-size: 20px;
			// 	}
			// }
		}
	}

	.dialog-content,
	.dialog-content-show,
	.dialog-content-more {
		position: relative;

		.political-outlook {
			height: 100%;
		}

		.dialog-article {
			height: 95%;
		}

		.close-icon {
			// position: absolute;
			// right: 3%;
			// top: 3%;
			cursor: pointer;
			color: #ffffff;
			font-size: 18px;
		}

		.dialog-title {
			color: #ffffff;
			font-weight: bold;
			font-size: 18px;
			font-family: "OPPOSans-Bold";
			display: flex;
			align-items: center;
			margin: 0 20px;
			padding-top: 10px;

			.title-time {
				font-size: 30px;
				color: #f34234;
				position: absolute;
				top: 3%;
				left: 50%;
				transform: translateX(-50%);
			}

			.title-img {
				width: 3%;
				height: 3%;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.title-text {
				margin-left: 1%;
				margin-right: auto;
			}
		}
	}
}

.notoDta {
	top: 73%;
	width: 12%;
	left: 44%;
	position: absolute;

	img {
		width: 40%;
		margin: 5% 30%;
	}

	p {
		color: #fff;
		font-size: 14px;
		margin: -6% 37%;
	}
}
</style>
