<template>
	<Dialog
		:options="{
			title: `选择 ${app?.app_title || app?.title} 的计划`,
			size: '3xl',
			actions: [
				{
					label: '选择计划',
					variant: 'solid',
					disabled: !selectedPlan,
					onClick: () => {
						$emit('plan-select', selectedPlan);
						show = false;
					}
				}
			]
		}"
		v-model="show"
	>
		<template #body-content>
			<PlansCards v-model="selectedPlan" :plans="plans" />
		</template>
	</Dialog>
</template>

<script>
import PlansCards from '../PlansCards.vue';

export default {
	props: ['app', 'modelValue', 'currentPlan'],
	emits: ['plan-select', 'update:modelValue'],
	components: {
		PlansCards
	},
	data() {
		return {
			selectedPlan: this.currentPlan
		};
	},
	computed: {
		show: {
			get() {
				return this.modelValue;
			},
			set(val) {
				this.$emit('update:modelValue', val);
				if (!val) this.selectedPlan = null;
			}
		},
		plans() {
			return this.app.plans.map(plan => {
				return {
					label:
						plan.price_cny === 0 || plan.price_usd === 0
							? '免费'
							: `${this.$format.userCurrency(
									this.$team.pg.currency === 'CNY'
										? plan.price_cny
										: plan.price_usd
							  )}/月`,
					sublabel: ' ',
					plan_title: plan.title,
					...plan,
					features: plan.features.map(f => ({
						value: f,
						icon: 'check-circle'
					}))
				};
			});
		}
	}
};
</script>