<script setup>
import PopupLayout from "@/layouts/PopupLayout.vue";
import ctxRef from "@/utils/ctx_ref.js";
import Context from "./setCodePopup.js"
import PostForm from "@/components/form/PostForm.vue";
import TTextarea from "@/components/ui/TTextarea.vue";
import TButton from "@/components/ui/TButton.vue";
import NavButtons from "@/components/common/NavButtons.vue";
import NavButton from "@/components/common/NavButton.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<PopupLayout>
		<header>规则集 “{{ ctx.setName }}” 代码</header>

		<PostForm action="$">
			<TTextarea rows="18" class="w-full" v-model="ctx.code"></TTextarea>
			<p class="comment">你可以将此段代码复制并在创建规则集的时候使用。</p>

			<NavButtons>
				<NavButton @click.prevent="ctx.copy">
					<template v-if="!ctx.isCopied"><i class="pi pi-copy"></i>复制到剪切板</template>
					<template v-if="ctx.isCopied"><i class="pi pi-check"></i>已复制</template>
				</NavButton>
				<NavButton @click.prevent="ctx.closePopup"><i class="pi pi-remove"></i>关闭窗口</NavButton>
			</NavButtons>
		</PostForm>
	</PopupLayout>
</template>

<style lang="postcss" scoped>
</style>