<template>
	<view>
		<!-- 顶部 -->
		<view class="uni-head">
			<view class="uni-head-title">
				input输入框
			</view>			
		</view>
		<view class="container">
			<view class="uni-title">普通选择器</view>
			
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">当前选择</view>
				<view class="">
					<picker mode="selector" :range="array" @change="pikerChange" :value="index" range-key="name">
						<view>{{array[index].name}}</view>
					</picker>
				</view>
			</view>
		
		<view class="uni-list-cell">
			<view class="uni-list-cell-left">当前选择</view>
			<view class="">
				<picker mode="selector" :range="array1" @change="pikerChange1" :value="index1">
					<view>{{array1[index1]}}</view>
				</picker>
			</view>
		</view>
				
			<view class="uni-title uni-common-pl">多列选择器</view>
			<view class="uni-list">
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						当前选择
					</view>
					<view class="uni-list-cell-db">
						<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
							<view class="uni-input">{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}</view>
						</picker>
					</view>
				</view>
			</view>
			<view class="uni-title uni-common-pl">双列选择器</view>
			<view class="uni-list">
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						当前选择
					</view>
					<view class="uni-list-cell-db">
						<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
							<view class="uni-input">{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}</view>
						</picker>
					</view>
				</view>
			</view>
		</view>
		<view class="uni-title uni-common-pl">时间选择器</view>
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-left">
							当前选择
						</view>
						<view class="uni-list-cell-db">
							<picker mode="time" :value="time"  @change="bindTimeChange">
								<view class="uni-input">{{time}}</view>
							</picker>
						</view>
					</view>
				</view>
		<view class="uni-title uni-common-pl">日期选择器</view>
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-left">
							当前选择
						</view>
						<view class="uni-list-cell-db">
							<picker mode="date" :value="date"  @change="bindDateChange">
								<view class="uni-input">{{date}}</view>
							</picker>
						</view>
					</view>
				</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				array:[{name:"中国"},{name:"英国"},{name:"美国"},{name:"法国"}],
				array1:['china','USA','English'],
				index:0,
				index1:0,
				multiArray: [
					['亚洲', '欧洲'],
					['中国', '日本'],
					['北京', '上海', '广州']
				],
				multiIndex: [0, 0, 0],
				 time: '10:00',
				 date:'2026-03-26'
			}
		},
		methods: {
			pikerChange(e){
				this.index = e.detail.value;
			},
			pikerChange1(e){
				this.index1 = e.detail.value;
			},
			bindMultiPickerColumnChange: function(e) {
				console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value)
				this.multiIndex[e.detail.column] = e.detail.value
				switch (e.detail.column) {
					case 0: //拖动第1列
						switch (this.multiIndex[0]) {
							case 0:
								this.multiArray[1] = ['中国', '日本']
								this.multiArray[2] = ['北京', '上海', '广州']
								break
							case 1:
								this.multiArray[1] = ['英国', '法国']
								this.multiArray[2] = ['伦敦', '曼彻斯特']
								break
						}
						this.multiIndex.splice(1, 1, 0)
						this.multiIndex.splice(2, 1, 0)
						break
					case 1: //拖动第2列
						switch (this.multiIndex[0]) { //判断第一列是什么
							case 0:
								switch (this.multiIndex[1]) {
									case 0:
										this.multiArray[2] = ['北京', '上海', '广州']
										break
									case 1:
										this.multiArray[2] = ['东京','北海道']
										break
								}
								break
							case 1:
								switch (this.multiIndex[1]) {
									case 0:
										this.multiArray[2] = ['伦敦', '曼彻斯特']
										break
									case 1:
										this.multiArray[2] = ['巴黎', '马赛']
										break
								}
								break
						}
						this.multiIndex.splice(2, 1, 0)
						break
				}
				this.$forceUpdate()
			},
			bindTimeChange(e){
				this.time = e.detail.value
			},
			bindDateChange(e){
				this.date = e.detail.value
			}
		}
	}
</script>

<style>
@import url('../../lib/smart.css');
.uni-list-cell-left{
	margin-right: 35rpx;
}
</style>
