<template>
	<view class="container">
		<my-header-card
			:options="{
				name: '积分锁客',
				intro: '下单可获得积分，再次下单可使用积分抵扣',
				icon: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/4/11e5482336a94c2a91a10e2bf289126e.png'
			}"
			@load="(e) => (headHeight = e.height)"
		></my-header-card>
		<view class="content">
			<setting ref="settingRef" name="setting" key="setting" v-if="tabsActive == 0" />
			<productPage ref="productPageRef" name="productPage" key="productPage" v-if="tabsActive == 1" />
			<record ref="recordRef" name="record" key="record" :top="headHeight + 54" v-if="tabsActive == 2" />
			<userRecord ref="userRecordRef" name="userRecord" key="userRecord" v-if="tabsActive == 3" />
		</view>
		<view class="tab-wrap" :style="{ top: `${headHeight}px` }">
			<view class="tab-list">
				<view class="item" v-for="(item, index) in tabs" :class="{ active: tabsActive == index }" :key="item.value" @click="tabClickHandle(item, index)">
					<text class="t">{{ item.label }}</text>
				</view>
			</view>
		</view>
		<my-footer-btn type="horizontal" showCancel @confirm="settingRef.submitHandle()" @cancel="backHandle" v-if="tabsActive == 0"></my-footer-btn>
		<my-footer-btn confirmText="添加商品" type="horizontal" @confirm="toAddProduct" v-if="tabsActive == 1"></my-footer-btn>
		<my-footer-btn confirmText="扫码核销" v-if="tabsActive == 2" @confirm="scanHandle"></my-footer-btn>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { onLoad, onShow, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
import setting from './components/setting.vue';
import productPage from './components/productPage.vue';
import record from './components/record.vue';
import userRecord from './components/userRecord.vue';

const settingRef = ref(null);
const productPageRef = ref(null);
const recordRef = ref(null);
const userRecordRef = ref(null);

const headHeight = ref(0);
const tabsActive = ref(0);
const tabs = ref([
	{
		value: 1,
		label: '基础设置'
	},
	{
		value: 2,
		label: '商品设置'
	},
	{
		value: 3,
		label: '兑换记录'
	},
	{
		value: 4,
		label: '用户积分'
	}
]);

function tabClickHandle(item, index) {
	tabsActive.value = index;
}

function backHandle() {
	uni.navigateBack();
}

function toAddProduct() {
	uni.navigateTo({
		url: '/pageMarket/points/addProduct'
	});
}

// 扫码核销
function scanHandle() {
	uni.scanCode({
		success: (res) => {
			console.log('扫码核销===', res.result);
			recordRef.value.checkoutAjax(res.result);
		}
	});
}

// 下拉刷新
onPullDownRefresh(() => {
	switch (tabsActive.value) {
		case 0:
			break;
		case 1:
			productPageRef.value.pointsGoodsPageAjax(1, true);
			break;
		case 2:
			recordRef.value.goodsRecordPageAjax(1, true);
			break;
		case 3:
			userRecordRef.value.pointUserPageAjax(1, true);
			break;
		default:
			break;
	}
});

onReachBottom(() => {
	switch (tabsActive.value) {
		case 0:
			break;
		case 1:
			productPageRef.value.reachBottom();
			break;
		case 2:
			recordRef.value.reachBottom();
			break;
		case 3:
			userRecordRef.value.reachBottom();
			break;
		default:
			break;
	}
});

onShow(() => {
	switch (tabsActive.value) {
		case 0:
			break;
		case 1:
			productPageRef.value.pointsGoodsPageAjax(1);
			break;
		case 2:
			recordRef.value.goodsRecordPageAjax(1);
			break;
		case 3:
			break;
		default:
			break;
	}
});
</script>

<style>
page {
	background-color: #f8f8f8;
}
</style>
<style scoped lang="scss">
$bgColor: #e6f0ff;
$primarColor: #318afe;
.content {
	padding: calc(54px + 28upx) 28upx 28upx;
}
.tab-wrap {
	height: 54px;
	padding: 10px 14px;
	background-color: #fff;
	width: 100%;
	position: fixed;
	left: 0;
	z-index: 999;
	.tab-list {
		width: 100%;
		height: 100%;
		display: flex;
		background-color: $bgColor;
		padding: 6upx;
		border-radius: 12upx;
		.item {
			flex: 1;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 8upx;
			.t {
				color: $primarColor;
				font-size: 28upx;
			}
			&.active {
				background-color: $primarColor;
				.t {
					color: #fff;
				}
			}
		}
	}
}
</style>
