<template>
	<view class="box">
		<view class="u-m-t-32 container" style="padding-left: 0; padding-right: 0">
			<view class="x-padding">
				<view class="u-flex u-row-between custome">
					<text class="font-bold color-333">提交生日/姓名</text>
					<up-radio-group v-model="form.isSubmitInfo" placement="row">
						<up-radio :key="1" :name="1" :customStyle="radioStyle">
							<template #label>
								<text>是</text>
							</template>
						</up-radio>
						<up-radio :key="0" :name="0" :customStyle="radioStyle">
							<template #label>
								<text>否</text>
							</template>
						</up-radio>
					</up-radio-group>
				</view>
				<view class="color-999 u-font-24 u-m-t-10">*成为会员前需提交生日、姓名、性别信息</view>
			</view>
		</view>

		<view class="u-m-t-32 container" style="padding-left: 0; padding-right: 0">
			<view class="x-padding">
				<view class="u-flex u-row-between custome">
					<text class="font-bold color-333">会员开通方式</text>
					<up-radio-group v-model="form.openType" placement="row">
						<up-radio key="PAY" name="PAY" :customStyle="radioStyle">
							<template #label>
								<text>购买开通</text>
							</template>
						</up-radio>
						<up-radio key="CONDITION" name="CONDITION" :customStyle="radioStyle">
							<template #label>
								<text>条件开通</text>
							</template>
						</up-radio>
					</up-radio-group>
				</view>
				<view class="u-m-t-24">
					<up-line></up-line>
				</view>
				<template v-if="form.openType == 'PAY'">
					<view class="u-flex u-row-between u-p-t-26" @click="go.to('PAGES_MARKET_SUPER_VIP_VIP_PLANS')">
						<text class="font-bold color-333">会员周期列表</text>
						<view class="u-flex">
							<text class="u-font-24 color-main">去设置</text>
							<up-icon name="arrow-right" color="#318AFE"></up-icon>
						</view>
					</view>
				</template>
				<template v-if="form.openType == 'CONDITION'">
					<view class="u-flex u-row-between u-col-baseline u-m-t-32">
						<text class="font-bold color-333">成为会员条件</text>
						<view class="u-flex-1 u-p-l-32">
							<view v-for="(item, index) in conditionLists" :key="index">
								<up-checkbox usedAlone v-model:checked="item.checked">
									<template #label>
										<view>{{ item.label }}</view>
									</template>
								</up-checkbox>
								<view class="u-m-t-24 u-m-b-24">
									<up-number-box
										:inputWidth="100"
										:decimalLength="item.precision || 0"
										v-if="item.label != '绑定手机号' && item.checked"
										v-model="item.value"
										:step="item.step"
										:min="item.min || 0"
									></up-number-box>
								</view>
							</view>
						</view>
					</view>
				</template>
			</view>
		</view>
		<view class="u-m-t-32 container">
			<view class="font-bold color-333 u-m-b-16">可用门店</view>
			<my-shop-select @shop-select="shopSelect" v-model:selShops="form.memberPriceShopIdList" v-model:useType="form.memberPriceShopType"></my-shop-select>
		</view>

		<view class="u-m-t-32 container">
			<view class="font-bold color-333 u-m-b-16">规则说明</view>
			<up-textarea v-model="form.remark" placeholder="请输入规则说明"></up-textarea>
		</view>

		<view class="u-m-t-32 container">
			<view class="font-bold color-333">获取成长值升级</view>
			<view class="u-m-t-6 color-999 u-font-24">*两个条件必选有一条是大于0的数值</view>
			<view class="u-flex u-m-t-26 gap-20">
				<text>每消费1元获得成长值</text>
				<up-number-box v-model="form.costReward" inputWidth="80" placeholder="请输入内容"></up-number-box>
			</view>
			<view class="u-flex u-m-t-26 gap-20">
				<text>每充值1元获得成长值</text>
				<up-number-box v-model="form.rechargeReward" inputWidth="80" placeholder="请输入内容"></up-number-box>
			</view>
		</view>
		<my-bottom-btn-group @save="save" @cancel="cancel"></my-bottom-btn-group>
	</view>
</template>

<script setup>
import { reactive, computed, onMounted, ref, inject, watch } from 'vue';
import userTypes from './user-types.vue';
import { onLoad, onReady, onShow, onPageScroll, onReachBottom, onBackPress } from '@dcloudio/uni-app';
import go from '@/commons/utils/go.js';

const radioStyle = ref({
	marginLeft: '14px'
});

