<template>
	<view class="w-body">
		<w-navbar fixed left-home left-back title="用户组件使用示例" class="navbar"></w-navbar>
		<view style="padding:.5rem;">
			<u-alert type="error" description="用户数据在一个app的生命周期中只会从服务器获取一次,可以反复使用" />

			<view class="title">简单使用</view>
			<view>
				<c-user id="1" />
			</view>

			<view class="title">控制大小</view>
			<view>
				<c-user id="1" style="--rem:20px;" />
			</view>

			<view class="title">不显示昵称</view>
			<view>
				<c-user id="1" :name="false" />
			</view>

			<view class="title">不显示头像</view>
			<view>
				<c-user id="1" :avatar="false" />
			</view>

			<view class="title">横向显示</view>
			<view>
				<c-user id="1" row />
			</view>

			<view class="title">靠左显示</view>
			<view style="justify-content: flex-start; display: flex;">
				<c-user id="1" />
			</view>

			<view class="title">单击事件</view>
			<view>
				<c-user id="1" @click="(item) => { $w.msg('单击:' + item.nickName) }" />
			</view>

			<view class="title">关闭按钮</view>
			<view style="display: flex;">
				<c-user id="1" closeable @close="(item) => { $w.msg('关闭:' + item.nickName) }" />
			</view>

			<view class="title">默认作用域插槽</view>
			<view style="display: flex;">
				<c-user id="1" closeable @close="(item) => { $w.msg('关闭:' + item.nickName) }">
					<template #default="{ user }">
						{{ user }}
					</template>
				</c-user>
			</view>


			<view class="pre" style="border: 1px solid var(--w-main-light-2); padding: .5rem; margin-top: 1rem;" hover-class="w-hover"
				@click="doCopy(code1)">{{ code1 }}</view>


		</view>
	</view>
</template>

<script setup>

import { doCopy } from '@/util'

const code1 = `<view class="title">简单使用</view>
<view>
	<c-user id="1" />
</view>

<view class="title">控制大小</view>
<view>
	<c-user id="1" style="--rem:20px;" />
</view>	

<view class="title">不显示昵称</view>
<view>
	<c-user id="1" :name="false" />
</view>	

<view class="title">不显示头像</view>
<view>
	<c-user id="1" :avatar="false" />
</view>	

<view class="title">横向显示</view>
<view>
	<c-user id="1" row />
</view>

<view class="title">靠左显示</view>
<view style="justify-content: flex-start; display: flex;">
	<c-user id="1" />
</view>

<view class="title">单击事件</view>
<view>
	<c-user id="1" @click="(item)=>{$w.msg('单击:'+item.nickName)}" />
</view>

<view class="title">关闭按钮</view>
<view style="display: flex;">
	<c-user id="1" closeable @close="(item)=>{$w.msg('关闭:'+item.nickName)}" />
</view>

<view class="title">默认作用域插槽</view>
<view style="display: flex;">
	<c-user id="1" closeable @close="(item)=>{$w.msg('关闭:'+item.nickName)}">
			<template #default="{user}">
				{{ user }}
			</template>
	</c-user>
</view>`;


</script>

<style lang="scss" scoped>
.w-body {
	font-size: .8rem;

	.title {
		padding: 1rem .2rem;
		font-size: 1rem;
		color: var(--w-main-dark-1);
		font-weight: bold;
	}


}
</style>