<template>
	<div class="app-container" v-loading="loading">
		<!--顶部-->
		<div class="flex align-center mb-20">
			<el-icon @click="proxy.$router.go(-1)" class="mr-6 cursor">
				<ArrowLeftBold />
			</el-icon>
			{{ data && data.scriptTime }}
		</div>
		<el-row :gutter="20" v-if="!loading && data && (type === 'video' ? data.videoScript : data.marketScript)" >
			<el-col :xs="24" :sm="24" :md="24" :lg="24">
				<el-card class="update-log">
					<template v-slot:header>
						<div class="clearfix">
							<span>{{ type === 'video' ? '短视频脚本' : '营销文案' }}	{{ data && data.matchCode }}</span>
						</div>
					</template>
					<div class="body">
						<MdPreview 
							ref="editorRef" 
							editorId="preview-only" 
							:modelValue="type === 'video' ? data.videoScript : data.marketScript"
							class="maxkb-md" 
						/>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<lz-page-empty 
			v-else 
			:type="'4'"
			:text1="type === 'video' ? '暂无短视频脚本' : '暂无营销文案'"
			text2="请稍后再试..."
		>
			<lz-svg-icon icon-class="empty1" style="font-size: 312px;"/>
		</lz-page-empty>
	</div>
</template>

<script setup name="videoScriptDetail">
import { scriptDetail } from '@/api/tc/videoScript'
import MdPreview from '@/components/Markdown/MdPreview'
const route = useRoute()

let { proxy } = getCurrentInstance()

const editorRef = ref(null)
const id = ref(0)
const type = ref('') // video || market
const data = ref({})
const loading = ref(false)

function getDetail() {
	loading.value = true
	scriptDetail(id.value).then(res => {
		data.value = res.data
	}).finally(() => {
		loading.value = false
	})
}

onMounted(() => {
	if (route.query.id && route.query.type) {
		id.value = route.query.id
		type.value = route.query.type
		getDetail()
	}
})


</script>
