{$layout}
{$template "menu"}

<div class="right-box">
    <b-empty v-if="bills.length == 0">{{t('finance_bills_index@暂时还没有账单')}}</b-empty>

    <b-table
        v-if="bills.length > 0"
        :columns="columns"
        :data-source="bills"
        :row-key="'id'"
        :pagination="false" 
        size="middle"
    >
        <template slot="codeSlot" slot-scope="{ text, record }">
            <a :href="'/finance/bills/bill?billId=' + record.id">{{record.code}}</a>
            <div v-if="record.isOverdue">
                <span class="ui red basic label tiny">{{t('finance_bills_index@逾期')}}</span>
            </div>
        </template>

        <template slot="userSlot" slot-scope="{ text, record }">
            <user-link :v-user="record.user"></user-link>
        </template>

        <template slot="periodSlot" slot-scope="{ text, record }">
            {{record.pricePeriodName}}
        </template>

        <template slot="monthSlot" slot-scope="{ text, record }">
            {{record.month}}
        </template>

        <template slot="daySlot" slot-scope="{ text, record }">
            <span v-if="record.pricePeriod == 'daily'">
                <span v-if="record.dayFrom == record.dayTo">{{record.dayFrom}}</span>
                <span v-else>{{record.dayFrom}} - {{record.dayTo}}</span>
            </span>
        </template>

        <template slot="typeSlot" slot-scope="{ text, record }">
            {{record.typeName}}
        </template>

        <template slot="amountSlot" slot-scope="{ text, record }">
            <span :class="{disabled: record.amount == '0'}">¥{{record.amount}} {{t('finance_bills_index@元')}}</span>
            <span v-if="!record.canPay" class="small grey"><br/>{{t('finance_bills_index@预估')}}</span>
        </template>

        <template slot="paidSlot" slot-scope="{ text, record }">
            <label-on :v-is-on="record.isPaid"></label-on>
        </template>

        <template slot="actionSlot" slot-scope="{ text, record }">
             <span v-if="record.isPaid" class="disabled">{{t('finance_bills_index@已支付')}}</span>
             <a-button type="link" v-else-if="record.canPay" @click.prevent="payBill(record.id)">{{t('finance_bills_index@支付')}}</a-button>
        </template>

    </b-table>

    <div class="page" v-html="filterPageContent(page)"></div>
</div>