<template>
	<view class="content">
		<u-index-list :index-list="indexList">
			<template v-for="(item, index) in indexList">
				<u-index-item :key='index'>
					<u-index-anchor :text="item['label']"></u-index-anchor>
					<view :key='index2' class="list-cell" v-for="(cell, index2) in item['list']" @tap="SelectAddress(cell['city_name'],cell['city_id'])">
						{{cell['city_name']}}
					</view>
				</u-index-item>
			</template>
		</u-index-list>
	</view>
</template>

<script>
	// 请求接口
	import {
		getCityListAPI
	} from '@/request/restaurant/index.js';
	import { mapMutations} from 'vuex'
	export default {
		data() {
			return {
				indexList: [],
			}
		},
		onLoad() {
			this.Datainit();
		},
		methods: {
			...mapMutations({
				SETCITYCODE:'SETCITYCODE',
				SETRUSERAREA:'SETRUSERAREA'
			}),
			/**
			 * @获取位置数据然后整合成组件需要的数据格式
			 * */ 
			Datainit() {
				let index = 0;
				let arr = []
				getCityListAPI().then(data => {
					let d = data['data'];
					console.log(d,'ddd')
					for (let key in d) {
						console.log(d[key]['length'],'d[key]')
						arr[index] = {
							label: key,
							list: []
						};
						for (let i = 0; i < d[key]['length']; i++) {
							arr[index]['list'].push({
								"id": d[key][i]['id'],
								"province_id": d[key][i]['province_id'],
								"city_id": d[key][i]['city_id'],
								"city_name": d[key][i]['city_name'],
								"pinyin": d[key][i]['pinyin'],
								"c_name": d[key][i]['c_name'],
							})
						};
						index++;
					};
					console.log(arr,'arr');
					this['indexList'] = arr;
				})
			},
			/**
			 * @设置当前地区code然后推页
			 * */
			SelectAddress(area,city_id){
				if(!city_id){
					uni.showToast({
						title:'该地区选择错误',
						icon:'none'
					});
					return;
				}
				this.SETCITYCODE(city_id);
				this.SETRUSERAREA(area);
				// 保存之后退页
				uni.navigateBack({
					delta: 1
				});

			},
			
			
		}
	}
</script>

<style lang="scss">
	/deep/ .u-border-bottom {
		background-color: #ffffff !important;
		border: none !important;
	}
	/deep/ .list-cell{
		padding: 32rpx 0;
		border-bottom: 1rpx solid #E2E2E2;
		color: #333333;
		font-size: 28rpx;
	}

	.content {
		padding: 32rpx;
	}
</style>
