<div class="modal fade" tabindex="-1" role="dialog" id="modal">
    <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="btn btn-outline-info pull-left" @click="addLog()">新增</button>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <table class="table table-sm table-hover table-striped" v-if="index !== ''">
                    <tr>
                        <th>状态</th>
                        <th>操作者</th>
                        <th>说明</th>
                        <th>操作时间</th>
                    </tr>
                    <tr v-for="(log,i) in customerLogs[customers[index]['id']]">
                        <td>
                            <select id="logStatusName" v-if="!log.id" class="form-control form-control-sm" :id="'logStatus-'+log.id">
                                <option v-for="logStatus in logStatuses" :value="logStatus.id">@{{ logStatus.name }}</option>
                            </select>
                            <label v-else for="logStatusName">
                                @{{ log.status.name }}
                            </label>
                        </td>
                        <td>@{{ log.user.name }}</td>
                        <td style="max-width: 100px" class="cursor-pointer" @mouseenter="textClass($event,true)" @mouseleave="textClass($event,false)">
                            <div class="text-overflow-replace" v-if="currentLogIndex !== i" @click="edit(i,log.user)">
                                @{{ log.description }}
                            </div>
                            <div v-if="currentLogIndex === i && i===0">
                                <textarea class="form-control form-control-sm" v-text="log.description" :id="'description-'+log.id"></textarea>
                            </div>
                        </td>
                        <td>@{{ log.created_at }}</td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" v-if="currentLogIndex !== ''" @click="editLog()">保存</button>
                <button type="button" class="btn btn-danger" v-if="currentLogIndex !== ''" @click="closeEditLog()">取消</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
