<template>
	<view class="bg-gray min-page">
		<view class="bg-fff top">
			<view class="u-p-30">
				<myTabs :defaultIndex="tabsCurrent" :list="tabsList" @change="tabsChange"></myTabs>
			</view>
		</view>
		<view class="switch-container">
			<view class="switch-wrap">
				<view class="title">
					<text class="t">是否开启</text>
				</view>
				<view class="switch">
					<!-- <u-switch size="large" v-model="isOpen" :active-value="1" :inactive-value="0"></u-switch> -->
					<switch :checked="!!isOpen" foreColor="#33a0ff" color="#33a0ff" @change="isOpenChange"></switch>
				</view>
			</view>
		</view>
		<template v-if="tabsCurrent === 0">
			<view class="u-p-30">
				<view class="u-flex bg-fff u-p-30 border-r-12" @tap="toAddRecharge">
					<view class="u-m-r-22">
						<my-icons type="add"></my-icons>
					</view>
					<view class="">添加充值面额</view>
				</view>
			</view>
			<view class="u-p-30">
				<view class="u-m-b-32" v-for="(item, index) in rechargeLists" :key="index">
					<recharge-item @del="rechargeItemDel" :index="index" :data="item" :isCanEdit="isCanEdit"></recharge-item>
				</view>
			</view>
		</template>
		<template v-if="tabsCurrent === 1">
			<view class="card-wrap">
				<view class="card">
					<view class="header">
						<text class="title">自定义金额</text>
						<my-switch v-model="settingForm.isCustom"></my-switch>
					</view>
					<view class="tips">
						<text class="t">自定义金额不参与赠送优惠</text>
					</view>
				</view>
			</view>
			<view class="card-wrap">
				<view class="card no-bg">
					<view class="header">
						<text class="title">可用门店</text>
					</view>
					<my-shop-select v-model:useType="settingForm.useType" v-model:selShops="settingForm.shopIdList" @useTypeChange="useTypeChange"></my-shop-select>
				</view>
			</view>
			<view class="card-wrap">
				<view class="card">
					<view class="header">
						<text class="title">充值并下单</text>
						<my-switch v-model="settingForm.isOrder"></my-switch>
					</view>
					<view class="tips">
						<text class="t">开启后，订单支付页面显示充值选项</text>
					</view>
				</view>
			</view>
			<view class="u-p-30">
				<view class="bg-fff u-p-30 border-r-12">
					<view>充值说明</view>
					<view class="u-p-30 border-r-12 border u-m-t-30">
						<view class="">
							<textarea placeholder="请填写充值说明" v-model="settingForm.remark" />
						</view>
					</view>
				</view>
				<!-- <view class="bg-fff u-m-t-30 u-overflow-hide border-r-12 u-p-30 u-flex u-row-between">
					<view class="">充值前绑定手机</view>
					<view>
						<my-switch v-model="mustBindPhone"></my-switch>
					</view>
				</view> -->
				<view class="u-m-t-60" style="padding: 80rpx" v-if="isCanEdit">
					<my-button showShadow shape="circle" @click="rechargeSetting">保存</my-button>
				</view>
			</view>
		</template>
		<template v-if="tabsCurrent === 2">
			<rechargeRecord />
		</template>
		<my-model ref="model" :desc="modelData.desc"></my-model>
		<my-date-pickerview @confirm="datePickerConfirm" ref="datePicker"></my-date-pickerview>
		<my-marketing-mask name="智慧充值" v-if="isMarketShow(shopRechargeRes)"></my-marketing-mask>
	</view>
</template>

