<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="字典键值请使用整型字符,前端会转换为Number" />
			<view style="height: .5rem;"></view>
			<u-alert type="error" description="字典数据在一个app的生命周期中只会从服务器获取一次,可以反复使用" />
			<view class="title">直接使用c-tag</view>
			<view>
				<!-- 最简单使用 -->
				<c-tag name="sys_oper_type" value="3" />
				<!-- 边框效果 -->
				<c-tag name="sys_oper_type" value="4" border />
				<!-- 绑定字典键值变量 -_-|| -->
				<c-tag name="sys_oper_type" :value="5" border />
				<!-- 可设置的css变量,默认:0 -->
				<c-tag name="sys_oper_type" value="6" border style="--margin: 0 .5rem;" />
				<!-- 使用默认插槽 -->
				<c-tag name="sys_oper_type" value="7" border style="--margin: 0 .5rem;">
					默认插槽
				</c-tag>
				<!-- 使用默认作用域插槽 -->
				<c-tag name="sys_oper_type" value="8" border style="--margin: .5rem;">
					<template #default="{ dict }">
						{{ dict }}
					</template>
				</c-tag>
				<c-tag name="sys_oper_type" value="9" border style="--margin: .5rem;">
					<template #default="{ dict }">
						当前操作:{{ dict?.label }}
					</template>
				</c-tag>
			</view>
			<view class="pre" style="border: 1px solid var(--w-main-light-2); padding: .5rem;" hover-class="w-hover" @click="doCopy(code1)">{{ code1 }}</view>


			<view class="title">获取字典数据</view>
			<view style=" font-weight: bold;">script前提</view>
			<view class="pre" style="border: 1px solid var(--w-main-light-2); padding: .5rem;" hover-class="w-hover" @click="doCopy(code2)">{{ code2 }}</view>

			<view style="margin-top: .5rem; font-weight: bold;">获取某个值的字典数据</view>
			<view>{{ dictStore.get("sys_oper_type", 3) }}</view>
			<view :class="['w-' + dictStore.get('sys_oper_type', 4)?.type]">{{ dictStore.get("sys_oper_type", 4)?.label }}
			</view>
			<view class="pre" style="border: 1px solid var(--w-main-light-2); padding: .5rem;" hover-class="w-hover" @click="doCopy(code3)">{{ code3 }}</view>

			<view style="margin-top: .5rem; font-weight: bold;">获取字典数据列表</view>
			<view><text v-for="(item,i) in dictStore.list('sys_oper_type')" :key="i" style="margin: 0 .2rem;">{{ item.value }}={{ item.label }}</text></view>
			<view class="pre" style="border: 1px solid var(--w-main-light-2); padding: .5rem;" hover-class="w-hover" @click="doCopy(code4)">{{ code4 }}</view>
			
			<view style="margin-top: .5rem; font-weight: bold;">在script中使用<br/>
			强度获取的先后顺序(在script中先获取字典,再操作字典数据)的情况下,建议使用异步方法:getAsync,listAsync
			</view>
			sys_oper_type字典中值为8的label是:{{ label }}
			<view class="pre" style="border: 1px solid var(--w-main-light-2); padding: .5rem;" hover-class="w-hover" @click="doCopy(code5)">{{ code5 }}</view>
		</view>
	</view>
</template>

<script setup>

import { ref } from 'vue';

import { doCopy } from '@/util'

import { useDictStore } from '@/store'
const dictStore = useDictStore();

const label = ref('');
//不建议
// label.value = dictStore.get('sys_oper_type',8)?.label;
//建议使用异步方法,getAsync,listAsync
dictStore.getAsync('sys_oper_type',8).then(data=>{
	console.debug(data);
	label.value = data?.label;
});

dictStore.listAsync('sys_oper_type').then(list=>{
    // list is Array
    // doSomething
})

const code1 = `<!-- 最简单使用 -->
<c-tag name="sys_oper_type" value="3" />
<!-- 边框效果 -->
<c-tag name="sys_oper_type" value="4" border/>
<!-- 绑定字典键值变量 -_-|| -->
<c-tag name="sys_oper_type" :value="5" border/>
<!-- 可设置的css变量,默认:0 -->
<c-tag name="sys_oper_type" value="6" border style="--margin: 0 .5rem;"/>
<!-- 使用默认插槽 -->
<c-tag name="sys_oper_type" value="7" border style="--margin: 0 .5rem;">
	默认插槽
</c-tag>
<!-- 使用默认作用域插槽 -->
<c-tag name="sys_oper_type" value="8" border style="--margin: .5rem;">`;

const code2 = `import { useDictStore } from '@/store'
const dictStore = useDictStore();`;

const code3 = `<view>{{ dictStore.get("sys_oper_type",3) }}</view>
<view :class="['w-'+dictStore.get('sys_oper_type',4)?.type]">{{ dictStore.get("sys_oper_type",4)?.label }}</view>`;

const code4=`<view><text v-for="(item,i) in dictStore.list('sys_oper_type')" :key="i" style="margin: 0 .2rem;">{{ item.value }}={{ item.label }}</text></view>`;

const code5=`const label = ref('');
dictStore.getAsync('sys_oper_type',8).then(data=>{
	label.value = data?.label;
});
dictStore.listAsync('sys_oper_type').then(list=>{
    // list is Array
    // doSomething
})
`;

</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>