<template>
	<el-collapse accordion expand-icon-position="left" style="margin-top: 30px" v-if="dataTranslator.titleEN &&
		dataTranslator.titleCN &&
		dataTranslator.contentEN &&
		dataTranslator.contentCN
	">
		<el-collapse-item name="1">
			<template #title="{ isActive }">
				<div :class="['title-wrapper', { 'is-active': isActive }]">
					<text style="font-size: 16px; font-weight: bold">翻译</text>
					<img src="/@/assets/icon_translate.png" class="icon_translate" />
				</div>
			</template>
			<div>
				<div class="translate_wrapper">
					<div class="translate_item">
						<text>资讯原文</text>
						<el-input v-model="dataTranslator.titleEN" placeholder-class="input-placeholder" disabled />
					</div>

					<div class="translate_item">
						<text>参考消息译文</text>
						<el-input v-model="dataTranslator.titleCN" placeholder-class="input-placeholder" disabled />
					</div>
				</div>
				<el-splitter layout="horizontal">
					<el-splitter-panel collapsible>
						<div class="demo-panel">
							<div v-html="dataTranslator.contentEN"></div>
						</div>
					</el-splitter-panel>
					<el-splitter-panel collapsible>
						<div class="demo-panel" v-html="dataTranslator.contentCN"></div>
					</el-splitter-panel>
				</el-splitter>
			</div>
		</el-collapse-item>
	</el-collapse>
</template>

<script setup lang="ts">
import { onBeforeMount, onMounted, reactive, ref, watch } from 'vue';
import { getTranslator } from '/@/api/api';
import { isMobileByWidth } from '/@/utils/Utils'

const props = defineProps({
	infoData: {
		type: Object,
		default: () => { },
	},
});

watch(
	() => props.infoData,
	(newValue) => {
		console.log('🚀 ~ newValue:', newValue);
		getData();
	},
	{ deep: true }
);

const dataTranslator = ref({});
async function getData() {
	let { code, data } = await getTranslator(props.infoData);
	if (code == 200) {
		dataTranslator.value = data;
	}
}

onBeforeMount(() => { });
</script>

<style scoped lang="scss">
.icon_translate {
	width: 18px;
	height: 18px;
	margin-left: 5px;
}

.title-wrapper {
	display: flex;
	align-items: center;
}

.demo-panel {
	// display: flex;
	// align-items: center;
	// justify-content: center;
	//border: 1px solid #ccc;
	height: 300px;
}

.translate_wrapper {
	display: flex;
	width: 100%;

	.translate_item {
		display: flex;
		flex-direction: column;
		width: 50%;

		text {
			font-size: 14px;
			font-weight: bold;
		}
	}
}
</style>
