@{
    Layout = null;
}

<!DOCTYPE html>
<html style="overflow: auto;">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BLW日志</title>
    <!-- Vue.js -->
    <script src="~/js/vue2.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- jQuery -->
    <script src="~/js/jquery.min.js"></script>

    <!-- 引入第三方库 -->
    <script src="~/js/xlsx.mini.min.js"></script>


    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .el-table__empty-block {
            height: auto !important;
        }

        .el-dialog__footer {
            text-align: left;
        }

        .headbox {
            /*margin: 10px;*/
        }

        .seachbox {
            margin: 10px;
            display: inline-block;
        }

        .bodybox {
            margin: 10px;
            text-align: center;
        }

        .dialogbox .el-table .el-table__cell {
            padding: 2px;
        }

        .el-table .el-table__cell {
            padding: 6px 0;
        }

        .iconClass {
            font-size: 20px; /* 加大图标大小 */
            font-weight: bold;
        }

        .el-table-filter{
            position: absolute;
        }

        /* 日志列css */
        .cell .logdata {
            /*  white-space: nowrap; 不换行 */
            overflow: hidden; /* 超出部分隐藏 */
            text-overflow: ellipsis; /* 显示省略号 */
            cursor: pointer;
            font-size: 12px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1;
        }

        /* 表格行颜色设置 */
        .el-table .up-row {
            background: #ECF5FF;
        }

        .el-table .down-row {
            background: #FEF0F0;
        }

        .el-table .error-row {
            background: #F78989;
        }

        /* 折叠面板 */
        .collapse-title {
            font-weight: bold;
            letter-spacing: 0.5px;
        }

        .data-details {
            margin: 10px 0;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 4px;
        }

        .el-collapse-item__header {
            line-height: 16px;
        }

        .el-collapse-item__content div{
            margin: 0 !important;
            word-break: break-all !important;
        }

    </style>
