<template>
	<view class="min-page u-font-28">
		<up-sticky>
			<view class="bg-fff top">
				<view class="bg-fff container u-flex u-m-b-48">
					<image style="width: 60rpx; height: 60rpx" src="/pageMarket/static/images/member.png"></image>
					<view class="u-flex-1 u-flex u-p-l-24">
						<view class="u-font-28 u-flex-1 u-p-r-4">
							<view class="color-333 font-bold">超级会员</view>
							<view class="color-666 u-m-t-4 u-font-24">用户会员管理设置</view>
						</view>
						<up-switch v-model="superVipStore.config.isOpen" size="18" active-value="1" inactive-value="0" :disabled="isMainShop() ? false : true"></up-switch>
					</view>
				</view>
				<my-tabs v-model="active" :list="tabs" textKey="label"></my-tabs>
				<view v-if="active == 2" class="u-flex u-row-between u-m-t-32" style="gap: 58rpx">
					<!-- <view class="u-flex-1 filter-box" style="border-radius: 100rpx">
						<up-icon name="search" size="18"></up-icon>
						<input class="u-m-l-10 u-font-28" type="text" placeholder-class="color-999 u-font-28" placeholder="搜索关键词" v-model="keyWord" @blur="keyWordBlur" />
						<up-icon v-if="keyWord" name="close" size="14" @click="clearKeyWord"></up-icon>
					</view> -->
					<view class="u-flex-1">
						<my-user-select v-model="userId" @change="search()" ></my-user-select>
					</view>
					<view class="u-flex-1 u-font-28 filter-box u-flex u-row-between" @click="showTimeArea = true">
						<template v-if="userComponentQuery.startTime && userComponentQuery.endTime">
							<text class="u-font-20">
								{{ userComponentQuery.startTime }} -
								{{ userComponentQuery.endTime }}
							</text>
							<view @click.stop="clearTime">
								<up-icon name="close" size="14"></up-icon>
							</view>
						</template>
						<template v-else>
							<text class="color-999">请选择日期范围</text>
							<up-icon name="arrow-right" size="12"></up-icon>
						</template>
					</view>
				</view>

				<view v-if="active == 2" class="u-flex u-p-l-32 u-p-r-32 u-m-t-32">
					<view class="u-flex-1 u-text-center">
						<view class="u-font-32 color-main font-bold">{{ listRes.totalRow }}</view>
						<view class="u-font-24 color-666 u-m-t-16">订单数</view>
					</view>
					<view class="u-flex-1 u-text-center">
						<view class="u-font-32 color-main font-bold">{{ listRes.totalAmount }}</view>
						<view class="u-font-24 color-666 u-m-t-16">订单金额（元）</view>
					</view>
				</view>
				<view v-if="active == 3" class="u-flex u-m-t-32">
					<view class="u-flex-1 u-text-center">
						<view class="u-font-32 color-main font-bold">{{ listRes.successAmount }}</view>
						<view class="u-font-24 color-666 u-m-t-16">已入账金额（元）</view>
					</view>
					<view class="u-flex-1 u-text-center">
						<view class="u-font-32 color-main font-bold">{{ listRes.pendingAmount || 0 }}</view>
						<view class="u-font-24 color-666 u-m-t-16">待入账金额（元）</view>
					</view>
					<view class="u-flex-1 u-text-center">
						<view class="u-font-32 color-main font-bold">{{ listRes.balanceAmount }}</view>
						<view class="u-font-24 color-666 u-m-t-16">
							<text>运营余额（元）</text>
							<text class="color-main" @click="go.to('PAGES_PAY')">充值{{ '>' }}</text>
						</view>
					</view>
				</view>
			</view>
		</up-sticky>
		<configVue v-if="active == 0"></configVue>
		<vipLvList v-if="active == 1" :list="list" :isEnd="isEnd" @refresh="refresh"></vipLvList>

		<openListVue v-if="active == 2" :list="list" :isEnd="isEnd" @refresh="refresh"></openListVue>
		<fenxiaoMingxiVue v-if="active == 3" :list="list" :isEnd="isEnd" @refresh="refresh"></fenxiaoMingxiVue>
		<!-- 选择门店 -->
		<shopSelActionSheetVue @choose="chooseShop" v-model="showShopSelActionSheet" title="选择门店"></shopSelActionSheetVue>

		<dateAreaSel :show="showTimeArea" :minYear="2022" @close="showTimeArea = false" @confirm="confirmTimeArea"></dateAreaSel>

		<!-- 分销明细状态 -->
		<up-action-sheet :show="showActions" :actions="actions" @select="handleSelect" @close="showActions = false" cancel-text="取消"></up-action-sheet>

		<my-marketing-mask name="超级会员" v-if="isMarketShow(configInfo, 'memberPriceShopIdList', 'isOpen')"></my-marketing-mask>
	</view>
</template>
<script setup>
import { onLoad, onReady, onShow, onPageScroll, onReachBottom, onBackPress } from '@dcloudio/uni-app';
import go from '@/commons/utils/go.js';
import { ref, onMounted, watch, provide } from 'vue';
import * as consumeCashbackApi from '@/http/api/market/consumeCashback.js';
import * as memberApi from '@/http/api/market/member.js';
import configVue from './components/config.vue';
import shopSelActionSheetVue from '@/pageMarket/components/shop-sel-action-sheet.vue';
import dateAreaSel from '@/components/date-range-picker/date-range-picker.vue';
import vipLvList from './components/vip-lv-list.vue';
import openListVue from './components/open-list.vue';
import fenxiaoMingxiVue from './components/fenxiao-mingxi.vue';
import { isMainShop, isMarketShow } from '@/store/account';

