<template>
	<view v-if="istrue" class="home plr30 pt30" style="overflow-y: auto;">
		<view class="flex_between flex_items"  style="background-color: #fff">
			<text class="f26 ml15 bold" style="color: #333333;">手机号码</text>
			<van-field class="mr20" input-align="right" style="width: 400rpx;padding-right: 0;"
				v-model="form.mobile" label="" placeholder="手机号码" />
		</view>
		<view class="flex_between flex_items"  style="background-color: #fff">
			<text class="f26 ml15 bold" style="color: #333333;">分发开始时间</text>
			<van-field
				readonly
				clickable
				name="datetimePicker"
				v-model="start_time"
				placeholder="点击选择分发开始时间"
				@click="showEvent('start')"
				class="mr20" 
				input-align="right" 
				style="width: 400rpx;padding-right: 0;"
			/>
		</view>
		<view class="flex_between flex_items"  style="background-color: #fff">
			<text class="f26 ml15 bold" style="color: #333333;">分发结束时间</text>
			<van-field
				readonly
				clickable
				name="datetimePicker"
				v-model="end_time"
				placeholder="点击选择分发结束时间"
				@click="showEvent('end')"
				class="mr20" 
				input-align="right" 
				style="width: 400rpx;padding-right: 0;"
			/>
		</view>
		<view class="mt60 flex_items flex_center">
				<view @click="searchEvent" class="flex_items flex_center"
					style="width: 654rpx;height: 86rpx;background:linear-gradient(90deg, #A21E2E 0%, #190F58 100%);box-shadow: 0rpx 8rpx 14rpx 0rpx rgba(83,139,135,0.2);border-radius: 12rpx;">
					<text class="f28" style="color: #fff;">查询</text>
				</view>
			</view>
		<view v-if="list.length!=0" class="pb40 flex_column flex_items">
			<view v-for="(item,index) in list" :key="index" class="plr20 ptb30 pos bgwhite mt30"
				style="box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(220,224,236,0.28);border-radius: 16rpx;width: 100%;">
				<view class="flex_between flex_items">
					<text class="f26 bold" style="color: #333;">ID:</text>
					<text class="f24" style="color: #1F1057;">{{item.id}}</text>
				</view>
				<view v-if="item.product_type==1" class="flex_between flex_items mt30">
					<text class="f26 bold" style="color: #333;">手机号:</text>
					<text class="f24" style="color: #1F1057;">{{item.mobile}}</text>
				</view>
				<view v-if="item.product_type==2" class="flex_between flex_items mt30">
					<text class="f26 bold" style="color: #333;">名称:</text>
					<view class="f24 one" style="color: #1F1057;">{{item.main.name}}</view>
				</view>
				<view class="flex_between flex_items mt30">
					<text class="f26 bold" style="color: #333;">面额:</text>
					<text class="f24" style="color: #1F1057;">{{item.main.face_amount}}</text>
				</view>
				<view class="flex_between flex_items mt30">
					<text class="f26 bold" style="color: #333;">分发人:</text>
					<text class="f24" style="color: #1F1057;">{{item.manager_name}}</text>
				</view>
				<view class="flex_between flex_items mt30">
					<text class="f26 bold" style="color: #333;">手机号:</text>
					<text class="f24" style="color: #1F1057;">{{item.mobile}}</text>
				</view>
				<view class="flex_between flex_items mt30">
					<text class="f26 bold" style="color: #333;">状态:</text>
					<text class="f24" style="color: #1F1057;" v-if="item.status == 1">待分发</text>
					<text class="f24" style="color: #1F1057;" v-else-if="item.status == 2">已领取</text>
					<text class="f24" style="color: #1F1057;" v-else-if="item.status == 3">已过期</text>
					<text class="f24" style="color: #1F1057;" v-else-if="item.status == 4">已作废</text>
					<text class="f24" style="color: #1F1057;" v-else>已分发</text>
				</view>
				<view class="flex_between flex_items mt30">
					<text class="f26 bold" style="color: #333;">创建时间:</text>
					<text class="f24" style="color: #1F1057;">{{item.create_time}}</text>
				</view>
				<view class="flex_between flex_items mt30">
					<text class="f26 bold" style="color: #333;">分发时间:</text>
					<text class="f24" style="color: #1F1057;">{{item.distribute_time}}</text>
				</view>
				<view class="flex_between mt30">
					<text class="f26 bold" style="color: #333;">二维码:</text>
					<view @click="geterwei(item.qr_args)" style="width: 160rpx;height: 160rpx;overflow: hidden;">
						<qqe :ids="'aq' + item.id" :uri="item.qr_args"></qqe>
					</view>
				</view>
				<!-- 		<view class="mt60 flex_items flex_center">
					<view @click="godis(item,'again')" class="flex_items flex_center"
						style="width: 654rpx;height: 86rpx;background:linear-gradient(90deg, #A21E2E 0%, #190F58 100%);box-shadow: 0rpx 8rpx 14rpx 0rpx rgba(83,139,135,0.2);border-radius: 12rpx;">
						<text class="f28" style="color: #fff;">重新分发</text>
					</view>
				</view> -->
			</view>
		</view>
		<view v-else class="ptb50 plr30 f26 f-center" style="color: #9a9a9a;margin-top: 80rpx;">--暂无数据--</view>
		<van-popup v-model="showPicker" position="bottom" :style="{ height: '30%' }">
			<van-datetime-picker
				type="date"
				@confirm="onConfirm"
				@cancel="showPicker = false"
				:min-date="minDate"
  				:max-date="maxDate"
			/>
		</van-popup>
		<van-overlay :show="show">
			<view class="wrapper" @click="closeqr">
				<view id="qrcode" @click.stop ref="qrcode" class="flex_items flex_center block"></view>
			</view>
		</van-overlay>
	</view>
