{$layout}
{$template "../menu"}

<div class="right-box">
    <div style="padding: 1em 0">
        <b-button @click="createMethod">
            <i class="pi pi-pen-to-square"></i>
            {{t('finance_orders_methods_index@添加支付方式')}}
        </b-button>
    </div>

    <p class="ui message warning" v-if="!enablePay">
        {{t('finance_orders_methods_index@暂时未启用在线支付去')}}
        <a href="/finance/orders/setting">{{t('finance_orders_methods_index@设置')}}</a>。
    </p>

    <div v-if="methods.length == 0">
        <b-empty large>{{t('finance_orders_methods_index@暂时还没有支付方式')}}</b-empty>
    </div>

    <b-table
        v-if="methods.length > 0"
        :columns="[
            { title: t('finance_orders_methods_index@支付方式'), key: 'name', scopedSlots: { customRender: 'nameSlot' } },
            { title: t('finance_orders_methods_index@代号'), dataIndex: 'code', key: 'code', scopedSlots: { customRender: 'codeSlot' }, width: '15%' },
            { title: t('finance_orders_methods_index@描述'), dataIndex: 'description', key: 'description', scopedSlots: { customRender: 'descriptionSlot' } },
            { title: t('finance_orders_methods_index@状态'), dataIndex: 'isOn', key: 'status', scopedSlots: { customRender: 'statusSlot' }, width: '8%', align: 'center' },
            { title: t('finance_orders_methods_index@操作'), key: 'action', scopedSlots: { customRender: 'actionSlot' }, width: '10%', align: 'center' }
        ]"
        :data-source="methods"
        :row-key="'id'"
        :pagination="false"
        size="middle"
    >
        <template slot="nameSlot" slot-scope="{ text, record }">
             <a :href="'/finance/orders/methods/method?methodId=' + record.id">{{record.name}}</a>
            <div v-if="record.parentName.length > 0 || (record.clientType.length > 0 && record.clientType != 'all')">
                <grey-label v-if="record.parentName.length > 0">{{record.parentName}}</grey-label>
                <grey-label v-if="record.clientType.length > 0 && record.clientType != 'all'">{{record.clientTypeName}}</grey-label>
            </div>
        </template>

        <template slot="codeSlot" slot-scope="{ text, record }">
            {{record.code}}
        </template>

        <template slot="descriptionSlot" slot-scope="{ text, record }">
            {{record.description}}
        </template>

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

        <template slot="actionSlot" slot-scope="{ text, record }">
            <a-button type="link" :href="'/finance/orders/methods/method?methodId=' + record.id">{{t('finance_orders_methods_index@详情')}}</a-button>
            <a-button type="link" @click.prevent="deleteMethod(record.id)">{{t('finance_orders_methods_index@删除')}}</a-button>
        </template>
    </b-table>
</div>