<template>
	<view class="select-box">
		<u-popup v-model="areacodeShow" mode="bottom">
			<view class="box" style="color: #333333;font-size: 28rpxrpx;">请选择您的国际区号</view>
			<view class="box" style="color: #2C83FF;" @click="areacode('852')">香港+852</view>
			<view class="box" style="color: #2C83FF;" @click="areacode('866')">台湾+866</view>
			<view class="box" style="color: #2C83FF;" @click="areacode('1')">美国+1</view>
			<view class="box" style="color: #2C83FF;" @click="areacode('65')">新加坡+65</view>
			<view class="box box-bottom" style="color: #A9AFB8;" @click="cancel">取消</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		User
	} from "@/config/api.js"
	export default {
		watch: {
			isAreaCode() {
				this.areacodeShow = this.isAreaCode
			},
			typesignup() {
				this.signupType = this.typesignup
			}
		},
		data() {
			return {
				areacodeShow: false,
			}
		},
		props: {
			isAreaCode: {
				type: Boolean,
				default: false,
			},
			areaCode: {
				type: Object
			},
		},
		methods: {
			areacode(num) {
				User.countryCcodeAdd({
					CountryCode: num
				}).then(res => {
					if (res.Ret == 200) {
						this.areacodeShow = false
						this.$parent.isAreaCode = false
						this.$parent.isNeedAddCountryCode = false
						this.$parent.signupAdd(this.areaCode.id, this.areaCode.type)
					}
				})
			},
			cancel() {
				this.areacodeShow = false
				this.$parent.isAreaCode = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.select-box {
		width: 100%;

		.box {
			height: 95prx;
			line-height: 95rpx;
			text-align: center;
			font-size: 32rpx;
			border-bottom: 1rpx solid #EBEBEB;
		}

		.box-bottom {
			border-bottom: none !important;
		}
	}
</style>