</head>
<body>

    <div id="app" v-show="isReady" v-cloak style="width:100%;height:100%;">
        <div style="align-content: center; text-align: center; font-size: 22px; margin: 10px;">
            <el-button type="primary" v-on:click="logHome" plain circle style="float: left" icon="el-icon-s-home"></el-button>
            语音助手日志系统
            <span style="font-size:12px;color:gray"> --v1.3.0</span>
        </div>
        <!-- 顶部导航栏以及弹窗 -->
        <div class="headbox">
            <div class="seachbox">
                <el-button type="warning" v-on:click="openDialog = true" plain round>
                    监控对象
                </el-button>
                <span v-if="dialogw == '100%'" style="margin-left: 6px;">
                    <el-switch v-if="logs != unll" 
                               v-model="onlyCorrect"
                               active-color="#FF0000"
                               inactive-color="#00A000"
                               :active-text="activeTxt"
                               :inactive-text="inactiveTxt">
                    </el-switch>
                </span>
                <span v-if="dialogw != '100%'">
                    <el-date-picker v-model="pickerDate"
                                    type="daterange"
                                    align="right"
                                    unlink-panels
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :picker-options="pickerOptions"
                                    style="width: 230px;">
                    </el-date-picker>
                    <el-switch v-if="logs != unll" 
                               v-model="onlyCorrect"
                               active-color="#FF0000"
                               inactive-color="#00A000"
                               :active-text="activeTxt"
                               :inactive-text="inactiveTxt">
                    </el-switch>
                </span>
                <span v-else>
                    <span v-show="mobileSelectedVis">
                        <br />
                        <span class="demonstration" style="margin: 0 26px 0 27px;font-size:13px;"> 开始日期 </span>
                        <el-date-picker v-model="pickerDate[0]"
                                        type="date" style="width: 217px;"
                                        placeholder="开始日期">
                        </el-date-picker>
                        <br />
                        <span class="demonstration" style="margin: 0 26px 0 27px;font-size:13px;"> 结束日期 </span>
                        <el-date-picker v-model="pickerDate[1]"
                                        type="date" style="width: 217px;"
                                        placeholder="结束日期">
                        </el-date-picker>
                    </span>

                    <br />
                    <span>
                        <span style="margin: 0 0 0 26px;"></span>
                        <el-button type="text" v-on:click="dateMobile(1)">今天</el-button>
                        <el-button type="text" v-on:click="dateMobile(3)">3天内</el-button>
                        <el-button type="text" v-on:click="dateMobile(7)">7天内</el-button>
                        <el-button type="text" v-on:click="dateMobile(15)">15天内</el-button>
                        <el-button type="text" v-on:click="dateMobile(30)">30天内</el-button>
                    </span>
                    <br />

                </span>

                <el-button v-show="logs != unll" type="info" class="el-icon-refresh" v-on:click="showSelectedLogs(1)" :disabled="multipleBtn"
                           :size="40" circle plain></el-button>
                <el-button v-show="logs != unll" type="success" class="el-icon-document" v-on:click="exportExcel"
                           :size="40" circle plain></el-button>
                @* <el-button v-show="logs != unll" type="warning" class="el-icon-picture-outline" v-on:click="echartShow"
                           :size="40" circle plain></el-button> *@

                <!-- 弹窗 -->
                <el-dialog title="监控添加"
                           :width="dialogw"
                           :visible.sync="openDialog">
                    <div v-if="mobileSelectedVis || dialogw != '100%'">
                        <div class="seachbox">
                            <el-select v-model="hotelCurrent"
                                       value-key="code"
                                       filterable
                                       clearable
                                       remote
                                       v-on:change="hotelChange"
                                       :remote-method="remoteHotel"
                                       placeholder="请选择酒店">
                                <el-option v-for="hotel in hotels"
                                           :key="hotel.code"
                                           :label="hotel.name"
                                           :value="hotel">
                                    <span style="float: left">{{ hotel.name }}</span>
                                    <span style="float: right; color: #8492a6; font-size: 13px">&nbsp;&nbsp;&nbsp;&nbsp;Code:{{ hotel.code }}</span>
                                </el-option>
                            </el-select>
                        </div>
                        <div class="seachbox">
                            <el-select v-model="roomCurrent"
                                       value-key="roomno"
                                       multiple
                                       filterable
                                       clearable
                                       remote
                                       collapse-tags
                                       :disabled="roomDisable"
                                       :remote-method="remoteRoom"
                                       placeholder="请选择房间">
                                <el-button type="text" v-on:click="allRoomsBtn">&nbsp;&nbsp;全选房间</el-button>
                                <el-option v-for="room in rooms"
                                           :key="room.id"
                                           :label="room.roomno"
                                           :value="room">
                                    <span style="float: left">{{ room.roomno }}</span>
                                    <span style="float: right; color: #8492a6; font-size: 13px">&nbsp;&nbsp;&nbsp;&nbsp;Mac:{{ room.mac }}</span>
                                </el-option>
                            </el-select>
                            <div class="seachbox" style="margin-left: 10px">
                                <el-button type="success" v-on:click="handleAdd" :disabled="btnIntoDisable"
                                           round plain>加入监控</el-button>
                            </div>
                            <el-button type="danger" v-on:click="delSelectedLogs" :disabled="multipleBtn"
                                       round plain>删除所选</el-button>

                            <el-button type="success" class="el-icon-refresh" :size="40" v-on:click="refreshViewValue" circle plain></el-button>
                        </div>
                    </div>
                    <div style="display:inline" v-else>
                        <el-button type="success" class="el-icon-refresh" :size="40" v-on:click="refreshViewValue" circle plain></el-button>

                    </div>
                    <div style="display:inline" v-if="dialogw == '100%'">
                        <el-button type="success" class="el-icon-sort" :size="40" v-on:click="mobileSelectedVis = !mobileSelectedVis"
                                   circle plain></el-button>
                    </div>

                    <div class="dialogbox" style="display: inline-block;width: 100%">
                        <el-table v-if="dialogw != '100%'"
                                  border
                                  :data="selectHotelRoom"
                                  empty-text="暂无监控对象"
                                  :height="tableHeight - 350"
                                  v-on:selection-change="handleSelectionChange">
                            <el-table-column prop="IsSelect"
                                             type="selection"
                                             width="50"
                                             align="center"
                                             header-align="center">
                            </el-table-column>
                            <el-table-column label="操作" width="158">
                                <template slot-scope="scope">
                                    <el-button slot="scope.row" type="primary" icon="el-icon-search" v-on:click="showLog(scope.$index, scope.row)"
                                               circle plain></el-button>
                                    <el-popconfirm title="确定取消监控吗？"
                                                   v-on:confirm="handleRemove(scope.row)">
                                        <el-button slot="reference" type="danger" icon="el-icon-delete"
                                                   circle plain></el-button>
                                    </el-popconfirm>
                                    <el-popconfirm title="确定延长有效期吗？"
                                                   v-on:confirm="handleDelayed(scope.row)">
                                        <el-button slot="reference" type="warning" icon="el-icon-refresh-left"
                                                   circle plain></el-button>
                                    </el-popconfirm>
                                </template>
                            </el-table-column>
                            <el-table-column prop="hotelNameAndCode" label="酒店" width="188" align="center"
                                             :filter-method="filterHandler" :filters="CreatDataTable.hotel" header-align="center" sortable></el-table-column>
                            <el-table-column prop="roomNumber" label="房间" width="90" align="center"
                                             :filter-method="filterHandler" :filters="CreatDataTable.room" header-align="center" sortable></el-table-column>
                            <el-table-column prop="createDateTime" label="创建时间" width="180" align="center"
                                             header-align="center" sortable></el-table-column>
                            <el-table-column prop="remainingTime" label="有效期" width="110" align="center"
                                             header-align="center" sortable></el-table-column>
                            @* <el-table-column label="最后记录" width="110" align="center"
                                             header-align="center">
                                <template slot-scope="scope">
                                    <i v-if="!scope.row.lastData" class="el-icon-loading"></i>
                                    <span v-else>{{ scope.row.lastData }}</span>
                                </template>
                            </el-table-column> *@

                        </el-table>
                        <el-table v-else
                                  border
                                  :data="selectHotelRoom"
                                  empty-text="暂无监控对象"
                                  :height="tableHeight - 350"
                                  v-on:selection-change="handleSelectionChange">
                            <el-table-column prop="IsSelect"
                                             type="selection"
                                             width="43"
                                             align="center"
                                             header-align="center">
                            </el-table-column>
                            <el-table-column label="操作" width="60" align="center" header-align="center">
                                <template slot-scope="scope">
                                    <el-button slot="scope.row" type="info" icon="el-icon-search" size="small" v-on:click="showLog(scope.$index, scope.row)"
                                               circle plain></el-button>
                                    <br />
                                    <el-popconfirm title="确定延长有效期吗？"
                                                   v-on:confirm="handleDelayed(scope.row)">
                                        <el-button slot="reference" type="warning" icon="el-icon-refresh-left" size="small"
                                                   circle plain></el-button>
                                    </el-popconfirm>
                                </template>
                            </el-table-column>
                            <el-table-column label="酒店&房间" width="140" align="center" header-align="center" :filter-method="filterHandlerMobile" :filters="CreatDataTable.hotel">
                                <template slot-scope="scope">
                                    <p style="font-size:10px">{{scope.row.hotelNameAndCode}}</p>
                                    <hr style="border: none; height: 1px; background-color: #D3DCE6;">
                                    <p>{{scope.row.roomNumber}}</p>
                                    @* <hr style="border: none; height: 1px; background-color: #D3DCE6;">
                                    <p style="font-size:11px">{{scope.row.mac}}</p> *@
                                </template>
                            </el-table-column>

                            <el-table-column label="创建&有效" width="155" align="center" header-align="center">
                                <template slot-scope="scope">
                                    <p style="font-size:11px">{{scope.row.createDateTime}}</p>
                                    <hr style="border: none; height: 1px; background-color: #D3DCE6;">
                                    <p>{{scope.row.remainingTime}}</p>
                                    @* <hr style="border: none; height: 1px; background-color: #D3DCE6;">
                                    <i v-if="!scope.row.lastData" class="el-icon-loading"></i>
                                    <p v-if="scope.row.lastData" style="font-size:10px">{{scope.row.lastData}}</p> *@
                                </template>
                            </el-table-column>



                        </el-table>
                    </div>
                    <span slot="footer" class="dialog-footer">
                        @* <span>
                            <el-select v-model="cmdCurrent"
                                       multiple
                                       clearable
                                       collapse-tags
                                       placeholder="请选择命令">
                                <el-button type="text" v-on:click="allCmdBtn">&nbsp;&nbsp;全选</el-button>
                                <el-option v-for="cmd in cmdList"
                                           :key="cmd.value"
                                           :label="cmd.label"
                                           :value="cmd.value">
                                </el-option>
                            </el-select>
                        </span> *@
                        <span v-if="dialogw != '100%'">
                            <el-date-picker v-model="pickerDate"
                                            type="daterange"
                                            align="right"
                                            unlink-panels
                                            range-separator="至"
                                            start-placeholder="开始日期"
                                            end-placeholder="结束日期"
                                            :picker-options="pickerOptions"
                                            style="width: 230px;">
                            </el-date-picker>
                        </span>
                        <span v-else>
                            <span v-show="mobileSelectedVis">
                                <br />
                                <el-date-picker v-model="pickerDate[0]"
                                                type="date" style="width: 217px;"
                                                placeholder="开始日期">
                                </el-date-picker>
                                <span class="demonstration">开始日期 </span>
                                <br />
                                <el-date-picker v-model="pickerDate[1]"
                                                type="date" style="width: 217px;"
                                                placeholder="结束日期">
                                </el-date-picker>
                                <span class="demonstration">结束日期 </span>
                            </span>

                            <br />
                            <span>
                                <el-button type="text" v-on:click="dateMobile(1)">今天</el-button>
                                <el-button type="text" v-on:click="dateMobile(3)">3天内</el-button>
                                <el-button type="text" v-on:click="dateMobile(7)">7天内</el-button>
                                <el-button type="text" v-on:click="dateMobile(15)">15天内</el-button>
                                <el-button type="text" v-on:click="dateMobile(30)">30天内</el-button>
                            </span>
                            <br />
                        </span>

                        <span>
                            <br v-if="dialogw == '100%'" />
                            <el-button type="primary" v-on:click="showSelectedLogs(1)" style="margin-left:10px" :disabled="multipleBtn"
                                       round plain>显示日志</el-button>
                            <el-button type="info" v-on:click="openDialog = false"
                                       round plain>取 消</el-button>
                        </span>

                    </span>
                </el-dialog>

            </div>

            <div class="seachbox"></div>

        </div>
        <!-- 主体内容 -->
        <div class="" style="height: 100%;">
            <el-collapse v-model="activeName">
                <!-- 外层循环：按 requestId 分组 -->
                <el-collapse-item v-for="(logss, requestId) in logs" :key="requestId" :name="requestId">
                    <template slot="title">
                        <span v-if="dialogw != '100%'">
                            <!-- 总步数小于5 -->
                            <span v-if="logss[0].lastStep != 5" style="color:#FF0000">
                                {{ logss[0].hotelName  + ' | ' + logss[0].roomNumber + ' | ' + logss[0].platform + ' | ' + logss[0].triggerTime + ' | ' + logss[0].timeDisparity+ 'ms'}}
                                <span v-for="log in logss" :key="log.id" >
                                    <span v-if="log.step == 4 && log.commandDescription != 'success'" style="color:#FF0000">
                                        {{' | S' + (log.step + 1)}}
                                    </span>
                                    <span v-else style="color:#00A000">
                                        {{' | S' + (log.step + 1)}}
                                    </span>
                                </span>
                            </span>
                            <span v-else style="color:#00A000">
                                {{ logss[0].hotelName  + ' | ' + logss[0].roomNumber + ' | ' + logss[0].platform + ' | ' + logss[0].triggerTime + ' | ' + logss[0].timeDisparity+ 'ms'}}
                                <span v-for="log in logss" :key="log.id">
                                    <span v-if="log.step == 4 && log.commandDescription != 'success'" style="color:#FF0000">
                                        {{' | S' + (log.step + 1)}}
                                    </span>
                                    <span v-else style="color:#00A000">
                                        {{' | S' + (log.step + 1)}}
                                    </span>
                                </span>
                            </span>
                        </span>
                        <span v-else>
                            <span v-if="logss[0].lastStep != 5" style="color:#FF0000">
                                {{ logss[0].hotelName  + ' | ' + logss[0].roomNumber + ' | ' + logss[0].platform  }}
                                <br />
                                {{logss[0].triggerTime + ' | ' + logss[0].timeDisparity+ 'ms'}}
                                <span v-for="log in logss" :key="log.id">
                                    <span v-if="log.step == 4 && log.commandDescription != 'success'" style="color:#FF0000">
                                        {{' | S' + (log.step + 1)}}
                                    </span>
                                    <span v-else style="color:#00A000">
                                        {{' | S' + (log.step + 1)}}
                                    </span>
                                </span>
                            </span>
                            <span v-else style="color:#00A000">
                                {{ logss[0].hotelName  + ' | ' + logss[0].roomNumber + ' | ' + logss[0].platform }}
                                <br />
                                {{logss[0].triggerTime + ' | ' + logss[0].timeDisparity+ 'ms'}}
                                <span v-for="log in logss" :key="log.id">
                                    <span v-if="log.step == 4 && log.commandDescription != 'success'" style="color:#FF0000">
                                        {{' | S' + (log.step + 1)}}
                                    </span>
                                    <span v-else style="color:#00A000">
                                        {{' | S' + (log.step + 1)}}
                                    </span>
                                </span>
                            </span>
                        </span> 
                    </template>
                    <div style="padding: 0 20px;">
                        <!-- 内层循环：按 step 渲染每个步骤 -->
                        <div v-for="log in logss" :key="log.id" style="margin: 10px 0; border-bottom: 1px solid #eee; padding-bottom: 5px;">
                            <div>S{{ log.step + 1 }} - {{ log.triggerTime }}</div>
                            <div style="color: #A0A0A0; margin-top: 1px; font-size:12px;">
                                {{ log.commandDescription || 'null' }}
                            </div>
                        </div>
                    </div>
                </el-collapse-item>
            </el-collapse>
        </div>
    </div>


    <!-- JavaScript引入 -->
    <script src="~/js/LogJs/VoiceLogIndex.js"></script>
</body>
</html>
