<script setup>

import {inject, onMounted, ref} from "vue"
import TRadio from "@/components/ui/TRadio.vue";

const Tea = inject("$Tea")

const emits = defineEmits(["change", "change"])

const {isLoading, canPay, balance, methods, currentMethodCode} = (function () {
	return {
		isLoading: ref(true),
		canPay: ref(true),
		balance: ref(0),
		methods: ref([]),
		currentMethodCode: ref("@balance")
	}
})()

const selectMethod = function (method) {
	currentMethodCode.value = method.code
	emits("change", method.code)
}

onMounted(() => {
	emits("change", currentMethodCode.value)

	Tea.action("/finance/methodOptions")
		.success(function (resp) {
			isLoading.value = false
			balance.value = resp.data.balance
			methods.value = resp.data.methods
			canPay.value = resp.data.enablePay
		})
		.post()

})
</script>

<template>
	<div>
		<div class="methods-box" v-if="!isLoading && canPay">
			<div class="method-box" :class="{active: currentMethodCode == '@balance'}" @click.prevent="selectMethod({'code':'@balance'})">
				<TRadio name="methodCode" :value="'@balance'" v-model="currentMethodCode">余额支付
					<span class="grey small">（{{ balance }}元）</span></TRadio>
				<p class="comment">使用余额支付。</p>
			</div>
			<div class="method-box" :class="{active: currentMethodCode == method.code}" v-for="method in methods" @click.prevent="selectMethod(method)">
				<TRadio name="methodCode" :value="method.code" v-model="currentMethodCode">{{ method.name }}</TRadio>
				<p class="comment">{{ method.description }}</p>
			</div>
		</div>

		<div v-if="!isLoading && !canPay">
			暂时不支持线上支付，请联系客服购买。
		</div>

	</div>
</template>

<style scoped lang="postcss">
.method-box {
	@apply mb-2 py-2 px-4 cursor-pointer;
}

.method-box.active {
	@apply bg-gray-100 dark:bg-gray-900;
}

tr:hover .method-box.active {
	@apply bg-gray-200 dark:bg-gray-900;
}
</style>
