<template>
	<view v-if="isCity" class="visible">
		<view class="bg" @click="clear"></view>
		<view @click.stop class="item">
			<view class="groupBtn">
				<view @click="visible=false">取消</view>
				<view @click="handlesure()" class="sure">确定</view>
			</view>
			<picker-view @change="bindChange" :value="value" class="picker-view" :indicator-style="indicatorStyle">
				<picker-view-column>
					<view class="item" v-for="(item,index) in province" :key="index">{{item.name}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in city" :key="index">{{item}}</view>
				</picker-view-column>
				<!-- <picker-view-column>
					<view class="item" v-for="(item,index) in area" :key="index">{{item?item:'请选择'}}</view>
				</picker-view-column> -->
			</picker-view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				value: [2, 0],
				province: [], //省
				city: [], //市
				area: [], //区
			}
		},
		computed: {
			...mapState(["cityList", "user", "isCity"]),
		},
		mounted() {
			let that = this
			setTimeout(() => {
				that.handleCityList()
				console.log("1111", this.user.address, that.cityList, that.province)
			}, 500);
		},
		methods: {
			// 地区
			handleCityList() {
				let that = this
				that.province = that.cityList
				let str = that.user.address.split(',')[0]
				let str2 = that.user.address.split(',')[1]
				var Index0 = that.cityList.findIndex((profile) => profile.name === str);
				var Index2 = that.cityList[Index0].list.findIndex((ite) => ite === str2);
				that.value[0] = Index0
				that.value[1] = Index2
				that.city = that.cityList[Index0].list
			},
		}
	}
</script>

<style scoped lang="scss">
	.bg {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.4);
		z-index: 99;
	}
</style>