<template>
	<view class="u-demo">
		<view class="u-demo-wrap" style="padding-left:0;padding-right:0;margin-left: -40rpx;margin-right: -40rpx;">
			<view class="u-demo-title">演示效果</view>
			<view class="u-demo-area">
				<u-cell-group title="读万卷书">
					<u-cell-item center :is-link="true" :label="label" value="铁马冰河入梦来" i
						ndex="index" @click="click" :hover-class="hoverClass" 
						:arrow="arrow" :title="title"
						:icon="icon"
					>
						<u-badge :absolute="false" v-if="rightSlot == 'badge'" count="105" slot="right-icon"></u-badge>
						<u-switch v-if="rightSlot == 'switch'" slot="right-icon" v-model="checked"></u-switch>
					</u-cell-item>
					<u-cell-item value="" title="铁马冰河入梦来" value="行万里路" :arrow="false">
						<u-icon slot="icon" size="34" name="calendar" style="margin-right: 5px;"></u-icon>
						<u-icon slot="right-icon" size="34" name="calendar"></u-icon>
						<u-field slot="value"></u-field>
					</u-cell-item>
				</u-cell-group>
			</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 vibrateShort :list="['是', '否']" @change="iconChange"></u-subsection>
			</view>
			<view class="u-config-item">
				<view class="u-item-title">自定义右侧内容</view>
				<u-subsection vibrateShort :list="['文字', 'Switch组件', 'Badge组件']" @change="rightSlotChange"></u-subsection>
			</view>
			<view class="u-config-item">
				<view class="u-item-title">描述信息</view>
				<u-subsection vibrateShort current="1" :list="['是', '否']" @change="lableChange"></u-subsection>
			</view>
			<view class="u-config-item">
				<view class="u-item-title">更换标题</view>
				<u-subsection vibrateShort :list="['是', '否']" @change="titleChange"></u-subsection>
			</view>
			<view class="u-config-item">
				<view class="u-item-title">右侧箭头</view>
				<u-subsection vibrateShort :list="['是', '否']" @change="arrowChange"></u-subsection>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			icon: 'setting',
			arrow: true,
			label: '',
			title: '青山一道同云雨',
			rightSlot: true,
			checked: false,
		}
	},
	computed: {
		hoverClass() {
			// 如果右侧是switch步进器组件的话，去掉cell的点击反馈，因为这个时候点击的反馈应该在switch上
			return this.rightSlot == 'switch' ? 'none' : 'u-cell-hover';
		}
	},
	methods: {
		iconChange(index) {
			this.icon = index == 0 ? 'setting' : 'file-text'
		},
		arrowChange(index) {
			this.arrow = index == 0 ? true : false
		},
		lableChange(index) {
			this.label = index == 0 ? '岂曰无衣，与子同裳' : ''
		},
		titleChange(index) {
			this.title = index == 0 ? '青山一道同云雨' : '明月何曾是两乡'
		},
		rightSlotChange(index) {
			this.rightSlot = index == 0 ? 'text' : index == 1 ? 'switch' : 'badge'
			if(index == 0) this.arrow = true;
			else this.arrow = false;
		},
		click(index) {
			// console.log(index);
		}
	}
};
</script>

<style lang="scss" scoped>
	
.gab {
	background-color: rgb(245, 245, 245);
	height: 20rpx;
}

.wrap {
	height: 100vh;
	background-color: rgb(241, 241, 241);
}

.box {
	padding: 30rpx 00rpx;
	font-size: 28rpx;
	color: $u-type-info;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
</style>
