// 查询条件展开收起
<template>
	<!-- 条件查询 -->
	<!-- isAFold ? '展开' : '收起' -->
	<div :class="style['content']">
		<div>{{ label }}</div>
		<a @click="aFoldButtonClick" v-if="isShowAFold">
			{{
				isAFold
					? getI18n('common', 'Common_UpOutlined')
					: getI18n('common', 'Common_DownOutlined')
			}}
			<up-outlined v-if="isAFold" />
			<down-outlined v-else />
		</a>
	</div>
	<div>
		<a-divider style="height: 2px" v-if="isAFold" />
		<slot v-else></slot>
	</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import { DownOutlined, UpOutlined } from '@ant-design/icons-vue'
import style from './index.module.less'
import { getI18n } from '@/utils/i18n'
// 按钮操作
function buttonOperation() {
	let isAFold = ref<boolean>(false) // 是否展开收起
	// 展开收起按钮被点击
	function aFoldButtonClick() {
		isAFold.value = !isAFold.value
	}
	return {
		isAFold,
		aFoldButtonClick,
	}
}
export default defineComponent({
	name: 'BaseSearchLabel',
	components: {
		DownOutlined,
		UpOutlined,
	},
	props: {
		// 是否显示展开收起
		isShowAFold: {
			type: Boolean,
			default: true,
		},
		// 文字
		label: {
			type: String,
			required: false,
			default: '', // getI18n('common', 'Common_SearchLabel'), // 条件查询
		},
	},
	setup() {
		let { isAFold, aFoldButtonClick } = buttonOperation()
		return {
			aFoldButtonClick,
			isAFold,
			style,
			getI18n,
		}
	},
})
</script>