<template>
	<u-mask class="discountModal" :show="isShow" :mask-click-able="false">
		<view class="discount-con">
			<view class="discount-main">
				<view class="text-c">请输入折扣金额</view>
				<view class="discount-price text-c">
					<u-input class="price" v-model="formValidate.discountAmount" @input="numberToFixed('discountAmount',2,999999)" @focus="amountFocus" placeholder="请输入折扣金额" :clearable="false" type="digit" style="display: inline-block;vertical-align: middle;" />元
				</view>
			</view>
			<view class="discount-footer">
				<view class="button-cancel" @click="isShow=false">取消</view>
				<view class="button-confirm" @click="handleConfirm">确定</view>
			</view>
		</view>
	</u-mask>
</template>

<script>
	import { numberToFixed } from '@/libs/tools'
	export default {
		props: {
			openModal: { //  弹框显示状态
				type: Boolean,
				default: false
			},
			infoData: {
				tyoe: Object,
				default: ()=>{
					return null
				}
			},
			amount: {
				type: [Number, String],
				default: ''
			}
		},
		data() {
			return {
				isShow: this.openModal, //  是否打开弹框
				discountAmount: '',
				formValidate: {
					discountAmount: 0
				}
			}
		},
		methods: {
			// 确认
			handleConfirm(){
				if(this.formValidate.discountAmount){
					this.$emit('confirm', this.formValidate.discountAmount)
				}else{
					this.toashMsg('请输入折扣金额')
				}
			},
			// 小数点后两位
			numberToFixed: function (key, num, max) {
			  let val = this.formValidate[key]
			  let ret = numberToFixed(val, num, max)
			  this.$nextTick(() => {
			  	this.formValidate[key] = ret
			  })
			},
			//  折扣金额  获取焦点
			amountFocus(){
				this.formValidate.discountAmount = this.formValidate.discountAmount == 0 ? '' : this.formValidate.discountAmount
			}
		},
		watch: {
			//  父页面传过来的弹框状态
			openModal (newValue, oldValue) {
				this.isShow = newValue
			},
			//  重定义的弹框状态
			isShow (newValue, oldValue) {
				if (!newValue) {
					this.$emit('close')
					this.formValidate.discountAmount = 0
				}else{
					this.formValidate.discountAmount = this.amount || ''
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.discountModal{
		width: 100%;
		height: 100%;
		.text-c{
			text-align: center;
		}
		.discount-con{
			width: 78%;
			margin: 55% auto 0;
			background-color: #fff;
			border-radius: 24upx;
			.discount-main{
				padding: 60upx 20upx 50upx;
				.discount-price{
					margin: 10upx 0;
					.price{
						border-bottom: 1upx solid #e4e7ed;
					}
				}
			}
			.discount-footer{
				font-size: 30upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				text-align: center;
				border-top: 1upx solid #E5E5E5;
				.button-cancel{
					color: #999;
					border-right: 1upx solid #E5E5E5;
					flex-grow: 1;
					padding: 20upx 0;
				}
				.button-confirm{
					color: #2A86F4;
					flex-grow: 1;
					padding: 20upx 0;
				}
			}
		}
	}
</style>
