<template>


	<page-meta :page-style="themeColor"></page-meta>
	<view class="luckylog_wrapper">
		<!-- <view class="tab color-bg">
			<view class="tab-left">
				<picker mode="date" :value="searchType.check_time" @change="bindDateChange" fields="month">
					<view class="uni-input">
						{{ date }}
						<text class="iconfont icon-iconangledown"></text>
					</view>
				</picker>
			</view>
		</view> -->

		<mescroll-uni @getData="getLuckyLog" class="member-point" ref="mescroll">
			<view slot="list">
				<!-- <view class="tab color-bg"> -->
				<view class="tab-left">
					<picker mode="date" :value="searchType.check_time" @change="bindDateChange" fields="month">
						<view class="uni-input">
							{{ date }}
							<text class="iconfont icon-iconangledown"></text>
						</view>
					</picker>
				</view>
				<!-- </view> -->
				<block v-if="luckyLogList.length">
					<view class="detailed-wrap">
						<view class="cont">
							<view class="detailed-item" v-for="(item, index) in luckyLogList" :key="index"
								@click="exchangeGoods(item)">
								<image class="logImg" :src="$util.img(item.image)"></image>
								<view class="logText">
									<view class="left">
										<view class="title">{{ item.title }}</view>
										<view class="time">{{ item.create_time }}</view>
									</view>
									<view class="right">
										<!-- // 1普通商品  2优惠券  3积分   4余额  0未中奖 -->
										<view v-show="item.type == 0">
											未中奖
										</view>
										<view v-show="item.type == 1" class="color-base-text">
											<view class="color-base-text" style="text-align: right;">
												普通商品
											</view>
											<view style="text-align: right;color:#2979ff">
												详情
											</view>
										</view>
										<view v-show="item.type == 2" class="color-base-text">
											优惠券
										</view>
										<view v-show="item.type == 3" class="color-base-text">
											积分
										</view>
										<view v-show="item.type == 4" class="color-base-text">
											余额
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>

				<block v-else>
					<view class="cart-empty"><ns-empty></ns-empty></view>
				</block>
			</view>
		</mescroll-uni>


		<u-modal :show="exchangeModal" :showCancelButton="true" cancelText="取消" confirmText="确认"
			@cancel="exchangeModal=false" @confirm="confirmExchange()">

			<u--form labelPosition="left" :model="formData" :rules="rules" ref="uForm">
				<u-form-item label="收货人" prop="name" ref="item1" labelWidth="80">
					<u--input placeholder="请输入收货人" v-model="formData.name"></u--input>
				</u-form-item>
				<u-form-item label="联系电话" prop="phone" ref="item1" labelWidth="80">
					<u--input placeholder="请输入联系电话" type="number" v-model="formData.phone"></u--input>
				</u-form-item>
				<u-form-item label=" 收货地址" prop="address" ref="item1" labelWidth="80">
					<u--textarea placeholder="请输入收货地址" v-model="formData.address"></u--textarea>
				</u-form-item>
			</u--form>


		</u-modal>

		<u-overlay :show="logisticsModal" @click="logisticsModal = false">
			<view class="warp">
				<view class="rect" @tap.stop>
					<view class="cont">
						<view class="title">
							发货信息
						</view>
						<view class="">
							<view class="titleTip">
								备注：
							</view>
							<u--textarea height="100" disabled v-if="itemData.remark" border="none"
								placeholder="11111111" v-model="itemData.remark"
								placeholderStyle="font-size:28rpx"></u--textarea>
						</view>
						<!-- <view class="">
							<view class="titleTip">
								待发货：
							</view>
							<text style="color: #aaa;"> 暂无物流信息 </text>
						</view> -->
					</view>
				</view>
			</view>
		</u-overlay>


		<loading-cover ref="loadingCover"></loading-cover>
	</view>

