<template>
	<view class="demo-block">
		<text class="demo-block__title-text ultra">Picker 选择器</text>
		<text class="demo-block__desc-text">用于一组预设数据中的选择。</text>
		<view class="demo-block__body">
			<view class="demo-block card">
				<text class="demo-block__title-text">基础用法</text>
				<view class="demo-block__body">
					<l-picker v-model="citys1"  cancel-btn="取消" confirm-btn="确定" title="标题" :columns="cityOptions">
						<l-picker-item :options="cityOptions"></l-picker-item>
						<l-picker-item :options="cityOptions"></l-picker-item>
					</l-picker>
				</view>
			</view>
			<view class="demo-block card">
				<text class="demo-block__title-text">搭配弹出层使用</text>
				<view class="demo-block__body">
					<button type="primary" @click="showPicker = true">弹窗</button>
					<l-popup v-model="showPicker" position="bottom">
						<l-picker cancel-btn="取消" confirm-btn="确定" title="标题" :columns="seasonColumns" @cancel="showPicker = false"
							@confirm="showPicker = false"></l-picker>
					</l-popup>
				</view>
			</view>
			<view class="demo-block card">
				<text class="demo-block__title-text">双向绑定: {{citys.join(',')}}</text>
				<view class="demo-block__body">
					<l-picker v-model="citys" cancel-btn="取消" confirm-btn="确定">
						<l-picker-item :options="cityOptions"></l-picker-item>
					</l-picker>
				</view>
			</view>
			<view class="demo-block card">
				<text class="demo-block__title-text">多列</text>
				<view class="demo-block__body">
					<l-picker cancel-btn="取消" confirm-btn="确定" :columns="seasonColumns" @confirm="onConfirm">
					</l-picker>
				</view>
			</view>
			<view class="demo-block card">
				<text class="demo-block__title-text">多列联动</text>
				<view class="demo-block__body">
					<l-picker resetIndex cancel-btn="取消" confirm-btn="确定" @confirm="onConfirm" @pick="onColumnChange">
						<l-picker-item :options="provinces"></l-picker-item>
						<l-picker-item :options="cities"></l-picker-item>
						<l-picker-item :options="counties"></l-picker-item>
					</l-picker>
				</view>
			</view>
			<view class="demo-block card">
				<text class="demo-block__title-text">级联选择</text>
				<view class="demo-block__body">
					<l-cascade :columns="cascadeColumns" cancel-btn="取消" confirm-btn="确定" @confirm="onConfirm">
					</l-cascade>
				</view>
			</view>
			<view class="demo-block card">
				<text class="demo-block__title-text">加载状态</text>
				<view class="demo-block__body">
					<l-picker loading cancel-btn="取消" confirm-btn="确定" @confirm="onConfirm" @pick="onColumnChange">
					</l-picker>
				</view>
			</view>
			<view class="demo-block card">
				<text class="demo-block__title-text">空状态</text>
				<view class="demo-block__body">
					<l-picker cancel-btn="取消" confirm-btn="确定" @confirm="onConfirm" @pick="onColumnChange">
						<template #empty>
							<l-empty description="没有数据" />
						</template>
					</l-picker>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="uts" setup>
	import { PickerColumn, PickerColumnItem, PickerConfirmEvent, PickerPickEvent } from '@/uni_modules/lime-picker';

	const showPicker = ref(false)
	const citys1 = ref<string[]>(['上海市'])
	const citys = ref<string[]>(['上海市'])

	const cascadeColumns = [
		{
			label: '浙江',
			value: 'Zhejiang',
			children: [
				{
					label: '杭州',
					value: 'Hangzhou',
					children: [
						{ label: '西湖区', value: 'Xihu' },
						{ label: '余杭区', value: 'Yuhang' },
					],
				},
				{
					label: '温州',
					value: 'Wenzhou',
					children: [
						{ label: '鹿城区', value: 'Lucheng' },
						{ label: '瓯海区', value: 'Ouhai' },
					],
				},
			],
		},
		{
			label: '福建',
			value: 'Fujian',
			children: [
				{
					label: '福州',
					value: 'Fuzhou',
					children: [
						{ label: '鼓楼区', value: 'Gulou' },
						{ label: '台江区', value: 'Taijiang' },
					],
				},
				{
					label: '厦门',
					value: 'Xiamen',
					children: [
						{ label: '思明区', value: 'Siming' },
						{ label: '海沧区', value: 'Haicang' },
					],
				},
			],
		},
	];


	setTimeout(() => {
		// citys.value = ['广州市']
	}, 3000)
	const cityOptions = [
		{
			label: '北京市',
			value: '北京市',
		},
		{
			label: '上海市',
			value: '上海市',
		},
		{
			label: '广州市',
			value: '广州市',
		},
		{
			label: '深圳市',
			value: '深圳市',
		},
		{
			label: '杭州市',
			value: '杭州市',
		},
		{
			label: '成都市',
			value: '成都市',
		},
		{
			label: '长沙市',
			value: '长沙市',
		},
	] as PickerColumn

	const seasonColumns = computed(() : PickerColumn[] => {
		const _year = 2018;
		const _years : PickerColumnItem[] = []
		for (let i = 2000; i <= _year; i++) {
			_years.push({
				label: `${i}`,
				value: `${i}`
			} as PickerColumnItem)
		}
		const seasonOptions = [
			{
				label: '春',
				value: '春',
			},
			{
				label: '夏',
				value: '夏',
			},
			{
				label: '秋',
				value: '秋',
			},
			{
				label: '冬',
				value: '冬',
			},
		] as PickerColumn
		return [
			_years,
			seasonOptions
		]
	})

	const areaList = {
		provinces: {
			'110000': '北京市',
			'440000': '广东省',
		},
		cities: {
			'110100': '北京市',
			'440100': '广州市',
			'440200': '韶关市',
			'440300': '深圳市',
			'440400': '珠海市',
			'440500': '汕头市',
			'440600': '佛山市',
		},
		counties: {
			'110101': '东城区',
			'110102': '西城区',
			'110105': '朝阳区',
			'110106': '丰台区',
			'110107': '石景山区',
			'110108': '海淀区',
			'110109': '门头沟区',
			'110111': '房山区',
			'110112': '通州区',
			'110113': '顺义区',
			'110114': '昌平区',
			'110115': '大兴区',
			'110116': '怀柔区',
			'110117': '平谷区',
			'110118': '密云区',
			'110119': '延庆区',
			'440103': '荔湾区',
			'440104': '越秀区',
			'440105': '海珠区',
			'440106': '天河区',
			'440111': '白云区',
			'440112': '黄埔区',
			'440113': '番禺区',
			'440114': '花都区',
			'440115': '南沙区',
			'440117': '从化区',
			'440118': '增城区',
			'440203': '武江区',
			'440204': '浈江区',
			'440205': '曲江区',
			'440222': '始兴县',
			'440224': '仁化县',
			'440229': '翁源县',
			'440232': '乳源瑶族自治县',
			'440233': '新丰县',
			'440281': '乐昌市',
			'440282': '南雄市',
			'440303': '罗湖区',
			'440304': '福田区',
			'440305': '南山区',
			'440306': '宝安区',
			'440307': '龙岗区',
			'440308': '盐田区',
			'440309': '龙华区',
			'440310': '坪山区',
			'440311': '光明区',
			'440402': '香洲区',
			'440403': '斗门区',
			'440404': '金湾区',
			'440507': '龙湖区',
			'440511': '金平区',
			'440512': '濠江区',
			'440513': '潮阳区',
			'440514': '潮南区',
			'440515': '澄海区',
			'440523': '南澳县',
			'440604': '禅城区',
			'440605': '南海区',
			'440606': '顺德区',
			'440607': '三水区',
			'440608': '高明区',
		},
	};

	const getOptions = (obj : UTSJSONObject, filter ?: ((value : PickerColumnItem) => boolean) | null) : PickerColumn => {
		const res = UTSJSONObject.keys(obj).map((key) : PickerColumnItem => {
			return {
				// id: key,
				value: `${key}`,
				label: `${obj[key]}`
			} as PickerColumnItem
		})
		if (filter != null) {
			return res.filter(filter)
		}
		return res
	}
	const match = (v1 : string, v2 : string, size : number) : boolean => {
		return v1.slice(0, size) == v2.slice(0, size)
	};
	const getCounties = (cityValue : string) : PickerColumn => {
		return getOptions(areaList.counties as UTSJSONObject, (county : PickerColumnItem) : boolean => match(county.value, cityValue, 4));
	};
	const getCities = (provinceValue : string) : PickerColumn[] => {
		const cities = getOptions(areaList.cities as UTSJSONObject, (city : PickerColumnItem) : boolean => match(city.value, provinceValue, 2));
		const counties = getCounties(cities[0].value);
		return [cities, counties];
	};

	const provinces = ref<PickerColumnItem[]>([]);
	const cities = ref<PickerColumnItem[]>([]);
	const counties = ref<PickerColumnItem[]>([]);
	const options = computed(() : PickerColumn[] => [provinces.value, cities.value, counties.value]);

	const onConfirm = (context : PickerConfirmEvent) => {
		console.log('context', context)
	}

	const onColumnChange = ({ values, column, index } : PickerPickEvent) => {
		if (column == 0) {
			// 更改省份
			const data = getCities(provinces.value[index].value);
			cities.value = data[0];
			counties.value = data[1];
		}

		if (column == 1) {
			// 更改城市
			counties.value = getCounties(cities.value[index].value);
		}

		if (column == 2) {
			// 更改区县
		}
	}

	onMounted(() => {
		provinces.value = getOptions(areaList.provinces as UTSJSONObject, null)
		const data = getCities(provinces.value[0].value);
		cities.value = data[0];
		counties.value = data[1];
	})
