<template>
	<ciy-header title="Demo示例"></ciy-header>
	<view>
		<view class="item ok" v-if="last" @tap="gourl" :data-url="last.url"><text class="kbd">最近</text> {{last.title}}
		</view>
		<view class="item" v-for="(item,index) in demos" :key="index">
			<view v-if="item.childs" @tap="chgshow(index)" class="txt-wb cursor-p ok">{{item.title}}</view>
			<view v-else class="ok" @tap="gourl" :data-url="item.url">{{item.title}}</view>
			<template v-if="item.childs && item.show">
				<view class="item" :class="{ok:citm.ok}" v-for="(citm,cidx) in item.childs" :key="cidx" @tap="godemo(citm)">
					{{citm.title}}
				</view>
			</template>
		</view>
		<view class="txt-center">
			<text style="color:var(--dag5)">组件上不能添加class、style属性</text>
		</view>
		<view style="height:1em;"></view>
	</view>
</template>

<style>
	.item {
		margin: 2em;
		color: var(--txt3);
	}

	.ok {
		color: var(--txt9);
	}
</style>

<script>
	export default {
		data() {
			return {
				last: null,
				demos: [{
					title: '功能试验页 demo/test.vue',
					url: 'test'
				}, {
					title: '首页',
					url: '/pages/main/index'
				}, {
					title: '表单组件',
					childs: [{
						ok: true,
						url: 'comform/define',
						title: '通用组件定义'
					}, {
						ok: true,
						url: 'comform/input',
						title: '输入框'
					}, {
						ok: true,
						url: 'comform/select',
						title: '单选下拉选择框'
					}, {
						ok: true,
						url: 'comform/selbool',
						title: '开关框'
					}, {
						ok: true,
						url: 'comform/selcas',
						title: '联级选择框'
					}, {
						ok: true,
						url: 'comform/selpage',
						title: '独立页选择框'
					}, {
						ok: true,
						url: 'comform/checkbox',
						title: '复选框'
					}, {
						ok: true,
						url: 'comform/radiobox',
						title: '单选框'
					}, {
						ok: true,
						url: 'comform/calendar',
						title: '日历选择器'
					}, {
						ok: true,
						url: 'comform/inputdatetime',
						title: '时间日期选择框'
					}, {
						ok: true,
						url: 'comform/inputdaterange',
						title: '时间日期区间选择框'
					}, {
						ok: true,
						url: 'comform/inputtimepoint',
						title: '时间选择框'
					}, {
						ok: true,
						url: 'comform/inputbet',
						title: '倍数数字输入框'
					}, {
						ok: true,
						url: 'comform/inputnumber',
						title: '数量加减框'
					}, {
						ok: true,
						url: 'comform/slider',
						title: '单点拖动选择数字 -_-'
					}, {
						url: 'comform/slider2',
						title: '两点拖动选择数字范围'
					}, {
						ok: true,
						url: 'comform/ratestar',
						title: '评价星级选择'
					}, {
						url: 'comform/colorpick',
						title: '颜色选择/带透明度'
					}, {
						url: 'comform/transfer',
						title: '左右穿梭多选'
					}, {
						ok: true,
						url: 'comform/checkitem',
						title: '选择块/圆块/方块'
					}, {
						ok: true,
						url: 'comform/switch',
						title: '开关选择块'
					}, {
						ok: true,
						url: 'comform/textarea',
						title: '多行文本框'
					}, {
						ok: true,
						url: 'comform/inputcyc',
						title: '执行周期输入框'
					}, {
						ok: true,
						url: 'comform/inputunitedit',
						title: '三级单位编辑'
					}, {
						url: 'comform/inputunitnum',
						title: '三级单位数量输入'
					}, {
						url: 'comform/mdedit',
						title: 'MarkDown编辑器'
					}, {
						ok: true,
						url: 'comform/handsign',
						title: '-_- 手写输入板'
					}, {
						ok: true,
						url: 'comform/capcode',
						title: '验证码组件'
					}, {
						url: 'comform/temptext',
						title: '模版填写录入' //input定长框、switch框、select定长框、textarea定高整行
					}, {
						url: 'comform/inputcar',
						title: '车牌录入'
					}, {
						ok: true,
						url: 'comform/upload',
						title: '图片多选器'
					}, {
						ok: true,
						url: 'comform/selmap',
						title: '地图选择器'
					}]
				}, {
					title: '页面组件',
					childs: [{
						ok: true,
						url: 'comview/header',
						title: '标题栏组件 header'
					}, {
						ok: true,
						url: 'comview/tabbar',
						title: '底部导航栏组件 tabbar'
					}, {
						ok: true,
						url: 'comview/alert',
						title: '弹窗组件 alert'
					}, {
						ok: true,
						url: 'comview/toast',
						title: '提示组件 toast'
					}, {
						ok: true,
						url: 'comview/auth',
						title: '注册登录组件 auth'
					}, {
						ok: true,
						url: 'comview/svgimg',
						title: '图片svg组件'
					}, {
						url: 'comview/showmsg',
						title: '上叠多弹框/右下多弹框'
					}, {
						ok: true,
						url: 'comview/swipelist',
						title: '列表布局'
					}, {
						ok: true,
						url: 'comview/gesture',
						title: '手势组件'
					}, {
						ok: true,
						url: 'comview/markdown',
						title: 'MarkDown显示'
					}, {
						ok: true,
						url: 'comview/query',
						title: '多搜索项栏'
					}, {
						ok: true,
						url: 'comview/searchbar',
						title: '文字搜索栏'
					}, {
						ok: true,
						url: 'comview/segment',
						title: '分类切换'
					}, {
						url: 'comview/noticebar',
						title: '通告栏/文字跑马灯'
					}, {
						ok: true,
						url: 'comview/popmenu',
						title: '上拉弹出菜单'
					}, {
						ok: true,
						url: 'comview/swiper',
						title: '-_- 轮播图容器'
					}, {
						url: 'comview/timeline',
						title: '时间线组件'
					}, {
						url: 'comview/steps',
						title: '步骤组件'
					}, {
						ok: true,
						url: 'comview/textmore',
						title: '内容部分隐藏/点击显示'
						// }, {
						// 	url: 'comview/collapse',
						// 	title: '可折叠面板'
					}, {
						url: 'comview/fab',
						title: '浮动按钮/多个弹出/加号漂浮'
					}, {
						ok: true,
						url: 'comview/listend',
						title: '列表底部显示'
					}, {
						ok: true,
						url: 'comview/ani',
						title: '简易动画组件'
					}, {
						ok: true,
						url: 'comview/aniheight',
						title: '高度动画组件'
					}, {
						ok: true,
						url: 'comview/anipop',
						title: '上下左右弹出容器动画'
					}, {
						url: 'comview/aniflyto',
						title: '抛物线飞到动画'
					}, {
						url: 'comview/dropsort',
						title: '拖拽排序'
					}, {
						url: 'comview/showmap',
						title: '地图显示/单点/多点/线段/面积'
					}, {
						ok: true,
						url: 'comview/showimgs',
						title: '多图显示'
					}, {
						ok: true,
						url: 'comview/cameraocr',
						title: '实时OCR识别'
					}, {
						//ok: true,
						url: 'comview/cameraqrcode',
						title: '实时扫码'
					}, {
						ok: true,
						url: 'comview/shownum',
						title: '数字动效显示'
					}, {
						ok: true,
						url: 'comview/showemoney',
						title: '金额显示'
					}, {
						url: 'comview/qrcode',
						title: '生成二维码图片'
					}, {
						url: 'comview/barcode',
						title: '生成条形码图片'
					}, {
						url: 'comview/advposter',
						title: '生成分享海报图片'
					}, {
						ok: true,
						url: 'comview/movable',
						title: '可拖动的容器'
					}, {
						ok: true,
						url: 'comview/audio',
						title: '音乐播放器'
					}, {
						ok: true,
						url: 'comview/audio?bg=1',
						title: '背景音乐播放器'
					}, {
						url: 'comview/btreader',
						title: '蓝牙连接状态'
					}]
				}, {
					title: 'CSS样式',
					childs: [{
						ok: true,
						url: 'css/cssdemo',
						title: '通用CSS示例'
					}, {
						ok: true,
						url: 'css/tailwind',
						title: 'Tailwind CSS'
					}, {
						ok: true,
						url: 'css/zindex',
						title: 'z-index层叠关系'
					}, {
						ok: true,
						url: 'css/pageflex',
						title: '页面flex布局示例'
					}, {
						ok: true,
						url: 'css/grid',
						title: '-_- Grid布局示例'
					}, {
						ok: true,
						url: 'css/waterfall',
						title: '瀑布流'
					}, {
						ok: true,
						url: 'css/skeleton',
						title: '骨架屏'
					}, {
						ok: true,
						url: 'css/chart_pie',
						title: '图表/饼图'
					}]
				}, {
					title: '常用页面',
					childs: [{
						ok: true,
						url: 'curd/me',
						title: '我的页'
					}, {
						ok: true,
						url: 'curd/demo_list', //demo_edit
						title: '列表删除页/编辑页' //复杂功能，搜索、列表、删除。添加、编辑。
					}, {
						url: 'curd/demo_single',
						title: '增删改查/选择单页' //搜索、列表、点击直接修改、添加、选择。
					}, {
						url: 'curd/prod_list', //prod_info
						title: '商品列表页/下单页' //顶部筛选/分类导航，商品瀑布列表。商品详情多SKU下单/加购物车。
					}, {
						url: 'curd/order_list', //order_refund,order_info
						title: '订单页/退款页/订单详情页' //可接入的C端订单操作。退款申请操作。
					}, {
						url: 'curd/cart',
						title: '购物车页' //购物车管理，合并支付，改变SKU/数量。
					}, {
						url: 'curd/shop_list',
						title: '店铺采购单页' //类美团，左侧4字分类，右侧单列商品，底部结算。
					}, {
						url: 'curd/message_list', //message_chat
						title: '消息页/对话页' //折叠消息列表(通知、告警、对话、群)、消息内容
					}, {
						url: 'curd/buy_now', //buy_list
						title: '充值页/充值记录页' //充值买金币、充值到余额
					}, {
						url: 'curd/cash_now', //cash_list
						title: '提现页/提现记录页' //提现申请、提现记录
					}]
				}, {
					title: '页面函数',
					childs: [{
						ok: true,
						url: 'page/func',
						title: '通用函数'
					}, {
						ok: true,
						url: 'page/sysinfo?sid=123&liid=456',
						title: '环境参数'
					}, {
						ok: true,
						url: 'page/lang',
						title: '多语言'
					}, {
						ok: true,
						url: 'page/theme',
						title: '暗黑模式/配色'
					}, {
						ok: true,
						url: 'page/oldfont',
						title: '敬老模式/字号对比'
					}]
				}, {
					title: '它项示例',
					childs: [{
						ok: true,
						url: '!4187|shop_info',
						title: '打开原型图'
					}, {
						ok: true,
						url: 'http://ciyon.ciy.cn/admin/',
						title: '打开H5网页'
					}, {
						ok: true,
						url: 'case/pagefix',
						title: 'fix页面位置计算'
					}, {
						ok: true,
						url: 'case/promise',
						title: 'Promise极简示例'
					}, {
						ok: true,
						url: 'case/proxy',
						title: 'Vue3 Proxy'
					}, {
						ok: true,
						url: 'case/vproject',
						title: '工程化改进'
					}, {
						ok: true,
						url: 'case/dict',
						title: '字典模式'
					}, {
						ok: true,
						url: 'case/comlife',
						title: '组件生命周期'
					}, {
						ok: true,
						url: 'case/pagecal',
						title: 'watch computed示例'
					}]
				}]
			}
		},
		onLoad() {
			var idx = this.getstorage('_demoindex', -1);
			if (idx > -1)
				this.demos[idx].show = true;
		},
		onShow() {
			this.last = this.getstorage('_demolast');
		},
		methods: {
			chgshow(idx) {
				this.demos[idx].show = !this.demos[idx].show;
				if (this.demos[idx].show)
					this.setstorage('_demoindex', idx);
			},
			godemo(itm) {
				this.setstorage('_demolast', itm);
				this.gourl(itm.url);
				// uni.navigateTo({
				// 	url: itm.url,
				// 	fail: res => {
				// 		this.toast(res.errMsg);
				// 	}
				// });
			}
		}
	}
</script>