<template>
	<view class="container">
		<view class="item">
			<view class="title">
				日期时间段选择
			</view>
			<dateTimeQuantum
			@onConfirmStartTime="onConfirmStartTime"
			@onConfirmEndTime="onConfirmEndTime"
			></dateTimeQuantum>
		</view>
		
		<view class="item">
			<view class="title">
				下拉选择
			</view>
			<drapdown
			:tabList="tabList"
			:activeStyle="{'color': '#3c9cff'}"
			:inactiveStyle="{'color': '#000'}"
			@click="onSelect"
			></drapdown>
		</view>
		
		<view class="item">
			<view class="title">
				<text>图片选择</text>
			</view>
			<view>
				<upload-image
				v-model="images"
				maxCount="3"
				width="100"
				height="100"
				type="fullurl"
				></upload-image>
				<button @click="submit">提交</button>
			</view>
		</view>
		
		<view class="item">
			<view @click="show = true" class="title">
				<text>打开带关闭按钮的弹窗组件</text>
			</view>
			
			<wskj-model-close :show="show" @close="show = false">
				<view>123</view>
			</wskj-model-close>
		</view>
		
		<view class="item">
			<view @click="showAddressSelector = true" class="title">
				打开地址选择(使用后端数据)
			</view>
			<addressModal v-if="showAddressSelector" :areaInfoSelected="areaInfoObj" @cancel="showAddressSelector = false"
				@confirm="handleConfirm">
			</addressModal>
		</view>
		
		<view class="item">
			<view @click="selectAddressShow = true" class="title">
				打开地址选择(使用前端自定义数据)
			</view>
			<address-picker :show="selectAddressShow" @confirm="onConfirmAddress" @close="selectAddressShow = false" @cancel="selectAddressShow = false" :closeOnClickOverlay="true" confirmText="确定"></address-picker>
		</view>
	</view>
</template>

<script>
	import dateTimeQuantum from "@/components/dateTimeQuantum"
	import drapdown from "@/components/drapdown"
	import addressModal from '@/components/address-modal.vue';
	
	export default {
		data() {
			return {
				show: false,
				images: '',
				tabList:[{
					label: '选项一',
					children: [
						{
							label: '111'
						}
					]
				},
				{
					label: '选项二',
					children: [
						{
							label: '222'
						}
					]
				},
				{
					label: '选项三',
					children: [
						{
							label: '333'
						}
					]
				}],
				showAddressSelector: false,
				areaInfoObj: {
					provinceObj: {
						id: '',
						name: '',
					},
					cityObj: {
						id: '',
						name: '',
					},
					cityObj: {
						id: '',
						name: '',
					},
					areaObj: {
						id: '',
						name: '',
					}
				},
				
				selectAddressShow: false,
				
			}
		},
		components:{
			dateTimeQuantum,
			drapdown,
			addressModal
		},
		onLoad() {
			this.images = this.$config.domain + '/assets/img/qrcode.png'
		},
		methods: {
			onConfirmStartTime(e){
				console.log(e)
			},
			onConfirmEndTime(e){
				console.log(e)
			},
			submit(){
				console.log(this.images)
			},
			handleConfirm(areaInfoObj) {
				console.log(areaInfoObj)
				this.showAddressSelector = false;
			},
			onConfirmAddress(e){
				// console.log(e)
				this.selectAddressShow = false
			},
			onSelect(item, index){
				uni.showModal({
					content: '点击了：' + JSON.stringify(item) + '第' + index + '个'
				})
			}
		}
	}
</script>

<style scoped>
	.container {
		height: 100%;
		padding: 24rpx 24rpx;
	}
	.item {
		margin-bottom: 60rpx;
	}
	.title {
		font-weight: 600;
	}
</style>