<script setup>

import {inject, ref} from "vue";

const popupState = inject("$popupState", null)
const emits = defineEmits(["change", "update:modelValue"])
const visible = ref(false)

const changeVisible = function () {
	visible.value = !visible.value

	if (popupState != null) {
		popupState.ctx.moreOptionsVisible = visible.value
	} else {
		window.X_VIEW_CTX.moreOptionsVisible = visible.value
	}
	emits("change", visible.value)
	emits("update:modelValue", visible.value)
}

</script>

<template>
	<a href="" style="font-weight: normal" @click.prevent="changeVisible()" class="flex items-center gap-1">
		<slot><span v-if="!visible">更多选项</span><span v-if="visible">收起选项</span></slot>
		<i class="pi" :class="{'pi-angle-down':!visible, 'pi-angle-up':visible}"></i> </a>
</template>

<style scoped>

</style>