{$layout}

<div class="ticket-detail-container">
    <div class="ticket-form">
        <div class="form-header">
            <div class="form-title">
                <a :href="fromURL.length > 0 ? fromURL : '/tickets?status=' + ticket.status" class="back-button">
                    <i class="icon arrow left"></i>
                </a>
                <h2>{{t('tickets_ticket_index@工单详情')}}</h2>
                <div class="ticket-status">
                    <span
                        class="status-tag"
                        :class="{olive: ticket.status == 'none', green: ticket.status == 'solved', red: ticket.status == 'closed'}"
                        >{{ticket.statusName}}</span
                    >
                </div>
            </div>
            <div class="form-actions">
                <a href="" @click.prevent="reply(ticket.id)" class="action-button">
                    <i class="icon reply"></i>
                    {{t('tickets_ticket_index@回复工单')}}
                </a>
            </div>
        </div>

        <div class="form-content">
            <div class="form-group">
                <label class="form-label">
                    <i class="icon file text"></i>
                    {{t('tickets_ticket_index@工单标题')}}
                </label>
                <div class="form-value">{{ticket.subject}}</div>
            </div>

            <div class="form-group">
                <label class="form-label">
                    <i class="icon folder"></i>
                    {{t('tickets_ticket_index@工单分类')}}
                </label>
                <div class="form-value">
                    <span v-if="ticket.category != null" class="category-tag">{{ticket.category.name}}</span>
                    <span v-else class="disabled">-</span>
                </div>
            </div>

            <div class="form-group">
                <label class="form-label">
                    <i class="icon clock"></i>
                    {{t('tickets_ticket_index@最后操作时间')}}
                </label>
                <div class="form-value">{{ticket.lastLogTime}}</div>
            </div>

            <div class="form-group">
                <label class="form-label">
                    <i class="icon file text outline"></i>
                    {{t('tickets_ticket_index@工单内容')}}
                </label>
                <div class="form-value ticket-body">
                    <div v-html="ticket.body"></div>
                </div>
            </div>
        </div>

        <div class="form-section">
            <div class="section-title">
                <i class="icon comments"></i>
                {{t('tickets_ticket_index@工单回复')}}
                <span class="reply-count" v-if="logs.length > 0">({{logs.length}})</span>
            </div>
            
            <b-empty v-if="logs.length == 0" class="empty-replies">
                <i class="icon comments outline"></i>
                <p>{{t('tickets_ticket_index@暂时还没有回复')}}</p>
            </b-empty>

            <div class="reply-list" v-if="logs.length > 0">
                <div class="reply-item" v-for="log in logs">
                    <div class="reply-header">
                        <div class="user-info">
                            <span v-if="log.adminId > 0" class="user-type admin">
                                <i class="icon user secret"></i> {{t('tickets_ticket_index@管理员')}}
                            </span>
                            <span v-if="log.userId > 0" class="user-type self">
                                <i class="icon user"></i> {{t('tickets_ticket_index@自己')}}
                            </span>
                            <span class="reply-time">
                                <i class="icon time"></i>
                                {{log.createdTime}}
                            </span>
                        </div>
                        <span
                            v-if="log.statusName.length > 0"
                            class="status-tag"
                            :class="{olive: log.status == 'none', green: log.status == 'solved', red: log.status == 'closed'}"
                            >{{log.statusName}}</span
                        >
                    </div>
                    <div class="reply-content">
                        <div v-html="log.comment" v-if="log.comment.length > 0"></div>
                        <span class="disabled">{{t('tickets_ticket_index@没有内容')}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<page-box></page-box>