<template>

	<view class="content">

		<view class="headerGetbg"></view>

		<view class="bgf mar-24 home-content">

			<view class="box-pack-between list flex-y-center br">
				<text class="ft32 list-title">基本信息</text>
				<view class="flex-y-center">
					<view @click="enit" class="flex-y-center" style="margin-right: 20rpx;color: #1296db;">
						<image src="../static/images/gx.png" class="list-icon" mode=""></image> 更新
					</view>
					<view @click="del" class="flex-y-center" style="margin-right: 0rpx;color: #FF5722;">
						<image src="../static/images/fj.png" class="list-icon" mode=""></image> 发劵
					</view>
				</view>
			</view>

			<view class="flex-y-center home-content-item" style="padding-top: 24rpx;">
				<text class="home-left-name">名称：</text>
				<view style="word-break:break-all;">{{info.brand_name}}</view>
			</view>

			<view class="flex-y-center home-content-item">
				<text class="home-left-name">模板ID：</text>
				<text>{{info.template_id}}</text>
			</view>

			<view class="flex-y-center home-content-item">
				<text class="home-left-name">总金额：</text>
				<text>{{info.total_amount}}</text>
			</view>

			<view class="flex-y-center home-content-item">
				<text class="home-left-name">使用门槛：</text>
				<text>{{info.floor_amount}}</text>
			</view>

			<view class="flex-y-center home-content-item">
				<text class="home-left-name">已领取：</text>
				<text>{{info.publish_count}}</text>
			</view>


			<view class="flex-y-center home-content-item">
				<text class="home-left-name">已领金额：</text>
				<text>{{info.publish_amount}}</text>
			</view>

			<view class="flex-y-center home-content-item">
				<text class="home-left-name">已使用：</text>
				<text>{{info.used_count}}</text>
			</view>


			<view class="flex-y-center home-content-item">
				<text class="home-left-name">已用金额：</text>
				<text>{{info.used_amount}}</text>
			</view>

			<view class="flex-y-center home-content-item">
				<text class="home-left-name">已退金额：</text>
				<text>{{info.recycle_amount}}</text>
			</view>

			<view class="flex-y-center home-content-item">
				<text class="home-left-name">状态：</text>
				<text> {{info.status=='I'?'未生效':info.status=='S'?'已生效':info.status=='D'?'已删除':'已过期'}}</text>
			</view>

			<view class="flex-y-center home-content-item">
				<text class="home-left-name">发放时间：</text>
				<text>{{ info.publish_start_time+"至"+info.publish_end_time}}</text>
			</view>

			<view class="flex-y-center home-content-item">
				<text class="home-left-name">使用时间：</text>
				<text>{{info.expire_start_time+"至"+info.expire_end_time}}</text>
			</view>
		</view>

		<!-- 
		<view class="bgf home-content br">
			<view @click="addlabel" class="box-pack-between list flex-y-center br">
				<text class="ft32">文件预览</text>
			</view>

		</view>
		 -->
		<!-- <view style="height: 75px;"></view> -->
		<!-- 	<view style="margin-bottom:0"  class="bottom-bar flex-center" @click="videoStatus(info.status)">
			<button formType="submit" class="flex-center ft28">{{info.status==1?'下架':'上架'}}</button>
		</view> -->

		<view class="model flex-center" v-if="is_model" @click="bindno">

			<view class="model-home" @click.stop="gg">
				<form @submit="onSubmit">
					<view class="flex-y-center border-b">
						模板ID: <input type="text" disabled name="template_id" :value="info.template_id" />
					</view>

					<!-- 		<view class="flex-y-center border-b">
						选择类型:<picker mode="selector" :range="printerAddrList" @change="onPrinterAddrChange">
							<view :class="[printerAddr?'':'desc-placeholder','input-box']">{{printerAddr || '请选择'}}
							</view>
						</picker>
					</view> -->

					<view class="cell flex-y-center  border-b box-pack-between">
						<view class="title-block required">
							<text>选择类型</text>
						</view>
						<view class="desc ">
							<picker mode="selector" :range="printerAddrList" @change="onPrinterAddrChange">
								<view class="flex-y-center" :class="[printerAddr?'':'desc-placeholder','input-box']">
									{{printerAddr || '请选择'}}
									<text class="iconfont icongengduo ft24"></text>
								</view>
							</picker>
						</view>
					</view>

					<navigator v-if="device_type==1" url="choiceUser" class="flex-y-center border-b box-pack-between">
						<view style="min-width: 100rpx;">
							多选用户:
						</view>
						
						<view class="flex-y-center">
							<view style="word-break: break-all;">
								<text v-for="(item,index) of goodStudentType" :key='index'>{{item.id}},</text>
							</view>
							<text class="iconfont icongengduo ft24"></text>
						</view>
						
					</navigator>

					<view v-if="device_type==3" class="flex-y-center border-b">
						发放用户: <input type="text" name="login_id" placeholder="输入支付宝用户账号" />
					</view>

					<view v-if="device_type==2" class="flex-y-center border-b">
					 <view class="" style="min-width: 100rpx;">
					 	等级发放:
					 </view>	
						<view class="">
							<view class="goodsList flex-y-center box-pack-between"
								v-for="(item,index) of levelArr" @click="choice(index)" :key='index'>
								<view class="flex-center">
									<view class="rund flex-center">
										<block v-if="item.checked">
											<icon type="success_no_circle" size="13"></icon>
										</block>
									</view>
									<text class="ft28">{{item.name}}</text>
								</view>
							</view>
						</view>
					</view>

					<view class="flex-y-center border-b">
						发放金额: <input name="amount" type="digit" />
					</view>
					<button formType="submit" class="flex-center ft28">发放</button>
				</form>
			</view>


		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {},
				id: '',
				is_enit: false,
				URL: getApp().globalData.URL,
				is_play: false,
				is_model: false,
				printerAddrList: ['多选用户发劵', '根据等级发劵', '单选用户发劵', ],
				printerAddr: '多选用户发劵',
				device_type: 1,
				goodStudentType: [],
				levelArr: [],
				levelSrr:[],
			}
		},

		onLoad(e) {
			this.id = e.id;
			this.http();
			this.getData();
		},

		onShow(e) {
			let goodStudentType = uni.getStorageSync("goodStudentType") || '';
			if (goodStudentType.length > 0) {
				this.goodStudentType = goodStudentType;
			}
		},
		onUnload() {
			uni.removeStorageSync("goodStudentType")
		},

		onHide() {
			uni.removeStorageSync("goodStudentType")
		},

		methods: {
			
			choice(index) {
				this.levelArr[index].checked = !this.levelArr[index].checked;
				this.levelSrr = this.levelArr.filter((v, i) => v.checked == true);
			},

			getData() {
				this.request({
					url: "Smdcshop/coupon_level",
					data: {
						admin_id: uni.getStorageSync("admin_id"),
					},
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						this.levelArr = res.data;
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 2000,
						success: (res) => {},
					})
				});
			},

			onPrinterAddrChange(e) {
				this.printerAddr = this.printerAddrList[e.detail.value];
				this.device_type = Number(e.detail.value) + 1;
			},


			bindno() {
				this.is_model = false;
			},
			gg() {

			},
			
			http() {
				this.request({
					url: "Smdcshop/alipaycoupon_info",
					data: {
						id: this.id,
					},
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						this.info = res.data;

					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 2000,
						success: (res) => {},
					})
				});
			},

			del() {
				this.is_model = true;
			},

			enit() {
				let data = {
					id: this.id,
					admin_id: uni.getStorageSync("admin_id")
				}
				this.request({
					url: "Smdcshop/selectNomoneyTemStatus",
					data,
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 1000,
							success: (res) => {
								setTimeout(() => {
									uni.navigateBack();
								}, 2e3)
							},
						})
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 2000,
						success: (res) => {},
					})
				});
			},

			onSubmit(e) {
				let data = e.detail.value;
				data.coupon_type = 2;
				data.id = this.id;
				data.admin_id = uni.getStorageSync("admin_id");
				data.typea=this.device_type;
                let arr= this.levelSrr.map(item => item.id);
			    let goods=this.goodStudentType.map(item => item.user_id);
				data.level_id= arr.join(",");
				data.user_id= goods.join(",");
				this.request({
					url: "Smdcshop/fa_alipaycoupon",
					data,
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 1000,
							success: (res) => {
								setTimeout(() => {
									this.is_model = false;
								}, 2e3)
							},
						})
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 2000,
						success: (res) => {},
					})
				});
			},



		},
	}