import { useSuperVipStore } from '@/store/market.js';
import { reactive } from 'vue';

const actions = [
	{
		name: '全部',
		value: ''
	},
	{
		name: '已入账',
		value: 'success'
	},
	{
		name: '待入账',
		value: 'pending'
	},
	{
		name: '已退款',
		value: 'refund'
	}
];
function clearKeyWord() {
	keyWord.value = '';
	userComponentQuery.user = '';
}
function clearTime() {
	userComponentQuery.startTime = '';
	userComponentQuery.endTime = '';
}
const selActions = ref('');
const showActions = ref(false);
function handleSelect(e) {
	selActions.value = e;
}

const superVipStore = useSuperVipStore();
superVipStore.getConfig();
provide('superVipStore', superVipStore);
provide('memberApi', memberApi);
const showTimeArea = ref(false);
function confirmTimeArea(e) {
	console.log(e);
	userComponentQuery.startTime = e[0];
	userComponentQuery.endTime = e[1];
}
const tabs = [
	{
		label: '会员基础设置',
		value: 'basic'
	},
	{
		label: '会员等级设置',
		value: 'user'
	},
	{
		label: '购买会员订单',
		value: 'recoders'
	}
];

const keyWord = ref('');
function keyWordBlur() {
	userComponentQuery.user = keyWord.value;
}
const userComponentQuery = reactive({
	user: '',
	startTime: '',
	endTime: ''
});

const form = ref({
	isOpen: 0
});

const list = ref([]);
const pageNum = ref(1);
const isEnd = ref(false);
const selShop = ref({
	shopId: '',
	shopName: ''
});
const searchText = ref('');

function search() {
	pageNum.value = 1;
	getList();
}

function chooseShop(e) {
	selShop.value = e;
}

watch(
	() => selShop.value.shopId,
	(newval) => {
		pageNum.value = 1;
		getList();
	}
);

watch(
	() => userComponentQuery,
	(newval) => {
		isEnd.value = false;
		pageNum.value = 1;

		getList();
	},
	{
		deep: true
	}
);

function refresh() {
	isEnd.value = false;
	pageNum.value = 1;
	getList();
}

const listRes = ref({});
const userId=ref('')
async function getList() {
	let res = null;
	if (active.value == 1) {
		//会员等级列表
		res = await memberApi.levelList();
		if (res) {
			list.value = res || [];
			isEnd.value = true;
			superVipStore.setVipLevelList(res || []);
		}
		return;
	}
	if (active.value == 2) {
		//购买会员订单记录
		res = await memberApi.orderList({
			page: pageNum.value,
			size: 10,
			// key: userComponentQuery.user,
			key: userId.value,
			startTime: userComponentQuery.startTime ? userComponentQuery.startTime + ' 00:00:00' : '',
			endTime: userComponentQuery.endTime ? userComponentQuery.endTime + ' 23:59:59' : ''
		});
	}

	if (res) {
		listRes.value = res;
		if (pageNum.value == 1) {
			list.value = res.records || [];
		} else {
			list.value = [...list.value, ...(res.records || [])];
		}
		isEnd.value = pageNum.value >= res.totalPage * 1 ? true : false;
		console.log(isEnd.value);
	}
}

// 显示选择门店弹窗
const showShopSelActionSheet = ref(false);

function showShopSelActionSheetFun() {
	showShopSelActionSheet.value = true;
}
const active = ref(0);

watch(
	() => active.value,
	(newval) => {
		userComponentQuery.startTime = '';
		userComponentQuery.endTime = '';
		keyWord.value = '';
		userId.value=''
		refresh();
	}
);
watch(
	() => selActions.value,
	() => {
		refresh();
	}
);
onReachBottom(() => {
	if (!isEnd.value) {
		pageNum.value++;
		getList();
	}
});
watch(
	() => superVipStore.config.isOpen,
	() => {
		superVipStore.editConfig().then((res) => {
			if (res) {
				uni.showToast({
					title: '更新成功',
					icon: 'none',
					duration: 2000
				});
			}
		});
	}
);
onShow(() => {
	pageNum.value = 1;
	getList();
});

const configInfo = ref({});
onLoad(async () => {
	configInfo.value = await memberApi.getConfig();
});
</script>
<style lang="scss" scoped>
.min-page {
	background: #f7f7f7;
}

.box {
}

.top {
	padding: 32rpx 24rpx;
}

.list {
	padding: 0 30rpx;

	.item {
		padding: 32rpx 24rpx;
		border-radius: 14rpx;
		background-color: #fff;
		overflow: hidden;
	}
}

.tag {
	border-radius: 12rpx;
	padding: 8rpx 22rpx;
	font-size: 28rpx;

	&.success {
		background-color: #edfff0;
		color: #5bbc6d;
	}

	&.end {
		background-color: #f7f7f7;
		color: #999;
	}
}

.my-btn {
	font-size: 28rpx;
	line-height: 36rpx;
	padding: 8rpx 32rpx;
	border-radius: 12rpx;
	margin: 0;
}

.edit-btn {
	background: #e6f0ff;
	color: $my-main-color;
}

.delete-btn {
	background: #ffe7e6;
	color: #ff1c1c;
}
.filter-box {
	display: flex;
	padding: 8rpx 24rpx;
	align-items: center;
	border-radius: 8rpx;
	border: 2rpx solid #d9d9d9;
	background: #f7f7f7;
	min-height: 62rpx;
	box-sizing: border-box;
}
</style>
