{$layout}

<div class="right-box">
    <first-menu>
        <menu-item href="/tickets?status=none" code="none">{{t('tickets_index@进行中')}}({{countNewTickets}})</menu-item>
        <menu-item href="/tickets?status=solved" code="solved">{{t('tickets_index@已解决')}}</menu-item>
        <menu-item href="/tickets?status=closed" code="closed">{{t('tickets_index@已关闭')}}</menu-item>
    </first-menu>

    <div class="margin"></div>
    <form class="ui form" action="/tickets">
        <div class="ui fields inline">
            <div class="ui field">
                <user-selector :v-user-id="userId" :data-url="'/tickets/users/options'"></user-selector>
            </div>
            <div class="ui field">
                <button class="ui button" type="submit">{{t('tickets_index@搜索')}}</button>
                &nbsp;
                <a :href="'/tickets?status=' + status" v-if="userId > 0">[{{t('tickets_index@清除条件')}}]</a>
            </div>
        </div>
    </form>

    <b-empty v-if="tickets.length == 0">{{t('tickets_index@暂时还没有工单')}}</b-empty>

    <b-table
        v-if="tickets.length > 0"
        :columns="[
            { title: t('tickets_index@工单标题'), key: 'subject', scopedSlots: { customRender: 'subjectSlot' } },
            { title: t('tickets_index@用户'), key: 'user', scopedSlots: { customRender: 'userSlot' }, width: '15%' },
            { title: t('tickets_index@最后操作时间'), dataIndex: 'lastLogTime', key: 'time', scopedSlots: { customRender: 'timeSlot' }, width: '150px' },
            { title: t('tickets_index@最后操作人'), key: 'operator', scopedSlots: { customRender: 'operatorSlot' }, width: '150px' },
            { title: t('tickets_index@分类'), key: 'category', scopedSlots: { customRender: 'categorySlot' }, width: '120px' },
            { title: t('tickets_index@状态'), dataIndex: 'statusName', key: 'status', scopedSlots: { customRender: 'statusSlot' }, width: '80px', align: 'center' },
            { title: t('tickets_index@操作'), key: 'action', scopedSlots: { customRender: 'actionSlot' }, width: '200px', align: 'center' }
        ]"
        :data-source="tickets"
        :row-key="'id'"
        :pagination="false"
        size="middle"
    >
        <template slot="subjectSlot" slot-scope="{ text, record }">
            <a :href="'/tickets/ticket?ticketId=' + record.id + '&fromURL=' + currentURL">{{record.subject}}</a>
        </template>

        <template slot="userSlot" slot-scope="{ text, record }">
            <span v-if="record.user != null"><user-link :v-user="record.user"></user-link></span>
            <span v-else class="disabled">{{t('tickets_index@已删除')}}</span>
        </template>

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

        <template slot="operatorSlot" slot-scope="{ text, record }">
             <span v-if="record.latestLog != null && record.latestLog.admin != null">
                <i class="icon user secret"></i> {{record.latestLog.admin.fullname}}<span class="grey small">（{{record.latestLog.admin.username}}）</span>
            </span>
            <span v-else>
                <span v-if="record.user != null"><user-link :v-user="record.user"></user-link></span>
                <span v-else class="disabled">{{t('tickets_index@已删除')}}</span>
            </span>
        </template>

        <template slot="categorySlot" slot-scope="{ text, record }">
            <span v-if="record.category != null">{{record.category.name}}</span>
            <span v-else class="disabled">-</span>
        </template>

        <template slot="statusSlot" slot-scope="{ text, record }">
             <span :class="{olive: record.status == 'none', green: record.status == 'solved', red: record.status == 'closed'}">{{record.statusName}}</span>
        </template>

        <template slot="actionSlot" slot-scope="{ text, record }">
             <a class="ant-btn-link" :href="'/tickets/ticket?ticketId=' + record.id+ '&fromURL=' + currentURL">{{t('tickets_index@详情')}}</a>
        </template>
    </b-table>

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