{$layout}
{$template "menu"}

<div class="right-box">
    <div class="config-section">
        <div class="section-title">{{t('finance_bills_bill@账单详情')}}</div>
        <div class="config-item">
            <div class="item-label">{{t('finance_bills_index@账单编号')}}</div>
            <div class="item-content">{{bill.code}}</div>
        </div>
        <div class="config-item">
            <div class="item-label">{{t('finance_bills_index@用户')}}</div>
            <div class="item-content"><user-link :v-user="bill.user"></user-link></div>
        </div>
        <div class="config-item">
            <div class="item-label">{{t('finance_bills_index@结算周期')}}</div>
            <div class="item-content">{{bill.pricePeriodName}}</div>
        </div>
        <div class="config-item">
            <div class="item-label">{{t('finance_bills_index@月份')}}</div>
            <div class="item-content">{{bill.month}}</div>
        </div>
        <div class="config-item" v-if="bill.pricePeriod == 'daily'">
            <div class="item-label">{{t('finance_bills_index@日期')}}</div>
            <div class="item-content">
                <span v-if="bill.dayFrom == bill.dayTo">{{bill.dayFrom}}</span>
                <span v-else>{{bill.dayFrom}} - {{bill.dayTo}}</span>
            </div>
        </div>
        <div class="config-item">
            <div class="item-label">{{t('finance_bills_index@项目')}}</div>
            <div class="item-content">{{bill.typeName}}</div>
        </div>
        <div class="config-item">
            <div class="item-label">{{t('finance_bills_index@金额')}}</div>
            <div class="item-content">¥{{bill.amount}}元
                <span v-if="!bill.canPay" class="small grey">&nbsp;（{{t('finance_bills_index@预估')}}）</span>
            </div>
        </div>
        <div class="config-item">
            <div class="item-label">{{t('finance_bills_bill@描述')}}</div>
            <div class="item-content">{{bill.description}}</div>
        </div>
        <div class="config-item">
            <div class="item-label">{{t('finance_bills_index@已支付')}}</div>
            <div class="item-content">
                 <label-on :v-is-on="bill.isPaid"></label-on>
            </div>
        </div>
        <div class="config-item">
            <div class="item-label">{{t('finance_bills_index@操作')}}</div>
            <div class="item-content">
                <span v-if="bill.isPaid" class="disabled">{{t('finance_bills_index@已支付')}}</span>
                <a-button type="link" v-else-if="bill.canPay" @click.prevent="payBill(bill.id)">{{t('finance_bills_index@支付')}}</a-button>
            </div>
        </div>
    </div>

    <div v-if="serverBills.length > 0">
        <div class="config-section">
            <div class="section-title">{{t('finance_bills_bill@网站/套餐子账单')}}</div>
            <b-table
                :columns="serverBillsColumns"
                :data-source="serverBills"
                :pagination="false"
                size="middle"
            >
                 <template slot="serverSlot" slot-scope="{ text, record }">
                     <span v-if="record.server != null && record.server.id > 0">{{record.server.name}}</span>
                     <span v-else class="disabled">-</span>
                 </template>
                 <template slot="planSlot" slot-scope="{ text, record }">
                    <span v-if="record.plan.id > 0">
                        {{record.plan.name}}
                        <span class="small grey" v-if="record.plan.priceType == 'traffic'">（{{t('finance_bills_bill@按流量计费')}}）</span>
                        <span class="small grey" v-if="record.plan.priceType == 'bandwidth'">（{{t('finance_bills_bill@按带宽计费')}}）</span>
                    </span>
                    <span v-else>{{t('finance_bills_bill@默认')}}
                        <span v-if="record.priceType == 'traffic'" class="small grey">（{{t('finance_bills_bill@按流量计费')}}）</span>
                        <span v-if="record.priceType == 'bandwidth'" class="small grey">（{{t('finance_bills_bill@按带宽计费')}}）</span>
                        <span v-if="record.priceType.length == 0" class="small grey">（{{t('finance_bills_bill@按区域流量计费')}}）</span>
                    </span>
                 </template>
                 <template slot="trafficSlot" slot-scope="{ text, record }">
                     {{record.traffic}}
                 </template>
                 <template slot="bandwidthSlot" slot-scope="{ text, record }">
                    {{record.bandwidthPercentileSize}}<span class="grey small">（{{record.bandwidthPercentile}}th）</span>
                 </template>
                 <template slot="amountSlot" slot-scope="{ text, record }">
                    {{record.amount}}{{t('finance_bills_index@元')}}
                 </template>
                 <template slot="createdTimeSlot" slot-scope="{ text, record }">
                    {{record.createdTime}}
                 </template>
            </b-table>
            <div v-html="page"></div>
        </div>
    </div>

    <div v-if="trafficBills.length > 0">
        <div class="config-section">
             <div class="section-title">{{t('finance_bills_bill@流量子账单')}}</div>
             <b-table
                :columns="trafficBillsColumns"
                :data-source="trafficBills"
                :pagination="false"
                size="middle"
            >
                <template slot="regionSlot" slot-scope="{ text, record }">
                     <span v-if="record.region.id > 0">{{record.region.name}}</span>
                     <span v-else class="disabled">[{{t('finance_bills_bill@未分区')}}]</span>
                </template>
                <template slot="priceTypeSlot" slot-scope="{ text, record }">
                    {{record.priceTypeName}}
                </template>
                <template slot="bandwidthMBSlot" slot-scope="{ text, record }">
                    <span v-if="record.priceType == 'bandwidth'">{{record.bandwidthMB}}</span>
                    <span v-else class="disabled">-</span>
                </template>
                <template slot="bandwidthPercentileSlot" slot-scope="{ text, record }">
                    <span v-if="record.priceType == 'bandwidth'">{{record.bandwidthPercentile}}th</span>
                    <span v-else class="disabled">-</span>
                </template>
                <template slot="trafficGBSlot" slot-scope="{ text, record }">
                    <span v-if="record.priceType == 'traffic'">{{record.trafficGB}}</span>
                    <span v-else class="disabled">-</span>
                </template>
                <template slot="trafficPackageGBSlot" slot-scope="{ text, record }">
                    <span v-if="record.priceType == 'traffic' && record.trafficPackageGB != '0B'">{{record.trafficPackageGB}}</span>
                    <span v-else class="disabled">-</span>
                </template>
                <template slot="pricePerUnitSlot" slot-scope="{ text, record }">
                    <span v-if="record.priceType == 'bandwidth'">{{record.pricePerUnit}}{{t('finance_bills_index@元')}}/Mbps</span>
                    <span v-if="record.priceType == 'traffic'">{{record.pricePerUnit}}{{t('finance_bills_index@元')}}/GiB</span>
                </template>
                <template slot="amountSlot" slot-scope="{ text, record }">
                     {{record.amount}}{{t('finance_bills_index@元')}}
                </template>
            </b-table>
        </div>
    </div>
</div>