<template>
	<view>
		<view class="nav_area"></view>
		<view class="setPage">
			<view v-for="(item,index) in setList" :key="index" class="set_item">
				<view class="icon_new"><image src="" mode=""></image></view>
				<view style="flex:1;" class="flex-col">
					<view class=""><text>中奖金额：</text>{{item.zj}}元</view>
					<view class=""><text>中奖率：</text>{{item.gl}}%</view>
				</view>
				<view style="" class="flex-col">
					<view class="blue" @click="edit(item,index)">编辑</view>
					<text class="" @click="remove(item,index)">删除</text>
				</view>
			</view>
		</view>
		<view class="edit_mask" v-if="showEdit" @click.stop="">
			<view class="edit_area">
				<view class="title">{{title}}</view>
				<view class="content">
					<view class="input_box">
						<view class="">奖金金额:</view>
						<view class="input_box2">
							<input type="text" placeholder="请输入奖金金额" placeholder-style="color: #999;">
							<text>元</text>
						</view>
					</view>
					<view class="input_box">
						<view class="">中奖率:</view>
						<view class="input_box2">
							<input type="text" placeholder="请输入中奖概率" placeholder-style="color: #999;">
							<text>%</text>
						</view>
					</view>
				</view>
				<view class="btngroup">
					<view class="cancel" @click="cancel">取消</view>
					<view class="confirm" @click="confirm">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				setList: [
					{zj:'5',gl:'80'},
					{zj:'0',gl:'80'},
					{zj:'10',gl:'60'},
					{zj:'20000',gl:'0.001'}
					
				],
				showEdit: false,
				title: "添加奖金",
				editInfo: {
					
				}
			}
		},
		methods: {
			edit(val, i){
				this.title = "编辑";
				this.showEdit = true;
				this.editInfo = item;
			},
			remove(val, i){
				uni.showModal({
					title:'温馨提示',
					content:"确定是否该奖金信息",
					success() {
						
					}
				})
			},
			cancel(){
				this.showEdit = false;
				this.editInfo = {};
			},
			confirm(){
				
			}
		},
		onNavigationBarButtonTap() {
			this.title = "添加奖金";
			this.showEdit = true;
		}
	}
</script>

<style lang="scss" scoped>
	.nav_area {
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 99;
		background-color: #fff;
		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
		width: 700rpx;
		height: 88rpx;
		padding: 0px 25rpx;
		padding-top: var(--status-bar-height);
		box-sizing: content-box;
		color: #b0b0b0;
		font-size: 14px;
	}
	.setPage{
		padding: 0px 40rpx;
		font-size: 14px;
		color: #444;
	}
	.set_item{
		height: 132rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px 0px;
		border-bottom: 1px solid #ebebeb;
		
		.icon_new{
			width: 240rpx;
			height: 132rpx;
			margin-right: 20rpx;
			image{
				width: 240rpx;
				height: 132rpx;
				border-radius: 5px;
				background-color: #000;
			}
		}
		text{
			color: #999;
		}
		.flex-col{
			height: 100%;
			display: flex;flex-direction: column;
			justify-content: space-between;
		}
		.blue{
			color: #00A1ED;
		}
	}
	.edit_mask{
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0px;
		left: 0px;
		background-color: rgba(0,0,0,.5);
		z-index: 999;
	}
	.edit_area{
		width: 670rpx;
		height: 480rpx;
		border-radius: 10px;
		background-color: #fff;
		margin: calc(50vh - 240rpx) auto;
		color: #444;
		
		.title{
			height: 140rpx;
			text-align: center;
			line-height: 140rpx;
			font-size: 18px;
		}
		.content{
			height: 248rpx;
			.input_box{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0px 40rpx;
				margin-bottom: 40rpx;
				font-size: 16px;
				.input_box2{
					width: 426rpx;
					height: 80rpx;
					font-size: 14px;
					border: 1px solid #ededed;
					border-radius: 5px;
					display: flex;
					align-items: center;
					color: #999;
					
					input{
						flex: 1;
						height: 80rpx;
						text-align: center;
						font-size: 14px;
					}
					text{
						flex: 0.2;
					}
				}
			}
		}
		.btngroup{
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-top: 2rpx solid #f1f1f1;
			.cancel{
				line-height: 90rpx;
				color: #999;
				border-right: 2rpx solid #f1f1f1;
			}
			.confirm, .cancel{
				width: 50%;
				text-align: center;
			}
		}
	}
	

	
</style>