<script setup>
import { computed, reactive, ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import myTabs from '@/components/my-components/my-tabs.vue';
import myIcons from '@/components/my-components/my-icons.vue';
import mySwitch from '@/components/my-components/my-switch.vue';
import myButton from '@/components/my-components/my-button.vue';
import myModel from '@/components/my-components/my-model.vue';
import myDatePickerview from '@/components/my-components/my-date-pickerview';
import rechargeItem from './components/recharge-item.vue';
import rechargeRecord from './components/rechargeRerord.vue';
import $util from '@/commons/utils/getDateArea.js';
import go from '@/commons/utils/go.js';
import { shopRechargePost, shopRechargeGet } from '@/http/api/market/index.js';
import { onLoad } from '@dcloudio/uni-app';
import { isMainShop, isMarketShow } from '@/store/account.js';

const isCanEdit = computed(() => {
	return isMainShop();
});

const isOpen = ref(0);

async function isOpenChange(e) {
	console.log(e);
	isOpen.value = e.detail.value;
	try {
		const data = await shopRechargeGet();
		data.isEnable = isOpen.value ? 1 : 0;
		await shopRechargePost(data);
	} catch (error) {
		console.log(error);
	}
}

const model = ref(null);
const modelData = reactive({
	desc: ''
});
function rechargeItemDel(e) {
	uni.showModal({
		title: '注意',
		content: '确定要删除该充值面额吗?',
		success: async (res) => {
			try {
				if (res.confirm) {
					settingForm.value.rechargeDetailList.splice(e.index, 1);
					uni.showLoading({
						title: '删除中...'
					});
					await shopRechargePost(settingForm.value);
					uni.showToast({
						title: '删除成功',
						icon: 'none'
					});
				}
			} catch (error) {
				console.log(error);
			}
			setTimeout(() => {
				uni.hideLoading();
			}, 500);
		}
	});

	// modelData.desc = `确定删除【${Number(e.data.price).toFixed(2)}】面额吗?`;
	// model.value.open();
	// console.log(e);
}
function toAddRecharge() {
	go.to('PAGES_RECHARGE_ADD_RECHARGE');
}

const rechargeLists = ref([]);

let mustBindPhone = ref(true);
const nowDate = new Date();
const filters = reactive({
	time: {
		start: $util.getDayArea(nowDate, 'start'),
		end: $util.getDayArea(nowDate, 'end')
	}
});
const tabsList = ['充值面额', '充值设置', '充值记录'];
let tabsCurrent = ref(0);

const settingForm = ref({
	id: '',
	isCustom: 1, // 自定义金额
	useType: 'all',
	shopIdList: [], // 可用门店
	isOrder: 1, // 充值并下单
	remark: ''
});

function useTypeChange(e) {
	if (e == 'all') {
		settingForm.value.shopIdList = [];
	}
}

// 获取设置
const shopRechargeRes = ref({});
async function shopRechargeGetAjax() {
	try {
		shopRechargeRes.value = await shopRechargeGet();
		isOpen.value = shopRechargeRes.value.isEnable;
		shopRechargeRes.value.rechargeDetailList.forEach((item) => {
			item.couponInfoList.forEach((val) => {
				if (val.coupon && val.coupon !== null) {
					val.id = val.coupon.id;
					val.title = val.coupon.title;
				}
			});
		});
		settingForm.value = shopRechargeRes.value;
		rechargeLists.value = shopRechargeRes.value.rechargeDetailList;
	} catch (error) {
		console.log(error);
	}
}

// 保存充值设置
async function rechargeSetting() {
	console.log('settingForm', settingForm.value);
	try {
		uni.showLoading({
			title: '保存中...'
		});
		await shopRechargePost(settingForm.value);
		uni.showToast({
			title: '保存成功',
			icon: 'none'
		});
	} catch (error) {
		console.log(error);
	}
	setTimeout(() => {
		uni.hideLoading();
	}, 500);
}

let showStatus = ref(false);
function showStatusToggle() {
	showStatus.value = !showStatus.value;
}

const statusBootom = 14;
const statusHeight = computed(() => {
	return 30 * status.length + statusBootom + 'px';
});

let searchShow = ref(false);

function showSearch() {
	searchShow.value = true;
}
const status = ['全部', '未支付', '支付成功'];
let nowStatusIndex = ref(0);
function changeNowStatusIndex(i) {
	nowStatusIndex.value = i;
	showStatus.value = false;
}
function hideSearch() {
	searchShow.value = false;
}

function tabsChange(i) {
	console.log(i);
	tabsCurrent.value = i;
}

let keyword = ref('');

function searchConfirm(e) {
	console.log(e);
}

const datePicker = ref(null);
function timeToggle() {
	datePicker.value.toggle();
	showStatus.value = false;
}
function datePickerConfirm(e) {
	console.log(e);
	filters.time.start = e.start;
	filters.time.end = e.end;
}

onShow(() => {
	shopRechargeGetAjax();
});
</script>

<style lang="scss" scoped>
.switch-container {
	padding: 28upx;
}
.switch-wrap {
	background-color: #fff;
	border-radius: 20upx;
	padding: 28upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.title {
		.t {
			font-size: 32upx;
			color: #333;
		}
	}
}
.u-overflow-hide {
	overflow: hidden;
}
.border {
	border: 1px solid #e5e5e5;
}
.border-r-12 {
	border-radius: 12rpx;
}
.recoreds {
	background: linear-gradient(127deg, #33a0ff 0%, #6699ff 100%);
	box-shadow: 0rpx 20rpx 60rpx 2rpx rgba(92, 112, 248, 0.2);
	border-radius: 14rpx 14rpx 14rpx 14rpx;
	padding: 32rpx 40rpx 40rpx 48rpx;
}
.lh30 {
	line-height: 30px;
}
.status {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 10;
	background-color: #fff;
}
.input-icon {
	width: 28rpx;
	height: 28rpx;
}

.box-shadow {
	box-shadow: 0 0 5px #eee;
}

.search-box {
	background-color: #fff;
	padding: 16rpx 0;
	top: 0;
	bottom: 0;
	position: absolute;
	right: 30rpx;
	display: flex;

	.search-btn {
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		// width: 164rpx;
		transition: all 0.3s ease-in-out;
		background-color: rgb(247, 247, 247);
		border-radius: 100px;
	}
}
.time-area {
	background: #e6f0ff;
	border-radius: 100px;
	padding: 10rpx 20rpx;
}
.icon-down {
	transform: rotate(90deg);
	display: flex;
	justify-content: center;
	align-items: center;
}
.card-wrap {
	padding: 28upx 28upx 0;
	.card {
		background-color: #fff;
		border-radius: 20upx;
		padding: 28upx;
		.header {
			display: flex;
			justify-content: space-between;
			padding-bottom: 12upx;
			.title {
				font-size: 28upx;
				font-weight: bold;
			}
		}
		.tips {
			.t {
				font-size: 28upx;
				color: #999;
			}
		}
	}
}
</style>
