<template>
	<view class="u-page">
		<view class="u-page__item">
			<text class="u-page__item__title">基础功能</text>
			<up-collapse @change="change" @close="close" @open="open">
				<up-collapse-item title="文档指南" name="Docs guide">
					<text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text>
				</up-collapse-item>
				<up-collapse-item title="组件全面" name="Variety components">
					<text class="u-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text>
				</up-collapse-item>
				<up-collapse-item title="众多利器" name="Numerous tools" :showRight="false">
					<text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
				</up-collapse-item>
			</up-collapse>
		</view>
		<view class="u-page__item">
			<text class="u-page__item__title">展开和禁用</text>
			<up-collapse :value="['2']">
				<up-collapse-item title="文档指南">
					<text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text>
				</up-collapse-item>
				<up-collapse-item disabled title="组件全面">
					<text class="u-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text>
				</up-collapse-item>
				<up-collapse-item name="2" title="众多利器">
					<text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
				</up-collapse-item>
			</up-collapse>
		</view>
		<view class="u-page__item">
			<text class="u-page__item__title">手风琴模式</text>
			<up-collapse accordion>
				<up-collapse-item title="文档指南">
					<text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text>
				</up-collapse-item>
				<up-collapse-item title="组件全面">
					<text class="u-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text>
				</up-collapse-item>
				<up-collapse-item title="众多利器">
					<text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
				</up-collapse-item>
			</up-collapse>
		</view>
		<view class="u-page__item">
			<text class="u-page__item__title">移除下划线</text>
			<up-collapse accordion :border="false">
				<up-collapse-item title="文档指南">
					<text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text>
				</up-collapse-item>
				<up-collapse-item title="组件全面">
					<text class="u-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text>
				</up-collapse-item>
				<up-collapse-item title="众多利器">
					<text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
				</up-collapse-item>
			</up-collapse>
		</view>
		<!-- 微信小程序不支持，因为微信中不支持 <slot #title slot="title" />的写法 -->
		<view class="u-page__item">
			<text class="u-page__item__title">自定义标题和内容</text>
			<up-collapse accordion>
				<up-collapse-item>
					<template #title>
						<text class="u-page__item__title__slot-title">文档指南</text>
					</template>
					<text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text>
				</up-collapse-item>
				<!-- <up-collapse-item
					:isLink="false"
				>
					<template #title>
						<text class="u-page__item__title__slot-title">文档指南</text>
					</template>
					<text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text>
				</up-collapse-item> -->
				<up-collapse-item title="组件全面">
					<template v-slot:icon>
						<up-icon name="tags-fill" size="20"></up-icon>
					</template>
					<text class="u-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text>
				</up-collapse-item>
				<up-collapse-item title="众多利器" icon="tags-fill">
					<template v-slot:right-icon>
						<text class="u-page__item__title__slot-title">10</text>
					</template>
					<text
						class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
				</up-collapse-item>
			</up-collapse>
		</view>
		<up-gap height="50"></up-gap>
	</view>
</template>

<script setup>
const open = (e) => {
	// console.log('open', e)
}

const close = (e) => {
	// console.log('close', e)
}

const change = (e) => {
	// console.log('change', e)
}
</script>

<style lang="scss">
	.u-page {
		padding: 0;

		&__item {

			&__title {
				color: $u-tips-color;
				background-color: $u-bg-color;
				padding: 15px;
				font-size: 15px;

				&__slot-title {
					color: $u-primary;
					font-size: 14px;
				}
			}
		}
	}

	.u-collapse-content {
		color: $u-tips-color;
		font-size: 14px;
	}
</style>