<template>
	<view class="u-demo">
		<view class="u-demo-wrap">
			<view class="u-demo-title">演示效果</view>
			<view class="u-demo-area">
				<u-loading :mode="mode" :show="show" :color="color" :size="size"></u-loading>
			</view>
		</view>
		<view class="u-config-wrap">
			<view class="u-config-title u-border-bottom">
				参数配置
			</view>
			<view class="u-config-item">
				<view class="u-item-title">模式</view>
				<u-subsection :list="['圆圈', '花朵']" @change="modeChange"></u-subsection>
			</view>
			<view class="u-config-item">
				<view class="u-item-title">颜色(只对圆圈模式有效)</view>
				<u-subsection :list="['default', 'primary', 'error', 'warning', 'success']" @change="colorChange"></u-subsection>
			</view>
			<view class="u-config-item">
				<view class="u-item-title">尺寸(单位rpx)</view>
				<u-subsection current="1" :list="['28', '34', '40']" @change="sizeChange"></u-subsection>
			</view>
			<view class="u-config-item">
				<view class="u-item-title">是否显示</view>
				<u-subsection current="1" :list="['否', '是']" @change="showChange"></u-subsection>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mode: 'circle',
				color: '#c7c7c7',
				size: '34', 
				show: true
			}
		},
		methods: {
			modeChange(index) {
				this.mode = index == 0 ? 'circle' : 'flower';
			},
			colorChange(index) {
				if(index == 0) {
					this.color = '#c7c7c7';
				} else {
					let color = index == 1 ? 'primary' : index == 2 ? 'error' : index == 3 ? 'warning' : 'success';
					this.color = this.$u.color[color];
				}
			},
			sizeChange(index) {
				this.size = index == 0 ? '28' : index == 1 ? '34' : '40';
			},
			showChange(index) {
				// 两个!!可以把0变成false，1变成true
				this.show = !!index;
			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				//console.log(e);
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				this.result = e;
				// console.log(this.result);
			}
		}
	}
</script>

<style scoped lang="scss">
	.u-demo {}
</style>