<template>
	<view class="page-cont">
		<view class="list" v-for="(item,index) in list" :key="item.id">
			<view class="no">奖品{{index+1}}</view>
			<view class="names">{{item.prizeDesc}}</view>
			<view class="lingjiang" v-if="item.state == 'WAIT_RECEIVE'" @click="lingjiang(item)">领奖</view>
			<view class="viewsDetail" v-else @click="viewsDetail(item)">查看详情</view>
		</view>
		<view style="padding:150rpx 30rpx 0;" v-if="list.length == 0">
			<u-empty text="还未中奖" :icon-size="80" mode="list"></u-empty>
			<view style="text-align: center;">
				<u-button size="mini" @click="goBack">去抽奖</u-button>
			</view>
		</view>
		
		<!-- 查看详情弹框 -->
		<u-popup v-model="showViews" mode="center" close-icon-color="#ffffff" closeable :border-radius="30" width="500rpx">
			<view class="lottery-content">
				<view class="lottery-title">物流信息</view>
				<view class="lottery-form">
					<view>
						<view class="labes">收件人</view>
						<view>{{curRevice.receiverName}}</view>
					</view>
					<view>
						<view class="labes">联系电话</view>
						<view>{{curRevice.receiverPhone}}</view>
					</view>
					<view>
						<view class="labes">收货地址</view>
						<view>{{curRevice.receiveAddress}}</view>
					</view>
					<view>
						<view class="labes">物流单号</view>
						<view>
							<view v-if="curRevice.state == 'WAIT_SEND_EXPRESS'">暂未发货，如收货信息有误， 请联系客服电话<text class="tell" @click="callPhone">{{kfPhone}}</text></view>
							<view v-else>
								中国邮政 <text class="tell">（单号：16546464645）</text> <u-button @click="copyWlCode" size="mini">复制</u-button>
							</view>
						</view>
					</view>
				</view>
				<view @click="showViews=false" class="lottery-confrim-btn">
					确定
				</view>
			</view>
		</u-popup>
		
		<!-- 乐豆领取详情弹框 -->
		<u-popup v-model="showLjLd" mode="center" close-icon-color="#ffffff" closeable :border-radius="30" width="500rpx" height="450rpx">
			<view class="lottery-content">
				<view class="lottery-title">欢迎领取</view>
				<view class="lottery-msg">
					您的奖励已到账，请在小程序【我的】-【乐豆明细】中查看奖励到账情况！
				</view>
				<view @click="showLjLd=false" class="lottery-confrim-btn">
					我知道了
				</view>
			</view>
		</u-popup>
		
		<!-- 收货地址详情弹框 -->
		<u-popup v-model="showAddr" mode="center" close-icon-color="#ffffff" closeable :border-radius="30" width="80%">
			<view class="lottery-content">
				<view class="lottery-title">收货信息</view>
				<view class="lottery-u-form">
					 <u-form :model="form" ref="uForm" :label-width="140" :error-type="['toast']">
					 	<u-form-item label="收货人" required prop="receiverName">
					 		<u-input placeholder="请输入收货人姓名" :maxlength="30" v-model="form.receiverName" />
					 	</u-form-item>
					 	<u-form-item label="收货电话" required prop="receiverPhone">
					 		<u-input placeholder="请输入收货电话" :maxlength="11" type="number" v-model="form.receiverPhone" />
					 	</u-form-item>
					 	<u-form-item label="省市区" required prop="receiveAreasName">
					 		<u-input v-model="areaInfo.label" placeholder="请选择省市区" @click="openAddress" type="select" />
					 		<Address ref="applyAddress" @onConfirm="areaConfirm"></Address>
					 	</u-form-item>
					 	<u-form-item label="详细地址" required prop="receiveAddress">
					 		<u-input type="textarea" :height="100" auto-height placeholder="请输入收货详细地址(最多100个字符)" :maxlength="100" v-model="form.receiveAddress" class="receiveAddress"/>
					 	</u-form-item>
					 </u-form>
				</view>
				<view @click="wlSubmit" class="lottery-confrim-btn">
					确定
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
import Address from '@/components/address.vue'
import {findAddressBycustomerNo, saveAddress} from '@/api/receiveAddress.js'
import { findWinPrize, receive } from '@/api/luckyDraw.js'
export default {
	components: {
		Address
	},
	data() {
		return {
			kfPhone:'', // 客服电话
			showViews: false, // 查看详情弹框
			showAddr: false ,// 实物奖品，收货地址弹框
			showLjLd: false, // 虚拟奖品领奖弹框
			form: {
				receiverName: '',
				receiverPhone: '',
				receiveAddress: '' // 详细地址
			},
			receiveAreas: '', //地址编码
			areaName: '', //地址
			areaInfo: {},  //  省市区
			areaIdArr: [],  //  省市区id数组
			list: [],
			curRevice: null
		}
	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	onLoad(option) {
		console.log(option,'option')
		this.getfindWinPrize()
		this.kfPhone = this.$store.state.vuex_kfMobile
	},
	onUnload() {
		this.form = {
			receiverName: '',
			receiverPhone: '',
			receiveAddress: '' // 详细地址
		}
	},
	methods: {
		goBack(){
			uni.navigateBack()
		},
		// 电话客服
		callPhone () {
			uni.makePhoneCall({
			    phoneNumber: this.kfPhone
			})
		},
		getfindWinPrize(){
			uni.showLoading({
				mask: true,
				title: '正在加载...'
			})
			findWinPrize().then(res => {
				if(res.status == 200){
					this.list = res.data
				}
				uni.hideLoading()
			})
		},
		// 获取用户收货地址
		getAddress() {
			 findAddressBycustomerNo({}).then(res => {
				 console.log(res)
				 if (res.status == 200&&res.data.length) {
					 this.form = res.data[0]
					 if (this.form.receiveAreasName) {
						 this.areaIdArr = this.form.receiveAreas.split(',')
						 this.areaInfo.label = this.form.receiveAreasName.replace(/\,/g,'-')
					 }
					 this.$u.vuex("vuex_OrderAddress",this.form)
				 }
			 })
		},
		//  选择省区市
		areaConfirm(e) {
			console.log('已选择的省市区', e)
			this.areaInfo = e
			this.areaIdArr = [ e.provinceCode, e.cityCode, e.areaCode ]
		},
		openAddress(){
			//  省市区回显参数为省市区id数组
			this.$refs.applyAddress.open(this.areaIdArr)
		},
		// 去抽奖
		toLuckDraw() {
			uni.navigateBack()
		},
		// 查看详情
		viewsDetail(item){
			this.curRevice = item
			if(item.prizeType == 'GOODS'){
				this.showViews = true
			}else{
				this.showLjLd = true
			}
		},
		// 领奖
		lingjiang(item){
			this.curRevice = item
			if(item.prizeType == 'GOODS'){
				this.showAddr = true
				this.getAddress()
			}else{
				this.saveReceive()
			}
		},
		// 复制单号
		copyWlCode(){
			uni.setClipboardData({
			    data: 'hello',
			    success: function () {
			        console.log('success');
			    }
			});
		},
		// 保存物流信息
		wlSubmit(){
			this.$refs.uForm.validate(valid => {
				if (valid) {
					console.log('验证通过');
					if (this.form.receiverName ==='') {
						uni.showToast({
							title: '请输入收货人姓名',
							icon: 'none'
						})
						return false
					}
					if (this.form.receiverPhone ==='') {
						uni.showToast({
							title: '请输入收货电话',
							icon: 'none'
						})
						return false
					}
					//  省市区
					if(this.areaIdArr.length == 0){
						uni.showToast({icon: 'none',title: '请选择省市区'})
						return
					}
					if (this.form.receiveAddress ==='') {
						uni.showToast({
							title: '请输入详细地址',
							icon: 'none'
						})
						return false
					}
					let params = {
						receiverName: this.form.receiverName,
						receiverPhone: this.form.receiverPhone,
						receiveAreasName: this.areaInfo.label.replace(/\-/g,','), // 地址名称
						receiveAreas: this.areaIdArr.join(','), 
						receiveAddress: this.form.receiveAddress // 详细地址
					}
					if(this.form.id) {
						params.id = this.form.id
					}
					// 保存我的收货地址
					saveAddress(params).then(res=>{
						if(res.status == 200) {
							// 保存领奖收货信息
							this.saveReceive(params)
						} 
					})
				}
			});
		},
		// 领奖
		saveReceive(params){
			let item = this.curRevice
			let isGoods = item.prizeType == 'GOODS'
			let data = {
				"luckyDrawWinNo": this.curRevice.luckyDrawWinNo
			}
			// 实物,发货地址
			if(isGoods){
				data.receiverName = params.receiverName
				data.receiverPhone = params.receiverPhone
				data.receiveAddress = params.receiveAreasName +' '+ params.receiveAddress
			}
			receive(data).then(res => {
				if(res.status == 200){
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
					
					if(isGoods){
						this.showAddr = false
					}else{
						this.showLjLd = true
					}
					
					this.list = []
					this.getfindWinPrize()
				}
			})
		}
	} 
}
</script>

<style lang="less">
	.page-cont{
		width: 100%;
		padding: 20rpx;
		.list{
			display: flex;
			align-items: center;
			> view{
				padding: 15rpx;
				color: #FFFFFF;
				background-color: #01c9b2;
				border-right: 1px solid #FFFFFF;
				border-bottom: 1px solid #FFFFFF;
				text-align: center;
			}
			.no{
				width: 150rpx;
			}
			.names{
				width: 50%;
				flex-grow: 1;
			}
			.lingjiang{
				background-color: #ffaa00;
				color: #FFFFFF;
				width: 25%;
			}
			.viewsDetail{
				background-color: #008273;
				color: #FFFFFF;
				width: 25%;
			}
		}
		.tell{
			color: #0A98D5;
		}
		.lottery-content{
			height: 100%;
			position: relative;
			background: url(../../static/lottery_winbg1.png) no-repeat center top;
			background-size: 100% auto;
			.lottery-confrim-btn{
				width: 100%;
				display: flex;
				justify-content: center;
				font-size: 32rpx;
				border-top: 1px solid #eee;
				padding: 30rpx 0;
				color: #21d5c0;
			}
			.lottery-title{
				padding: 20rpx 30rpx;
				text-align: center;
				color: #FFFFFF;
				font-size: 36rpx;
				font-weight: bold;
			}
			.lottery-form{
				padding: 80rpx 30rpx 20rpx;
				> view{
					display: flex;
					padding: 10rpx;
					.labes{
						width: 150rpx;
					}
					>view{
						&:last-child{
							flex-grow: 1;
							width: 80%;
							color: #666;
							display: flex;
							align-items: center;
							text{
								word-break: break-all;
							}
						}
					}
				}
			}
			.lottery-msg{
				padding: 70rpx 60rpx;
				text-align: center;
				line-height: 42rpx;
			}
			.lottery-u-form{
				padding: 50rpx;
				.receiveAddress{
					width: 100%;
					line-height: 1.5em;
					box-sizing: border-box;
					font-style: normal;
				}
			}
		}
	}
</style>
