<template>
	<view class="constant">
		<view class="constantitem" @click="object_id =null,overlayshow = true">
			<view>扫码核销</view>
			<view><up-icon name="arrow-right" color="#909399" size="20"></up-icon></view>
		</view>
		<view class="constantitem" @click="clickpath('PAGES_WEITEOFF_RECORD',1)">
			<view>美团记录</view>
			<view><up-icon name="arrow-right" color="#909399" size="20"></up-icon></view>
		</view>
		<view class="constantitem" @click="clickpath('PAGES_WEITEOFF_RECORD',2)">
			<view>抖音记录</view>
			<view><up-icon name="arrow-right" color="#909399" size="20"></up-icon></view>
		</view>
		
		<!-- 核销准备 -->
		<up-overlay :show="overlayshow">
			<view class="boxoverlay">
				<view class="rect" @tap.stop>
					<view class="top">
						团购卷核销
					</view>
					<view class="subsection">
						<up-subsection :list="subsectionlist" :current="subsectioncurrent" @change="sectionChange"></up-subsection>
					</view>
					<view class="search">
						<up-search :show-action="false" searchIcon="scan" :clearabled="true" @clickIcon='clickIcon'
							placeholder="请扫码或者输入卷码" v-model="object_id"></up-search>
					</view>
					<view class="search">
						<up-alert fontSize='10' :show-icon="true" title="请使用相机识别扫码" type="warning"
							:closable="true"></up-alert>
					</view>
					<view class="bouttonbox">
						<view class="keep" @click="confirms"> 确认 </view>
						<view class="cancel" @click="overlayshow = false"> 取消 </view>
					</view>
				</view>
			</view>
		</up-overlay>
		<!-- 选择商品 -->
		<commodity ref="refcommodity"></commodity>
		<!-- 二维码 -->
		<up-overlay :show="qrcodes.show" @click="qrcodes.show = false">
			<view class="boxoverlay">
				<view class="rect" @tap.stop
					style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
					<!-- <view>{{subsectioncurrent==0?'请用美团':'抖音'}}</view> -->
					<view style="padding-bottom:40rpx;font-weight: 600;">请进行手机扫码</view>
					<up-qrcode :size="200" :val="qrcodes.val"></up-qrcode>
				</view>
			</view>
		</up-overlay>

	</view>
</template>

<script setup>
	import { onLoad, onShow, onUnload, } from '@dcloudio/uni-app'
	import { computed, reactive, ref, watch } from 'vue'
	
	import commodity from '../components/commodity.vue'
	
	import go from '@/commons/utils/go.js'
	
	import {
		userlogout,
		douyincheckIn,
		fulfilmentcertificateprepare, //准备核销
		searchstorestatus, //状态查询
		getuisdk //获取uisdk 绑定 链接
	} from '@/http/php/api.ts';
	
	//显示
	const overlayshow = ref(false);
	
	// 切换
	const subsectioncurrent = ref(0);
	const subsectionlist = ref(['美团', '抖音']);
	const sectionChange = (index) => {
		subsectioncurrent.value = index;
		uni.setStorageSync('clint_type', index + 1)
	
	}
	// 二维码或者条形码
	const object_id = ref(null)
	// 二维码
	const qrcodes = reactive({
		val: 'www.baidu.com',
		icon: '@/static/logo.png',
		show: false
	})
	// 选择商品
	const refcommodity = ref(null)
	
	onShow(async () => {})
	
	// 销毁组件
	onUnload(async () => {
		// 退出
		await userlogout()
	})
	onLoad(async () => {
		// 登录  会员入签
		let res = await douyincheckIn({
			token: uni.getStorageSync("iToken").tokenValue,
			loginName: uni.getStorageSync("shopInfo").id,
			clientType: 'ADMIN'
		})
		uni.setStorageSync('phpuserinfo', res.userInfo)
		uni.setStorageSync('clint_type', 1)
	})
	
	/**
	 * 拉起扫码
	 */
	const clickIcon = () => {
		uni.scanCode({ // 允许从相机和相册扫码
			success: (res) => {
				console.log('条码类型：' + res.scanType);
				console.log('条码内容：' + res.result);
				object_id.value = res.result
			}
		});
	}
	
	/**
	 * 首先获取状态
	 */
	let confirms = async () => {
		if (object_id.value == null) {
			uni.showToast({
				title: '请扫码或者输入卷码',
				icon: 'none'
			})
			return false;
		}
		let res = await searchstorestatus()
		// status == 0 则需要显示二维码   ==1   去核销
		if (res.status == 0) {
			uni.showModal({
				title: '首次核销需要绑定店铺，是否绑定',
				confirmText:"去绑定",
				cancelText:"取消",
				success: async (res) => {
					if (res.confirm) {
						qrcodes.val = await getuisdk()
						overlayshow.value = false
						qrcodes.show = true
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
			
				}
			})
			
		} else {
			clickkeep()
		}
	}
	
	/**
	 * 点击确定去核销
	 */ 
	const clickkeep = async () => {
		let data = null
		if (uni.getStorageSync('clint_type') == 1) {
			data = {
				code: object_id.value
			}
		} else {
			data = {
				object_id: object_id.value
			}
		}
		let res = await fulfilmentcertificateprepare(data)
		overlayshow.value = false
		refcommodity.value.open(res)
	}
	
	/**
	 * 跳转
	 */
	const clickpath = (URL, title) => {
		uni.setStorageSync('clint_type', title)
		go.to(URL)
	}

</script>

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

	.constant {
		.constantitem {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #fff;
			padding: 24rpx 32rpx;
		}

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

			.rect {
				padding: 32rpx 28rpx;
				width: 80%;
				background-color: #fff;
				border-radius: 18rpx;

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

				.subsection {
					margin-top: 24rpx;
				}

				.search {
					margin-top: 24rpx;
				}

				.bouttonbox {
					margin-top: 80rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.keep {
						width: 490rpx;
						height: 80rpx;
						background: #318AFE;
						border-radius: 40rpx 40rpx 40rpx 40rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: 32rpx;
						color: #FFFFFF;
						text-align: center;
						line-height: 80rpx;
					}

					.cancel {
						text-align: center;
						width: 490rpx;
						height: 80rpx;
						background: #ffffff;
						border-radius: 40rpx 40rpx 40rpx 40rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						line-height: 80rpx;
					}
				}
			}
		}
	}
</style>