<script setup>
// Copyright 2024 FlexCDN root@flexcdn.cn. All rights reserved. Official site: https://flexcdn.cn .

import ctxRef from "@/utils/ctx_ref.js"
import Context from "./index.js"
import Menu from "./@menu.vue"
import CardView from "@/components/common/CardView.vue";
import CardRow from "@/components/common/CardRow.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<Menu :ctx="ctx" active-tab="index"></Menu>

	<form>
		<CardView>
			<CardRow full>
				<template #name>计费方式</template>
				<template #value>{{ ctx.config.priceTypeName }}
					&nbsp; &nbsp;
					<a href="" v-if="ctx.config.canChangeType" @click.prevent="ctx.updatePriceType">[修改]</a>
				</template>
			</CardRow>
			<CardRow full>
				<template #name>计费周期</template>
				<template #value>{{ ctx.config.pricePeriodName }}
					&nbsp; &nbsp;
					<a href="" v-if="ctx.config.canChangePeriod" @click.prevent="ctx.updatePricePeriod">[修改]</a>
				</template>
			</CardRow>
		</CardView>
	</form>
</template>

<style lang="postcss" scoped>
</style>