<template>
	<section class="panel">
		<section class="header">
			<el-icon size="24" title="切换设备类型" :class="{active: data.config.isMobile}" @click="toggleDevice">
				<component :is="'pi-icon-qie-huan'"/>
			</el-icon>
			<el-icon size="22" title="暂存" @click="tempSave">
				<component :is="'pi-icon-zan-cun'"/>
			</el-icon>
			<el-icon size="24" title="清空" @click="empty">
				<component :is="'el-icon-delete'"/>
			</el-icon>
			<el-icon size="24" title="复制代码" @click="copyCode">
				<component :is="'el-icon-document'"/>
			</el-icon>
			<el-icon size="24" title="复制代码" @click="downFile">
				<component :is="'el-icon-download'"/>
			</el-icon>
			<el-icon size="24" title="复制JSON" @click="copyJson">
				<component :is="'pi-icon-json'"/>
			</el-icon>
		</section>
		<el-scrollbar style="height: calc(100% - 30px);" :class="{mobile: data.config.isMobile}">
			<el-form class="h100 pad10" :label-position="data.config.labelPosition"
					 :label-width="data.config.labelWidth" :size="data.config.size" :disabled="data.config.disabled">
				<drag :data="data" name="page" :field="field"/>
			</el-form>
		</el-scrollbar>
	</section>
</template>

<script setup>
import {getCurrentInstance, ref} from "vue"
import drag from "./drag.vue"
import tools from "@/utils/tools"
import {ElMessageBox} from "element-plus"
import {useI18n} from "vue-i18n"
import FormBuild from "./formBuild"
import api from "@/api/index.js";

const props = defineProps({
	data: {type: FormBuild, default: []},
	field: {type: Object, default: {}}
})
const {t} = useI18n()
const {proxy} = getCurrentInstance()

function toggleDevice() {
	props.data.config.isMobile = !props.data.config.isMobile
}

function tempSave() {
	tools.data.set("FORM-FIELDS", props.data.fields)
	tools.data.set("FORM-CONFIG", props.data.config)
	proxy.$message.success("保存成功")
}

function empty() {
	ElMessageBox.confirm("确定要清空所有表单数据吗", t('system.warning'), {
		confirmButtonText: t('system.ok'), cancelButtonText: t('system.cancel'), type: 'warning'
	}).then(() => {
		tools.data.remove("FORM-FIELDS")
		tools.data.remove("FORM-CONFIG")
		props.data.restData()
		proxy.$message.success("清空成功")
	}).catch(() => {
	})
}

function copyJson() {
	navigator.clipboard.writeText(JSON.stringify({
		fields: props.data.fields,
		config: props.data.config
	}))
	proxy.$message.success("复制成功")
}

async function copyCode() {
	const res = await api.tools.form.build({
		fields: props.data.fields,
		config: props.data.config
	})
	navigator.clipboard.writeText(res.data['form.vue'])
	proxy.$message.success("复制成功")
}

async function downFile() {
	const res = await api.tools.form.build({
		fields: props.data.fields,
		config: props.data.config
	})
	await saveFile(res.data['form.vue'])
}

async function saveFile(content, filename = 'form.vue') {
	const blob = new Blob([content], {type: 'text/plain;charset=utf-8'})
	const url = URL.createObjectURL(blob)
	const link = document.createElement('a')
	link.href = url
	link.download = filename
	link.click()
	URL.revokeObjectURL(url)
}
</script>

<style lang="scss" scoped>
.panel {
	flex: 1;
	user-select: none;
}

::-webkit-scrollbar {
	display: none;
}

.h100 {
	height: 100%;
}

.pad10 {
	padding: 10px;
}

.mobile {
	width: 414px;
	height: 736px !important;
	border: 1px solid var(--el-border-color);
	border-radius: 5px;
	margin: 20px auto;
}

:deep(.el-scrollbar__view) {
	height: 100%;
}

.header {
	display: flex;
	align-items: center;
	background: #f6f7ff;
	padding: 2px 10px;
	gap: 8px;
	border-radius: 3px;
	justify-content: end;

	.active {
		color: var(--el-color-primary);
	}

	i {
		cursor: pointer;
		color: #666666;
		padding: 5px;
	}

	i:hover {
		background-color: #c9ced3;
		border-radius: 50%;
		opacity: 0.6;
	}
}
</style>