const conditionLists = ref([
	{ label: '绑定手机号', checked: false, code: 'BIND_PHONE' },
	{
		label: '订单达成指定次数',
		checked: false,
		value: '',
		code: 'ORDER',
		step: 1,
		stepStrictly: true,
		min: 1
	},
	{
		label: '消费达到指定金额',
		checked: false,
		value: '',
		code: 'COST_AMOUNT',
		precision: 2,
		min: 0.01
	},
	{
		label: '充值达到指定金额',
		checked: false,
		value: '',
		code: 'RECHARGE_AMOUNT',
		precision: 2,
		min: 0.01
	}
]);

const superVipStore = inject('superVipStore');

//分销奖励次数
const isLimitCount = ref(0);
const isLimitCounts = [
	{
		value: 0,
		label: '限制'
	},
	{
		value: 1,
		label: '不限制'
	}
];
//开通方式
const opentypes = [
	{
		value: 'auto',
		label: '自动开通'
	},
	{
		value: 'manual',
		label: '手动开通'
	},
	{
		value: 'pay',
		label: '付费开通'
	}
];
const form = reactive({
	isSubmitInfo: 1,
	openType: 'PAY',
	configList: [],
	memberPriceShopType: 'ALL',
	remark: '',
	costReward: 0,
	rechargeReward: 0,
	memberPriceShopIdList: [],
	isMemberPrice: 1,
	isOpen: 0
});
watch(
	() => isLimitCount.value,
	(newval) => {
		if (newval) {
			form.rewardCount = -1;
		} else {
			form.rewardCount = '';
		}
	}
);

async function save() {
	console.log(form);
	const submitData = {
		...form,
		conditionList: conditionLists.value
			.filter((v) => v.checked)
			.map((v) => ({
				code: v.code,
				value: v.value
			}))
	};
	const res = await superVipStore.editConfig(submitData);
	uni.showToast({
		title: '更新成功',
		icon: 'none',
		duration: 2000
	});
}
function cancel() {
	uni.navigateBack();
}
watch(
	() => superVipStore.config,
	(newval) => {
		setForm(newval);
	}
);

function setForm(data) {
	if (data.rewardCount == -1) {
		isLimitCount.value = 1;
	}
	console.log(data);

	conditionLists.value = conditionLists.value.map((v) => {
		const findItem = data.conditionList.find((cond) => cond.code == v.code);
		if (findItem) {
			v.value = findItem.value;
			v.checked = true;
		} else {
			v.checked = false;
		}
		return v;
	});
	Object.assign(form, data);
	console.log(form);
}

onMounted(() => {
	setForm(superVipStore.config);
});
</script>

<style lang="scss" scoped>
.x-padding {
	padding: 0 24rpx;
}
.text-tips {
	color: #999999;
	font-size: 14px;
	padding: 0 28rpx;
	border-radius: 6rpx 0 0 6rpx;
	border: 2rpx solid #d9d9d9;
	background-color: #f7f7fa;
	line-height: 60rpx;
}
.text-tips1 {
	border-radius: 0 6rpx 6rpx 0;
}
.gap-40 {
	gap: 40rpx;
}
.my-input {
	border: 2rpx solid #d9d9d9;
	height: 60rpx;
	border-right: none;
	width: 240rpx;
	text-align: center;
	padding: 0 2px;
	font-size: 14px;
}
.box {
	padding: 0 28rpx;
	font-size: 28rpx;
}
.container {
	background: #fff;
	padding: 32rpx 24rpx;
	margin-top: 32rpx;
	border-radius: 16rpx;
	overflow: hidden;
}
.add {
	padding: 8rpx 32rpx;
	border-radius: 12rpx;
	background: #318afe;
	color: #ffffff;
	font-size: 28rpx;
	line-height: 56rpx;
	margin: 0;
}
.color-red {
	color: #ff2f2f;
}
$height: 70rpx;
.number-box {
	font-size: 28rpx;
	padding: 0 26rpx;
	border-radius: 6rpx 0 0 6rpx;
	border-top: 2rpx solid #d9d9d9;
	border-bottom: 2rpx solid #d9d9d9;
	border-left: 2rpx solid #d9d9d9;
	background: #fff;
	box-sizing: border-box;
	height: $height;
	flex: 1;
	line-height: $height;
}
.unit {
	display: flex;
	padding: 0 38rpx;
	height: $height;
	line-height: $height;
	align-items: center;
	border-radius: 0 6rpx 6rpx 0;
	border: 2rpx solid #d9d9d9;
	background: #f7f7fa;
	font-size: 28rpx;
	color: #999999;
}
:deep(.custome .u-radio-group) {
	justify-content: flex-end;
}
</style>
