<template>
	<view>
		<u-popup ref="popup" :closeOnClickOverlay="closeOnClickOverlay" mode="center" bgColor="none">
			<view :class="['n-ps-all-' + padding, 'n-bg-inverse', 'n-radius-base']" :style="customStyle">
				<view class="n-flex-column n-align-center">
					<text class="n-weight-7 n-color-text" :style="{fontSize:'34rpx'}">{{title}}</text>
					<text class="n-size-ss n-ms-top-s n-color-third" v-if="label">{{label}}</text>
				</view>
				<view class="n-flex-column n-align-center n-ms-bottom-ll" v-if="content">
					<text class="n-size-base n-ms-top-ll n-color-second">{{content}}</text>
				</view>
				<u-form class="n-ms-top-l" v-else labelWidth="40rpx" labelPosition="left">
					<u-form-item :class="['n-radius-' + inputRadius, 'n-bg-page', 'n-ps-base', 'n-ms-bottom-base']">
						<u-input v-model="input" :type="inputType" :focus="true" :maxlength="maxlength" :placeholder="place" border="none" clearable>
							<template v-slot:suffix>
								<text class="n-size-ss n-color-error" v-if="captcha" @click="sendSms">{{code_text}}</text>
							</template>
						</u-input>
					</u-form-item>
				</u-form>
				<u-button class="n-ms-top-base" @click="submit" :text="buttonText" :color="buttonColor" type="error" shape="circle" throttleTime="1000"></u-button>
			</view>
		</u-popup>
		<!-- 验证码 -->
		<u-code ref="code" @change="changeCode" :seconds="seconds" :uniqueKey="captchaType" endText="获取验证码"></u-code>
	</view>
</template>

<script>

	export default {
		name:"m-popup",
		props: {
			label: {
				type: String,
				default: ''
			},
			title: {
				type: String,
				default: '提示'
			},
			place: {
				type: String,
				default: '请输入内容'
			},
			content: {
				type: String,
				default: ''
			},
			captcha: {
				type: Boolean,
				default: false
			},
			padding: {
				type: String,
				default: 'base'
			},
			redirect: {
				type: String,
				default: ''
			},
			maxlength: {
				type: [String, Number],
				default: 10
			},
			inputType: {
				type: String,
				default: 'text'
			},
			buttonText: {
				type: String,
				default: '立即提交'
			},
			captchaType: {
				type: String,
				default: 'notice'
			},
			inputRadius: {
				type: String,
				default: 'll'
			},
			buttonColor: {
				type: String,
				default: '#fc3463'
			},
			customStyle: {
				type: Object,
				default(){
					return {width:'600rpx',marginBottom:'200rpx'}
				}
			},
			closeOnClickOverlay: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				input: '',
				seconds: 60,
				code_text: '获取验证码'
			};
		},
		methods: {
			// 展示弹窗
			open() {
				// 发送验证码
				if(this.captcha){
					this.sendSms()
				}
				this.$refs['popup'].open()
			},
			// 关闭弹窗
			close() {
				uni.hideKeyboard()
				this.$refs['popup'].close()
			},
			// 提交数据
			submit() {
				// 跳转链接
				if(this.redirect) {
					return uni.navigateTo({
						url:this.redirect
					})
				}
				// 输入提示
				if(!this.input) return showToast(this.place)
				
				this.$emit('submit', this.input)
				
				this.close()
				this.input = ''
			},
			// 获取验证码
			sendSms() {
				if(this.$refs['code'].canGetCode){
					let userinfo = getApp().globalData.userinfo
					sendSms({type:this.captchaType, mobile:userinfo.mobile}).then(res=>{
						this.$refs['code'].start()
					})
				}
			},
			// 验证码变化
			changeCode(evt) {
				this.code_text = evt
			}
		}
	}
</script>

<style>

</style>