</template>

<script>
	import qqe from "./qrcode.vue";
	import QRCode from "qrcodejs2";
	import {stringify} from 'qs'
	export default {
		data() {
			return {
				list: [],
				form: {
					page: 1,
					pageSize: 5,
					mobile: "",
				},
				start_time:"",
				end_time:"",
				istrue: false,
				show: false,
				showPicker:false,
				type:'',
				minDate: new Date(2020, 0, 1),
				maxDate: new Date(),
				total:0
			}
		},
		components: {
			qqe
		},
		onLoad() {
			this.getData()
		},
		methods: {
			getFormattedDate(date) {
				var year = date.getFullYear();
				var month = date.getMonth() + 1; // 月份是从0开始的
				var day = date.getDate();
				var hours = date.getHours();
				var minutes = date.getMinutes();
				var seconds = date.getSeconds();
				
				// 补零操作
				month = month < 10 ? '0' + month : month;
				day = day < 10 ? '0' + day : day;
				hours = hours < 10 ? '0' + hours : hours;
				minutes = minutes < 10 ? '0' + minutes : minutes;
				seconds = seconds < 10 ? '0' + seconds : seconds;
				
				// return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
				return year + '-' + month + '-' + day;
			},
			showEvent(type){
				this.type = type
				this.showPicker = true
			},
			onConfirm(time){
				this[`${this.type}_time`] = this.type === 'start' ? `${this.getFormattedDate(time)} 00:00:00` : `${this.getFormattedDate(time)} 23:59:59`
				this.showPicker = false
			},
			searchEvent(){
				this.form.page = 1
				this.form.distribute_time_at = ''
				this.list = []
				this.getData()
			},
			getData() {
				uni.showLoading({
					title: "加载中..."
				})
				let temp = []
				if(this.start_time){
					temp.push(this.start_time)
				}
				if(this.end_time){
					temp.push(this.end_time)
				}
				if(temp.length){
					this.form.distribute_time_at = temp.join(',')
				}
				this.api.getfenouts(this.form).then((res) => {
					if (res.data.code == 200) {
						uni.stopPullDownRefresh();
						if (res.data.data.data.length != 0) {
							res.data.data.data.forEach((item, index) => {
								this.list.push(item)
							})
							this.total = res.data.data.total
							this.istrue = true
						} else {
							this.istrue = true
							this.list = []
							uni.showToast({
								title: '暂无数据',
								icon: 'none'
							})
							return false
						}
					} else {
						this.istrue = true
						uni.hideLoading()
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
				})
			},
			getactivity() {
				this.api.getactivit(this.form).then((res) => {
					console.log(res)
					if (res.data.code == 200) {
						uni.stopPullDownRefresh()
						if (res.data.data.data.length != 0) {
							res.data.data.data.forEach((item, index) => {
								this.hotActivity.push(item)
							});
						} else {
							uni.showToast({
								title: "暂无更多活动",
								icon: "none"
							})
						}
						this.istrue = true
						uni.hideLoading()
					} else {
						uni.showToast({
							icon: "error",
							title: res.data.message
						})
					}
				})
			},
			golink(types) {
				let url = ""
				if (types == 'gua') {
					url = "http://139.9.58.213:8088/#/pages/scap/index?id=15"
				} else if (types == 'turn') {
					url = "http://139.9.58.213:8088/#/pages/turntable/index?id=15"
				} else if (types == 'around') {
					url = "http://139.9.58.213:8088/#/pages/around/index?id=15"
				} else {}
				var href = url
				window.open(href, '_self')
			},
			geterwei(uri) {
				this.show = true;
				this.$nextTick(() => {
					this.qrcode(uri);
				});
			},
			qrcode(uri) {
				let qrcode = new QRCode("qrcode", {
					width: 250,
					height: 250,
					text: uri,
				});
			},
			closeqr() {
				this.show = false;
				setTimeout(function() {
					document.getElementById("qrcode").innerHTML = "";
				}, 200);

			},

		},
		onReachBottom() {
			if(this.form.page * this.form.pageSize >= this.total) {
				console.log('已到最后一页，不再分页加载');
				return
			}
			uni.showLoading({
				title: "加载中..."
			})
			setTimeout(() => {
				this.form.page += 1
				this.getData()
			}, 1000)
		},
		onPullDownRefresh() {
			this.form.page = 1
			this.list = []
			this.getData()
		}
	}
</script>

<style>
	page {
		background: #FAFBFD !important;
	}

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

	.block {
		width: 500rpx;
		height: 500rpx;
		background-color: #fff;
	}
</style>