<template>
	<view class="w-body">
		<w-navbar fixed left-home left-back title="自定义全局变量" class="navbar"></w-navbar>
		<view style="padding:1rem;">
			<view>自定义全局变量<text style="font-size:1.5rem;font-weight: bold;">$w</text>,在模板和js中可以直接使用</view>
			<view style="margin-top: 1rem;" class="title">继承$u:</view>
			<view>uView-plus中的api也可以使用$w来使用</view>
			<view class="border">
				<view>节流: throttle(func, wait = 500, immediate = true)</view>
				<view>防抖: debounce(func, wait = 500, immediate = false)</view>
				<view>对象深度克隆: deepClone(object = {})</view>
				<view>对象深度合并: deepMerge(target = {}, source = {})</view>
				<view>链式读取对象属性: getProperty(object, key)</view>
				<view>链式设置对象属性: setProperty(object, key, value)</view>
				<view>数组乱序: randomArray(array)</view>
				<view>唯一标识符: guid(length = 32, firstU = true, radix = 62)</view>
				<view>...</view>
				<view hover-class="w-hover" @click="$w.copy('https://uiadmin.net/uview-plus/js/intro.html')">https://uiadmin.net/uview-plus/js/intro.html</view>
			</view>
			<view class="title">安全区域:</view>
			<view class="border">
			$w.left:{{$w.left}} | 
			$w.top:{{$w.top}} | 
			$w.right:{{$w.right}} | 
			$w.bottom:{{$w.bottom}} | 
			$w.statusBarHeight:{{ $w.statusBarHeight }}
			</view>
			
			<view class="title">路由:</view>
			<view class="border">
				<view hover-class="w-hover" @tap="$w.back()">$w.back()</view>
				<view hover-class="w-hover" @tap="$w.back(2)">$w.back(2)</view>
				<view hover-class="w-hover" @tap="$w.to('/pages/demo/demo1')">$w.to('/pages/demo/demo1')</view>
			</view>
			
			<view class="title">uni:</view>
			<view class="border">
				<view>$w.uni:方便在模板中直接调用uni相关方法</view>
				<view>uni.$w:方便在script中直接调用$w相关方法</view>
			</view>
			
			<view class="title">消息:</view>
			<view class="border">
				<view class="w-flex">$w.msg(title)<u-button size="mini" text="普通消息" @click="$w.msg('普通消息')"></u-button></view>
				<view class="w-flex">$w.ok(title)<u-button size="mini" text="成功消息" @click="$w.ok('成功消息')"></u-button></view>
				<view class="w-flex">$w.err(title)<u-button size="mini" text="错误消息" @click="$w.err('错误消息')"></u-button></view>
				<view class="w-flex">$w.hide()<u-button size="mini" text="隐藏消息" @click="$w.hide()"></u-button></view>
				<view class="w-flex-column">$w.alert(content,[title]) :: Promise
					<u-button size="mini" text="系统提示" @click="async()=>{ await $w.alert('系统提示内容');$w.msg('提示关闭了');}"></u-button>
				</view>
				<view class="w-flex-column">$w.confirm(content,[title]) :: Promise
					<u-button size="mini" text="确认提示" @click="()=>{ $w.confirm('确认提示内容').then(()=>{$w.msg('点击了确定');}).catch(()=>{$w.msg('点击了取消');})}"></u-button>
				</view>
				<view class="w-flex-column">$w.prompt(content,[title]) :: Promise
					<u-button size="mini" text="输入提示" @click="()=>{ $w.prompt('请输入内容').then((value)=>{$w.msg('输入:'+value);}).catch(()=>{$w.msg('点击了取消');})}"></u-button>
				</view>
			</view>
			
			<view class="title">其他:</view>
			<view class="border">
				<view class="b">随机范围内的整数</view>
				<view class="w-flex">$w.random(1,100)={{ num1 }}<u-button size="mini" text="random(1,100)" @click="num1=$w.random(1,100)"></u-button></view>
				<view class="b">将文本内容复制到剪贴板</view>
				<view class="w-flex"><text style="width: 25em;">$w.copy('要复制的文本')</text><u-button size="mini" text="复制" @click="$w.copy('要复制的文本')"></u-button></view>
				<view class="b">延迟|休眠</view>
				<view class="w-flex"><text style="width: 25em;">$w.sleep(5000).then(()=>{$w.msg('5秒以后')})</text><u-button size="mini" text="5秒以后" @click="$w.sleep(5000).then(()=>{$w.msg('5秒以后')})"></u-button></view>
				<view class="b">经纬度距离与显示</view>
				<view>橘子洲头:112.966764,28.171596</view>
				<view>天安门:116.404269,39.91405</view>
				<view>$w.distance(lng1,lat1, lng2, lat2)</view>
				<view>{{ $w.distance(112.966764,28.171596,116.404269,39.91405) }}</view>
				<view>$w.distanceShow(num)</view>
				<view>{{ $w.distanceShow($w.distance(112.966764,28.171596,116.404269,39.91405)) }}</view>
			</view>
			
			<view class="title">prototype(原生方法):</view>
			<view class="border">
				<view class="b">Date.prototype.clone()</view>
				<view>d=new Date().clone(); 复制一个新的日期对象</view>
				<view class="b">Date.prototype.format()</view>
				<view>d=new Date()</view>
				<view>d.format() : {{d.format()}}</view>
				<view>d.format('yyyy年MM月dd日HH时mm分ss秒S毫秒') : {{d.format('yyyy年MM月dd日HH时mm分ss秒S毫秒')}}</view>
				
				<view class="b">String.prototype.toDate()</view>
				<view>'2011-11-12'.toDate() : {{'2011-11-12'.toDate()}}</view>
				<view>'2011-11-12 17:59'.toDate('yyyy-MM-dd HH:mm') : {{'2011-11-12 17:59'.toDate('yyyy-MM-dd HH:mm')}}</view>
				
				<view class="b">Number.prototype.toDate()</view>
				<view>结果.format("yyyy-MM-dd HH:mm")</view>
				<view>Number(0).toDate() : {{Number(0).toDate().format("yyyy-MM-dd HH:mm")}}</view>
				<view>d.getTime().toDate() : {{d.getTime().toDate().format("yyyy-MM-dd HH:mm")}}</view>
				
				<view class="b">Number.prototype.toChina()</view>
				<view>Number(0).toChina() : {{Number(0).toChina()}}</view>
				<view>Number(10).toChina() : {{Number(10).toChina()}}</view>
				<view>Number(12).toChina() : {{Number(12).toChina()}}</view>
				<view>Number(123).toChina() : {{Number(123).toChina()}}</view>
				<view>Number(1002005).toChina() : {{Number(10020).toChina()}}</view>
				<view>Number(1234567890123).toChina() : {{Number(1234567890123).toChina()}}</view>

				<view class="b">String.prototype.cny()</view>
				<view class="b">Number.prototype.cny()</view>
				<view>'0'.cny() : {{'0'.cny()}}</view>
				<view>Number(0).cny() : {{Number(0).cny()}}</view>
				<view>'10'.cny() : {{'10'.cny()}}</view>
				<view>Number(10).cny() : {{Number(10).cny()}}</view>
				<view>'10.23'.cny() : {{'10.23'.cny()}}</view>
				<view>'100002356'.cny() : {{'100002356'.cny()}}</view>
				<view>Number(123456789.456).cny() : {{Number(123456789.456).cny()}}</view>

				<view class="b">Number.prototype.format()</view>
				<view>Number(0).format() : {{Number(0).format()}}</view>
				<view>Number(0).format(1) : {{Number(0).format(1)}}</view>
				<view>Number(0).format(0) : {{Number(0).format(0)}}</view>
				<view>Number(23456789.567).format() : {{Number(23456789.567).format()}}</view>
				<view>Number(23456789.567).format(1) : {{Number(23456789.567).format(1)}}</view>
				<view>Number(23456789.567).format(1,'_') : {{Number(23456789.567).format(1,'_')}}</view>
				
				<view class="b">Number.prototype.toTime</view>
				<view>Number(0).toTime() : {{Number(0).toTime()}}</view>
				<view>Number(10).toTime() : {{Number(10).toTime()}}</view>
				<view>Number(100).toTime() : {{Number(100).toTime()}}</view>
				<view>Number(1000).toTime() : {{Number(1000).toTime()}}</view>
				<view>Number(10000).toTime() : {{Number(10000).toTime()}}</view>
				
				<view class="b">String.prototype.toTime</view>
				<view>'00:00:00'.toTime() : {{'00:00:00'.toTime()}}</view>
				<view>'01:02:03'.toTime() : {{'01:02:03'.toTime()}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	const d=new Date();
	const num1 = ref(uni.$w.random(1,100));
</script>

<style lang="scss" scoped>
	.w-body {
		.title {
			font-size:1rem;
			color:var(--w-main-dark-1);
			font-weight: bold;
		}
		.border {
			font-size:0.8rem; border:solid 1px var(--w-main); padding: 1rem; margin: 1rem 0;
			& > .b:first-child{
				padding-top: 0;
			}
			view {
				padding: .5rem;
				line-height: 1.6;
			}
			.b {
				font-weight: bold;
				padding: 1rem 0 .1rem;
			}
		}
		
	}
	.hover {
		background-color: var(--w-bg-dark);
	}
</style>