</script>

<style lang="scss">
	$card-bg-color: var(--doc-card-bg-color, white);
	// $page-bg-color: var(--doc-page-bg-color, #f5f5f5);
	$title-color: var(--doc-title-color, #000000E6);
	$summary-color: var(--doc-summary-color, #00000099);
	.btn {
		margin-bottom: 20rpx;
		margin-right: 20rpx;
		align-self: center;
	}

	.demo-block {
		margin: 32px 0 0;

		// overflow: visible;
		&.card {
			// background-color: $card-bg-color;
			// transition-property: background-color;
			// transition-duration: 300ms;
			padding: 30rpx;
			margin-bottom: 20rpx;
		}

		&__title {
			margin: 0;
			margin-top: 8px;

			&-text {
				color: $summary-color;
				font-weight: 400;
				font-size: 14px;
				line-height: 16px;
				display: flex;
				margin-left: 5px;

				&.large {
					color: $title-color;
					font-size: 18px;
					font-weight: 700;
					line-height: 26px;
					margin-left: 20px;
				}

				&.ultra {
					color: $title-color;
					font-size: 24px;
					font-weight: 700;
					line-height: 32px;
					padding-left: 15px;
				}
			}
		}

		&__desc-text {
			color: $summary-color;
			margin: 8px 16px 0 0;
			font-size: 14px;
			line-height: 22px;
			margin-left: 20px;
		}

		&__body {
			margin: 16px 0;
			overflow: visible;

			.demo-block {
				// margin-top: 0px;
				margin: 0;
				overflow: visible;
			}
		}
	}
</style>