</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				exchangeModal: false, //收货地址弹框
				logisticsModal: false, //物流弹框
				date: currentDate,
				searchType: {
					check_time: ''
				},
				luckyLogList: [],
				itemData: {},
				formData: {
					name: '',
					phone: '',
					address: '',
				},
				rules: {
					name: {
						type: 'string',
						required: true,
						message: '请填写收货人',
						trigger: 'blur',
					},
					phone: {
						required: true,
						message: '请填写联系方式',
						trigger: 'blur'
					},
					address: {
						type: 'string',
						required: true,
						message: '请填写收货地址',
						trigger: 'blur'
					},

				},
			};
		},
		onShow() {},
		onLoad() {},
		methods: {
			bindDateChange: function(e) {
				var temp = e.target.value;
				var tempArr = temp.split('-');
				this.date = tempArr[0] + '年' + tempArr[1] + '月';
				this.searchType.check_time = e.target.value;
				this.$refs.mescroll.refresh();
				console.log(this.searchType.check_time);
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}年${month}月`;
			},
			getLuckyLog(mescroll) {
				this.$api.sendRequest({
					url: '/api/draw/getLogList',
					data: {
						page_size: mescroll.size,
						page: mescroll.num,
						check_time: this.searchType.check_time
					},
					success: res => {
						let newArr = [];
						let msg = res.message;
						if (res.code == 0 && res.data) {
							newArr = res.data.list;
						} else {
							this.$util.showToast({
								title: msg
							});
						}
						mescroll.endSuccess(newArr.length);
						//设置列表数据
						if (mescroll.num == 1) {
							this.luckyLogList = []; //如果是第一页需手动制空列表
							this.related_id = 0;
						}
						this.luckyLogList = this.luckyLogList.concat(newArr); //追加新数据
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail: res => {
						mescroll.endErr();
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			exchangeGoods(item) {
				this.itemData = {};
				if (item.type == 1) {
					this.itemData = item;
					if (!Object.keys(this.itemData.address_info).length) {
						this.exchangeModal = true;
					} else {
						this.logisticsModal = true

					}
					console.log(this.itemData);
				}
			},
			confirmExchange() {
				if (!this.formData.name) {
					this.$util.showToast({
						title: '请填写收货人'
					});
					return;
				}
				if (!this.formData.phone) {
					this.$util.showToast({
						title: '请填写联系方式'
					});
					return;
				}
				if (!this.formData.address) {
					this.$util.showToast({
						title: '请填写收货地址'
					});
					return;
				}


				if (!uni.$u.test.mobile(this.formData.phone)) {
					this.$util.showToast({
						title: '请输入正确的手机号'
					});
					return;
				}
				console.log(this.itemData.id, JSON.stringify(this.formData));
				this.$api.sendRequest({
					headers: {
						'Context-Type': 'application/json'
					},
					url: '/api/draw/doLogAddress',
					data: {
						id: this.itemData.id,
						address_info: JSON.stringify(this.formData),
					},
					success: res => {
						if (res.code >= 0) {
							this.exchangeModal = false;
						}
					},
				});
			}
		}
	};
</script>

<style lang="scss">
	/deep/ .fixed {
		position: relative;
		top: 0;
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		width: calc(100vw - 60rpx);
		min-height: 100rpx;
		border-radius: 20rpx;
		background-color: #fff;

		.cont {
			padding: 30rpx;

			.u-textarea--disabled {
				// background: none;
			}

			.u-textarea {
				padding: 0;
			}
		}

		.title {
			font-weight: 600;
			font-size: 36rpx;
			text-align: center;
			margin-bottom: 20rpx;
		}

		.titleTip {
			font-weight: 600;
			font-size: 32rpx;
		}
	}

	.luckylog_wrapper {
		.tab-left {
			display: flex;
			padding: 20rpx;
		}

		.tab {
			position: fixed;
			top: 0;
			width: 100%;
			z-index: 10;
			display: flex;
			justify-content: space-between;
			height: 80rpx;
			background-color: $color-bg;

			view {
				flex: 1;
				text-align: center;
				line-height: 80rpx;

				text {
					margin-left: 10rpx;
					font-size: $font-size-base;
				}
			}

			.tab-left {
				display: flex;
				padding-left: 30rpx;
			}

			.tab-right {
				display: flex;
				justify-content: flex-end;
				padding-right: 40rpx;
			}
		}

		.cart-empty {
			margin-top: 208rpx !important;
		}

		.detailed-wrap {
			background: #fff;
			position: relative;
			z-index: 9;
			padding-top: 80rpx;

			.head {
				display: flex;
				height: 90rpx;

				&>view {
					flex: 1;
					text-align: left;
					padding: 0 $padding;
					line-height: 90rpx;
				}
			}

			.cont {
				background: #fff;
				width: 100%;
				margin: 0 auto;

				.detailed-item {
					padding: 30rpx 0 32rpx;
					margin: 0 32rpx;
					border-bottom: 2rpx solid $color-line;
					position: relative;
					box-sizing: border-box;
					display: flex;

					.logImg {
						width: 80rpx;
						height: 80rpx;
						margin-right: 30rpx;
					}

					.logText {
						width: 100%;
						display: flex;
						justify-content: space-between;

						.left {
							.logType {}

							.time {
								font-size: 12px;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #999;
							}
						}
					}

					&:last-of-type {
						border-bottom: none;
					}
				}
			}
		}
	}
</style>