Vue.component("pay-method-selector", {
	mounted: function () {
		this.$emit("change", this.currentMethodCode)

		let that = this
		Tea.action("/finance/methodOptions")
			.success(function (resp) {
				that.isLoading = false
				that.balance = resp.data.balance
				that.methods = resp.data.methods
				that.canPay = resp.data.enablePay
			})
			.post()
	},
	data: function () {
		return {
			isLoading: true,
			canPay: true,
			balance: 0,
			methods: [],
			currentMethodCode: "@balance"
		}
	},
	methods: {
		selectMethod: function (method) {
			this.currentMethodCode = method.code
			this.$emit("change", method.code)
		}
	},
	template: `<div>
<div class="methods-box" v-if="!isLoading && canPay">
	<div class="method-box" @click.prevent="selectMethod({'code':'@balance'})">
		<radio name="methodCode" :value="'@balance'" :v-value="'@balance'">余额支付 <span class="grey small">（{{balance}}元）</span></radio>
		<p class="comment">使用余额支付</p>
	</div>
	<div class="method-box" :class="{active: currentMethodCode == method.code}" v-for="method in methods" @click.event="selectMethod(method)">
		<radio name="methodCode" :value="method.code" :v-value="method.code" v-model="currentMethodCode">{{method.name}}</radio>
		<p class="comment">{{method.description}}</p>
	</div>
</div>

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

</div>`
})