<template>
	<view class="checkModal">
		<view class="topModal" @click.stop="closeModal"></view>
		<view class="checkArea" >
			<view class="checkBox">
				<view class="checkTitle">
					{{'选择国家地/地区'}}
				</view>
				<scroll-view scroll-y="true" class="checkList">
					<view v-for="item in data.areaList" :key="item.countryCode" @click="checked(item)" class="checkItem">
						<text>{{item.countryName}}</text>
						<text>{{item.countryCode}}</text>
					</view>
				</scroll-view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		name: 'CheckArea',
		props: {
			data: {
				default: () => {},
				type: Object,
			}
		},
		methods: {
			closeModal() {
				this.$emit('closeModal', 'area');
			},
			checked(item) {
				this.$emit('checkedCode', item);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.checkModal {
		position: absolute;
		top: 0;
		left: 0;
		height: 100vh;
		width: 100vw;
		z-index: 9;
		background-color: rgba(0, 0, 0, 0.4);
		
		.topModal {
			height: 100vh;
			width: 100vw;
		}

		.checkArea {
			width: 100vw;
			position: absolute;
			top: 34vh;
			left: 0;
			animation: fade-in 0.6s;

			.checkBox {
				width: 100vw;
				height: 66vh;
				background: #fff;
				border-radius: 48upx 48upx 0 0;
				display: flex;
				flex-direction: column;
				
				
				.checkTitle {
					height: 96upx;
					line-height: 96upx;
					text-align: center;
					font-size: 36upx;
				}
				.checkList {
					height: calc(66vh - 96upx);
					padding-bottom: 48rpx;
					.checkItem {
						height: 48upx;
						line-height: 48upx;
						font-size: 32upx;
						display: flex;
						justify-content: space-between;
						padding: 24upx;
						box-sizing: content-box;
					}
				}
			}
		}
	}
	@keyframes fade-in {
	  0% {
	    top: 100vh
	  }
	  100% {
	    top:34vh
	  }
	}
</style>