{$layout}
{$template "menu"}

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

    <div class="margin"></div>
    <form class="ui form" action="/finance/orders">
        <div class="ui fields inline">
            <div class="ui field">
                <finance-user-selector :v-user-id="userId"></finance-user-selector>
            </div>
            <div class="ui field">
                <b-select
                    name="status"
                    v-model="status"
                    :options="[
                        {label: `[${t('finance_orders_index@状态')}]`, value: ''},
                        ...statusList.map(statusDef => ({
                            label: statusDef.name,
                            value: statusDef.code,
                        }))
                    ]"
                ></b-select>

                <!-- <select class="ui dropdown" name="status" v-model="status">
                    <option value="">[状态]</option>
                    <option v-for="statusDef in statusList" :value="statusDef.code">{{statusDef.name}}</option>
                </select> -->
            </div>
            <div class="ui field">
                <input type="text" :placeholder="t('finance_orders_index@订单号')" name="keyword" v-model="keyword"/>
            </div>
            <div class="ui field">
                <button class="ui button" type="submit">{{t('finance_orders_index@搜索')}}</button>
                &nbsp;
                <a href="/finance/orders" v-if="userId > 0 || status.length > 0 || keyword.length > 0">[{{t('finance_orders_index@清除条件')}}]</a>
            </div>
        </div>
    </form>

    <b-empty v-if="orders.length == 0" large>{{t('finance_orders_index@暂时还没有订单')}}</b-empty>

    <b-table
        v-if="orders.length > 0"
        :columns="[
            { title: t('finance_orders_index@订单号'), dataIndex: 'code', key: 'code', scopedSlots: { customRender: 'codeSlot' }, width: '12em' },
            { title: t('finance_orders_index@订单金额'), dataIndex: 'amount', key: 'amount', scopedSlots: { customRender: 'amountSlot' } },
            { title: t('finance_orders_index@创建时间'), dataIndex: 'createdTime', key: 'time', scopedSlots: { customRender: 'timeSlot' }, width: '12em' },
            { title: t('finance_orders_index@类型'), dataIndex: 'typeName', key: 'type', scopedSlots: { customRender: 'typeSlot' } },
            { title: t('finance_orders_index@状态'), dataIndex: 'statusName', key: 'status', scopedSlots: { customRender: 'statusSlot' } },
            { title: t('finance_orders_index@支付方式'), key: 'method', scopedSlots: { customRender: 'methodSlot' } },
            { title: t('finance_orders_index@用户'), key: 'user', scopedSlots: { customRender: 'userSlot' } },
            { title: t('finance_orders_index@操作'), key: 'action', scopedSlots: { customRender: 'actionSlot' }, width: '6em' }
        ]"
        :data-source="orders"
        :row-key="'code'" 
        :pagination="false"
        size="middle"
    >
        <template slot="codeSlot" slot-scope="{ text, record }">
            <a :href="'/finance/orders/order?orderCode=' + record.code"><keyword :v-word="keyword">{{record.code}}</keyword></a>
        </template>

        <template slot="amountSlot" slot-scope="{ text, record }">
            ¥{{record.amount}}
        </template>

        <template slot="timeSlot" slot-scope="{ text, record }">
            {{record.createdTime}}
        </template>

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

        <template slot="statusSlot" slot-scope="{ text, record }">
            <span :class="{green: record.status == 'finished', disabled: record.status == 'cancelled'}">{{record.statusName}}</span>
        </template>

        <template slot="methodSlot" slot-scope="{ text, record }">
             <span v-if="record.method.id > 0">{{record.method.name}}</span>
            <span v-else class="disabled">-</span>
        </template>

        <template slot="userSlot" slot-scope="{ text, record }">
             <user-link :v-user="record.user" v-if="record.user.id > 0"></user-link>
            <span v-if="record.user.id == 0" class="disabled">[{{t('finance_orders_index@已删除')}}]</span>
        </template>

        <template slot="actionSlot" slot-scope="{ text, record }">
             <a-button type="link" :href="'/finance/orders/order?orderCode=' + record.code">{{t('finance_orders_index@详情')}}</a-button>
        </template>

    </b-table>

    <page-box></page-box>
</div>