</script>

<style lang="scss">
	page {
		background: #F5F7FA;
	}

	.goodsList {
		display: inline-block;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
		}

	.rund {
		width: 45rpx;
		height: 45rpx;
		border: 1px solid #ccc;
		margin-right: 20rpx;
	}

	.model {
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.5);
		width: 100%;
		height: 100%;
	}

	.model-home {
		background: #FFFFFF;
		width: 635rpx;
		// height: 700rpx;
		padding: 40rpx 30rpx;
		border-radius: 10rpx;
		font-size: 26rpx;
	}

	.model-home button {
		text-align: center;
		width: 80%;
		height: 90rpx;
		background: linear-gradient(132deg, #3387FF 0%, #3387FF 100%);
		box-shadow: 0px 2rpx 12rpx #3387FF;
		opacity: 1;
		border-radius: 8rpx;
		color: #fff;
		margin-top: 40rpx;
	}

	.border-b {
		border-bottom: 1rpx solid #F1F1F1;
		padding-top: 40rpx;
		padding-bottom: 20rpx;
	}

	.bottom-bar {
		position: fixed;
		bottom: 0px;
		width: 100%;
		z-index: 1000;
		background: #FFFFFF;
		padding: 30rpx 0;
	}

	.bottom-bar button {

		text-align: center;
		width: 690rpx;
		height: 90rpx;
		background: linear-gradient(132deg, #3387FF 0%, #3387FF 100%);
		box-shadow: 0px 2rpx 12rpx #3387FF;
		opacity: 1;
		border-radius: 8rpx;
		color: #fff;
	}

	.home-content {
		width: 690rpx;
		opacity: 1;
		background: #ffffff;
		border-radius: 14rpx;
		box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(204, 215, 230, 0.08);
		margin: 0 auto;
		position: relative;
		font-size: 28rpx;
		padding: 0 24rpx;
		margin-top: 30rpx;

		.list {
			height: 100rpx;
			color: #999999;

			.list-title {
				color: #000000;
				font-size: 30rpx;
			}

			.list-icon {
				width: 29rpx;
				height: 29rpx;
				margin-right: 6rpx;
			}
		}

		.home-content-item {
			padding-bottom: 24rpx;

			.home-left-name {
				opacity: 1;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				text-align: left;
				color: #99a0ad;
				min-width: 160rpx;
			}

			.home-left-input {
				border: 1rpx solid #ccc;
				padding: 10rpx;
				word-break: break-all;
				flex: 1;
			}

		}
	}

	.info-group {
		color: #999999;
		display: inline-block;
		border: 1rpx solid #F1F1F1;
		padding: 10rpx 20rpx;
		margin: 20rpx 20rpx;
		font-size: 30rpx;
		border-radius: 4rpx;
	}

	.video_path {
		width: 98%;
		display: block;
		margin: 0 auto;
	}

	.code-img {
		// display: block;
		//   width: 200rpx;
		//   height: 200rpx;
		margin: 60rpx auto;
		text-align: center;
	}

	.code-img image {
		width: 100rpx;
		height: 100rpx;
		margin-bottom: 20rpx;
	}

	.logo {
		width: 100rpx;
		height: 100rpx;
	}
</style>
