<template>
	<view>
		<view class="pay-dlgs">
			<view class="dlg-title">{{title}}</view>
			<input :type="type" v-model="password" class="dlg-input" placeholder="请输入交易密码" placeholder-class="input-place" />
			<view class="footer">
				<view class="btn btn-cancel" @click="cancel">取消</view>
				<button class="btn btn-submit" @click="finish" :disabled="disabled">确认</button>
				<!-- <view class="btn btn-submit" @click="finish">确认</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				password:""
			}
		},
		props:{
			type:{
				type:String,
				default:'password'
			},
			title:{
				type:String,
				default:"交易密码"
			},
			//是否禁用按钮
			disabled:{
				type:Boolean,
				default:false
			}
		},
		methods:{
			cancel(){
				this.$emit("cancel")
			},
			finish(){
				this.$emit("finish",this.password)
			}
		}
	}
</script>

<style scoped lang="scss">
	.pay-dlgs{
		width: 574upx;
		height: 406upx;
		background-color: #FFFFFF;
		border-radius: 16upx;
		padding: 0 40upx;
		.dlg-title{
			height: 110upx;
			line-height: 110upx;
			text-align: center;
			line-height: 110upx;
			font-size: 32upx;
			color: #404C69;
		}
		.dlg-input{
			box-sizing: border-box;
			width: 488upx;
			height: 80upx;
			line-height: 80upx;
			font-size: 28upx;
			color: #999999;
			padding-left: 30upx;
			margin-top: 37upx;
			border: none;
			background-color: #F5F5F5;
			border-radius: 16upx;
		}
		.input-place{
			font-size: 28upx;
			color: #999999;
		}
		.footer{
			display: flex;
			align-items: center;
			padding-left: 10upx;
			margin-top: 60upx;
			.btn{
				width: 220upx;
				height: 70upx;
				text-align: center;
				line-height: 70upx;
				font-size: 30upx;
				border-radius: 35upx;
			}
			.btn-cancel{
				border: 1upx solid #999999;
				color: #999999;
			}
			.btn-submit{
				color: #FFFFFF;
				background-color: #376AF5;
				margin-left: 34upx;
			}
		}
	}
</style>
