<template>
	<view class="detail">
		<custom-nav :title="pageTitle"></custom-nav>
		<custom-toast ref='toast'></custom-toast>
		
		<view class="content">
			<view class="top">
				<view class="info">
					<view class="pic">
						<image :src="item.img" mode="aspectFill"></image>
						<view class="bg"></view>
					</view>
					<view class="right">
						<view class="name">{{ item.name || '' }}</view>
						<view class="des">{{ item.des || '' }}</view>
						<view class="price">
							<text><text class="basecolor">{{ ' ' + (item.price || 0) + ' ' }}</text>奖学金</text>
							<text>剩余<text class="basecolor">{{ ' ' + item.surplus + ' ' }}</text>件</text>
						</view>
					</view>
				</view>
				<view class="num item">
					<text>兑换数量</text>
					<custom-counter v-model="num"></custom-counter>
				</view>
				<view class="total item">
					<text>总计</text>
					<text><text class="basecolor">{{ ' ' + totalPrice + ' '}}</text>奖学金</text>
				</view>
				<view class="name item">
					<text>收货人</text>
					<text>{{ userServerInfo.name }}</text>
				</view>
				<view class="name item">
					<text>代理公司</text>
					<text>{{ userServerInfo.super_name }}</text>
				</view>
				<!-- <view class="addres item" @tap="chooseAddress">
					<text>收货地址</text>
					<view class="address-text" v-if="address.address">
						<view>{{ address1 }}</view>
						<view>{{ address2 }}</view>
					</view>
					<text class="cuIcon-right"></text>
				</view> -->
			</view>
			<view class="mark"><text class="basecolor">注：</text><text style="color: #999999;">兑换成功的礼品会发往代理的上级代理公司</text></view>
			<view class="submit" @tap="submit">提交</view>
		</view>
	</view>
</template>

<script>
	import { api_getAddress, api_submitExchange } from '../../api.js'
	import customCounter from '../../components/custom-counter.vue'
	export default {
		components: {
			customCounter
		},
		data() {
			return {
				pageTitle: '礼品详情',
				item: {},
				num: 1,
				requesting: false
				// address: {},
				// defaulAddress: {}
			};
		},
		computed: {
			// address1 () {
			// 	return this.address.address ? this.address.address.split('-')[0] : ''
			// },
			// address2 () {
			// 	return this.address.address ? this.address.address.split('-')[1] : ''
			// },
			totalPrice () {
				return this.item.price * this.num
			},
			userServerInfo () {  //用户服务器信息
				return this.$store.state.userServerInfo
			}
		},
		methods: {
			// chooseAddress () {
			// 	if (this.userServerInfo.type === 3) {
			// 		this.$refs.toast.hover('政委不可兑换')
			// 	} else {
			// 		uni.navigateTo({
			// 			url: '../address/address?from=detail'
			// 		})	
			// 	}
			// },
			submit () {
				if (this.num) {
					if (this.userServerInfo.bonus >= this.totalPrice) {
						// if (this.address.id) {
							if (!this.requesting) {
								this.requesting = true
								this.$ajax.get(`${api_submitExchange}?gift_id=${this.item.id}&num=${this.num}&address_id=123`).then(([ , { data: res }]) => {
									if (res.code === 200) {
										uni.$emit('MESSAGE', '兑换成功', 2345, 'bottom')  //提示地址选择成功
										this.$store.dispatch('onLaunch')
										setTimeout(() => {
											uni.navigateBack()
										}, 567)
									} else {
										this.$refs.toast.hover('兑换失败：库存不足')
									}
								})
							}
						// } else {
							// this.$refs.toast.hover('请选择地址')
						// }
					} else {
						this.$refs.toast.hover('奖学金余额不足')
					}
				} else {
					this.$refs.toast.hover('数量不能为空')
				}
			}
		},
		created() {  //加载完成后开启监听全局 MESSAGE 事件
			this.item = getApp().globalData.detail //从兑换列表页面进入当前页面后从 getApp().globalData.detail 取值
			uni.$on('MESSAGE', (m, d, p) => {  //m 要提示的文字信息  d 文字信息出现的时常  p 文字信息出现的位置
				this.$refs.toast.hover(m, d, p)
			})
			// this.$ajax.get(api_getAddress).then(([ , { data: res}]) => {  //获取地址列表
			// 	res.data.list.forEach((e) => {  //把默认地址放在 defaulAddress 和 address 里
			// 		if (e.status === 1) {
			// 			this.defaulAddress = e
			// 			this.address = e
			// 		}
			// 	})
			// })
		},
		// onShow() {  //页面显示时（可能是从地址选择页面返回的, 如果是从地址选择页面返回的，那么 getApp().globalData.choosedAddress 的值就是选择的地址对象）
		// 	this.address = getApp().globalData.choosedAddress ? getApp().globalData.choosedAddress : this.defaulAddress
		// 	getApp().globalData.choosedAddress = null
		// }
	}
</script>

<style lang="scss" scoped>
	.detail {
		@include page();
		.content {
			background: $custom-nav-borderbot-color;
			.top {
				margin-top: $custom-nav-borderbot-height;
				box-sizing: border-box;
				padding: 0 30rpx;
				background: #FFFFFF;
				.info {
					height: 230rpx;
					padding-top: 15rpx;
					padding-bottom: 35rpx;
					display: flex;
					.pic {
						height: 180rpx;
						width: 180rpx;
						position: relative;
						margin-right: 24rpx;
						border-radius: 5rpx;
						overflow: hidden;
						image {
							width: 100%;
							height: 100%;
						}
						.bg {
							position: absolute;
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
							background: rgba(0, 0, 0, .05);
						}
					}
					.right {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.name {
							font-size: 36rpx;
						}
						.des {
							font-size: 26rpx;
						}
						.price {
							flex: 1;
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: space-between;
						}
					}
				}
				.item {
					display: flex;
					font-size: 32rpx;
					height: 98rpx;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1rpx solid #EEEEEE;
					text {
						&.cuIcon-right {
							line-height: 140rpx;
						}
					}
					.address-text {
						width: 60%;
						font-size: 30rpx;
						view {
							height: 70rpx; 
							line-height: 70rpx;
							white-space: nowrap; 
							text-overflow: ellipsis; 
							overflow: hidden;
							border-bottom: 1rpx solid #eee;
						}
					}
				}
			}
			.mark {
				font-size: 26rpx;
				padding: 10px 30rpx;
				box-sizing: border-box;
			}
			.submit {
				width: 400rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				font-size: 32rpx;
				color: #FFFFFF;
				background: #FA6342;
				border-radius: 35rpx;
				margin: 128rpx auto 0;
			}
		}
	}
</style>
