<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 "./bill.js"
import Menu from "./@menu.vue"
import Pager from "@/components/common/Pager.vue";
import ListTable from "@/components/common/ListTable.vue";
import TColumn from "@/components/ui/TColumn.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"></Menu>

	<CardView>
		<CardRow>
			<template #name>账单编号</template>
			<template #value>{{ ctx.bill.code }}</template>
		</CardRow>
		<CardRow>
			<template #name>结算周期</template>
			<template #value>{{ ctx.bill.pricePeriodName }}</template>
		</CardRow>
		<CardRow>
			<template #name>月份</template>
			<template #value>{{ ctx.bill.month }}</template>
		</CardRow>
		<CardRow v-if="ctx.bill.pricePeriod == 'daily'">
			<template #name>日期</template>
			<template #value>
				<span v-if="ctx.bill.pricePeriod == 'daily'">
					<span v-if="ctx.bill.dayFrom == ctx.bill.dayTo">{{ ctx.bill.dayFrom }}</span>
					<span v-else>{{ ctx.bill.dayFrom }} - {{ ctx.bill.dayTo }}</span>
				</span>
			</template>
		</CardRow>
		<CardRow>
			<template #name>项目</template>
			<template #value>{{ ctx.bill.typeName }}</template>
		</CardRow>
		<CardRow>
			<template #name>金额</template>
			<template #value>¥{{ ctx.bill.amount }}元
				<span v-if="!ctx.bill.canPay" class="small grey">&nbsp;（预估）</span>
			</template>
		</CardRow>
		<CardRow>
			<template #name>描述</template>
			<template #value>{{ ctx.bill.description }}</template>
		</CardRow>
		<CardRow>
			<template #name>是否已支付</template>
			<template #value>
				<span class="green" v-if="ctx.bill.isPaid">Y</span>
				<span v-else class="disabled">N</span>
			</template>
		</CardRow>
		<CardRow>
			<template #name>操作</template>
			<template #value>
				<span v-if="ctx.bill.isPaid" class="disabled" title="已支付，无需重复支付">已支付</span>
				<span v-else>
					 <a href="" v-if="ctx.bill.canPay" @click.prevent="ctx.payBill(ctx.bill.id)">支付</a>
					<span v-else class="disabled"></span>
				</span>
			</template>
		</CardRow>
	</CardView>

	<div v-if="ctx.serverBills.length > 0">
		<h5 class="group-header">网站/套餐子账单</h5>
		<ListTable :items="ctx.serverBills">
			<TColumn header="网站" class="name-column">
				<template #body="{data: serverBill}">
					<span v-if="serverBill.server != null && serverBill.server.id > 0">{{ serverBill.server.name }}</span>
					<span v-else class="disabled">-</span>
				</template>
			</TColumn>
			<TColumn header="套餐" class="name-column">
				<template #body="{data: serverBill}">
					<span v-if="serverBill.plan.id > 0">
			                    {{ serverBill.plan.name }}
			                    <span class="small grey" v-if="serverBill.plan.priceType == 'traffic'">（按流量计费）</span>
			                    <span class="small grey" v-if="serverBill.plan.priceType == 'bandwidth'">（按带宽计费）</span>
			                </span>
					<span v-else>默认
			                    <span v-if="serverBill.priceType == 'traffic'" class="small grey">（按流量计费）</span>
			                    <span v-if="serverBill.priceType == 'bandwidth'" class="small grey">（按带宽计费）</span>
			                    <span v-if="serverBill.priceType.length == 0" class="small grey">（按区域流量计费）</span>
			                </span>
				</template>
			</TColumn>
			<TColumn header="流量" class="normal-value-column">
				<template #body="{data: serverBill}">
					{{ serverBill.traffic }}
				</template>
			</TColumn>
			<TColumn header="带宽" class="normal-value-column">
				<template #body="{data: serverBill}">
					{{ serverBill.bandwidthPercentileSize }}<span class="grey small">（{{ serverBill.bandwidthPercentile }}th）</span>
				</template>
			</TColumn>
			<TColumn header="费用" class="normal-value-column">
				<template #body="{data: serverBill}">
					{{ serverBill.amount }}元
				</template>
			</TColumn>
			<TColumn header="更新时间" class="normal-value-column">
				<template #body="{data: serverBill}">
					{{ serverBill.createdTime }}
				</template>
			</TColumn>
		</ListTable>
		<Pager :data="ctx.page"></Pager>
	</div>

	<div v-if="ctx.trafficBills.length > 0">
		<h5 class="group-header">流量子账单</h5>
		<ListTable :items="ctx.trafficBills">
			<TColumn header="区域" class="normal-value-column">
				<template #body="{data: trafficBill}">
					<span v-if="trafficBill.region.id > 0">{{ trafficBill.region.name }}</span>
					<span v-else class="disabled">[未分区]</span>
				</template>
			</TColumn>
			<TColumn header="计费方式" class="normal-value-column">
				<template #body="{data: trafficBill}">
					{{ trafficBill.priceTypeName }}
				</template>
			</TColumn>
			<TColumn header="计费带宽" class="normal-value-column">
				<template #body="{data: trafficBill}">
					<span v-if="trafficBill.priceType == 'bandwidth'">{{ trafficBill.bandwidthMB }}</span>
					<span v-else class="disabled">-</span>
				</template>
			</TColumn>
			<TColumn header="带宽百分位" class="normal-value-column">
				<template #body="{data: trafficBill}">
					<span v-if="trafficBill.priceType == 'bandwidth'">{{ trafficBill.bandwidthPercentile }}th</span>
					<span v-else class="disabled">-</span>
				</template>
			</TColumn>
			<TColumn header="计费流量" class="normal-value-column">
				<template #body="{data: trafficBill}">
					<span v-if="trafficBill.priceType == 'traffic'">{{ trafficBill.trafficGB }}</span>
					<span v-else class="disabled">-</span>
				</template>
			</TColumn>
			<TColumn header="流量包使用" class="normal-value-column">
				<template #body="{data: trafficBill}">
					<span v-if="trafficBill.priceType == 'traffic' && trafficBill.trafficPackageGB != '0B'">{{ trafficBill.trafficPackageGB }}</span>
					<span v-else class="disabled">-</span>
				</template>
			</TColumn>
			<TColumn header="单位价格" class="normal-value-column">
				<template #body="{data: trafficBill}">
					<span v-if="trafficBill.priceType == 'bandwidth'">{{ trafficBill.pricePerUnit }}元/Mbps</span>
					<span v-if="trafficBill.priceType == 'traffic'">{{ trafficBill.pricePerUnit }}元/GiB</span>
				</template>
			</TColumn>
			<TColumn header="总价格" class="normal-value-column">
				<template #body="{data: trafficBill}">
					{{ trafficBill.amount }}元
				</template>
			</TColumn>
		</ListTable>
	</div>
</template>

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