<template>
	<ciy-header ref="header" title="ciy-segment组件"></ciy-header>
	<view>
		<view class="ciy-card">
			<view class="title">分类切换</view>
			<view class="content">
				<view class="tip">
					左右拖动的分类选项。<br />
				</view>
			</view>
		</view>
		<ciy-segment v-model="li1" all="全部" :lis="lis" @change="chglog('change', $event)"></ciy-segment>
		<view style="height:3em;line-height:3em;text-align:center;">{{li1}}</view>
		<ciy-segment v-model="li2" :lis="lis2" @change="chglog('change', $event)"></ciy-segment>
		<view style="height:3em;line-height:3em;text-align:center;">{{li2}}</view>
		<ciy-segment :lis="lis3" @change="chglog('change', $event)"></ciy-segment>
		<view style="height:3em;"></view>

		<view class="ciy-card">
			<view class="title">属性</view>
			<view class="content">
				<view class="prp">value,v-model</view>
				<view class="hr"></view>
				<view class="prp">initevent</view>
				<view class="tip">
					是否产生初始事件。<br />
					默认 false
				</view>
				<view class="hr"></view>
				<view class="prp">all</view>
				<view class="tip">
					全部选项名称。<br />
				</view>
				<view class="hr"></view>
				<view class="prp">lis</view>
				<view class="tip">
					选项数组[{}, {}, ...]。<br />
					id, name。<br />
				</view>
			</view>
		</view>
		<view class="ciy-card">
			<view class="title">方法</view>
			<view class="content">
				无
			</view>
		</view>
		<view class="ciy-card">
			<view class="title">事件</view>
			<view class="content">
				<view class="evt">@change</view>
				<view class="tip">
					点击切换事件<br />
				</view>
				<view class="hr"></view>
				<view class="log" v-for="(item, index) in eventlog" :key="index">
					<text class="code">{{eventlog.length - index}}</text>
					{{item}}
				</view>
			</view>
		</view>
		<view class="hr"></view>
	</view>
</template>

<style scoped>
	@import '@/pages/demo/zdemo.css';
</style>

<script>
	import zmixin from '@/pages/demo/zmixin.js';
	export default {
		mixins: [zmixin],
		data() {
			return {
				li1:'',
				li2:'',
				lis: [{
					id: 1,
					name: '选项1'
				}, {
					id: 2,
					name: '选项2'
				}, {
					id: 3,
					name: '选项3'
				}, {
					id: 4,
					name: '选项4'
				}, {
					id: 5,
					name: '选项5'
				}, {
					id: 6,
					name: '选项6'
				}, {
					id: 7,
					name: '选项7'
				}, {
					id: 8,
					name: '选项8'
				}, {
					id: 9,
					name: '选项9'
				}, {
					id: 10,
					name: '选项10'
				}, {
					id: 11,
					name: '选项11'
				}, {
					id: 12,
					name: '选项12'
				}],
				lis2: [{
					id: 0,
					name: '所有'
				}, {
					id: 1,
					name: '选项1'
				}, {
					id: 2,
					name: '选项2'
				}],
				lis3:[]
			}
		},
		onLoad() {},
		methods: {
		}
	}
</script>
