<template>
    <div class="content-styl" v-loading="loadingData">
        <div class="search-styl">
            <div class="search-content">
                <div class="search-left">
                    <div class="search-card">
                        <p>选择查询接口：</p>
                        <el-select
                            v-model="filter.apiId"
                            size="small"
                            placeholder="请选择"
                        >
                            <el-option
                                v-for="(item, index) in apiList"
                                :key="index"
                                :label="item.name"
                                :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </div>
                    <div class="search-card">
                        <p>申请时间：</p>
                        <div class="date-item">
                            <el-date-picker
                                class="date-select"
                                v-model="filter.start"
                                format="yyyy-MM-dd"
                                type="date"
                                placeholder="选择日期"
                            >
                            </el-date-picker>
                            <el-date-picker
                                class="date-select"
                                v-model="filter.end"
                                format="yyyy-MM-dd"
                                type="date"
                                placeholder="选择日期"
                            >
                            </el-date-picker>
                            <div class="date-show">
                                <div class="date">
                                    {{ filter.start | dateFormat }}
                                    <i class="el-icon-date"></i>
                                </div>
                                <div class="line"></div>
                                <div class="date">
                                    {{ filter.end | dateFormat }}
                                    <i class="el-icon-date"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="search-right">
                    <div class="search-btn" @click="backFun()">返回</div>
                    <div class="search-btn" @click="searchFun()">查询</div>
                    <div class="reset-btn" @click="clearFilter()">重置</div>
                </div>
            </div>
        </div>
        <div class="main">
            <div class="table-content">
                <div class="export-btn" @click="exportData">导出</div>
                <el-table
                    :data="logList"
                    :stripe="true"
                    border
                    style="width: 100%; margin-top: 40px"
                    :header-cell-style="{
                        background: '#F5F7FE',
                        color: '#606266',
                    }"
                    :cell-style="{ 'text-align': 'center' }"
                >
                    <el-table-column label="序号" align="center" width="80">
                        <template slot-scope="scope">
                            {{ scope.$index + 1 }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="apiName"
                        label="接口名称"
                        width="200"
                        align="center"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="apiUrl"
                        label="接口地址"
                        align="center"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="username"
                        label="访问人"
                        width="180"
                        align="center"
                    ></el-table-column>
                    <el-table-column
                        prop="created"
                        label="访问时间"
                        width="180"
                        align="center"
                    ></el-table-column>
                    <el-table-column
                        prop="ip"
                        label="访问IP"
                        width="180"
                        align="center"
                    ></el-table-column>
                    <el-table-column
                        prop="params"
                        label="访问参数"
                        width="180"
                        align="center"
                    ></el-table-column>
                </el-table>
            </div>
            <a id="apiexcel" href="" download="查询日志"></a>
            <div class="footer">
                <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    :current-page.sync="page"
                    layout="total, sizes, prev, pager, next, jumper"
                    :page-size="size"
                    :total="this.totalSize"
                ></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import dayjs from "dayjs";
    import { baseUrl } from "../config";
    export default {
        data() {
            return {
                filter: {
                    apiId: "",
                    start: "",
                    end: "",
                },
                apiList: [],
                logList: [],
                size: 20, //每页展示的条数
                totalSize: 0, //一共多少条
                page: 1, //当前页
                loadingData: false,
            };
        },
        filters: {
            dateFormat(date) {
                console.log("时间", date);
                if (!date) return "";
                let day = dayjs(date);
                return day.format("YYYY-MM-DD");
            },
        },
        created() {},
        mounted() {
            this.getList();
            this.getApiList();
        },
        methods: {
            //导出数据
            exportData() {
                let data = {
                    apiId: this.filter.apiId,
                    start: this.filter.start
                        ? dayjs(this.filter.start).format("YYYY-MM-DD HH:mm:ss")
                        : "",
                    end: this.filter.end
                        ? dayjs(this.filter.end).format("YYYY-MM-DD HH:mm:ss")
                        : "",
                };
                let apiexcel = document.getElementById("apiexcel");
                apiexcel.href =
                    baseUrl +
                    "/open/log/export" +
                    "?apiId=" +
                    data.apiId +
                    "&start=" +
                    data.start +
                    "&end=" +
                    data.end;
                console.log("a标签下载地址", apiexcel.href);
                apiexcel.click();
                console.log("导出成功");
            },
            // exportData() {
            //     let apiexcel = document.getElementById("apiexcel");
            //     let data = {
            //         apiId: this.filter.apiId,
            //         start: this.filter.start
            //             ? dayjs(this.filter.start).format("YYYY-MM-DD HH:mm:ss")
            //             : "",
            //         end: this.filter.end
            //             ? dayjs(this.filter.end).format("YYYY-MM-DD HH:mm:ss")
            //             : "",
            //     };
            //     this.httpGet(this.$root.api_logExport, data).then(
            //         (res) => {
            //             apiexcel.href = res;
            //             apiexcel.click();
            //             console.log("导出成功");
            //         },
            //         (res) => {
            //             this.$message.error(res);
            //         }
            //     );
            // },
            //筛选
            searchFun() {
                this.page = 1;
                this.getList();
            },
            backFun() {
                this.$router.back();
            },
            //清空筛选条件，重新拉list接口
            clearFilter() {
                this.filter = {
                    apiId: "",
                    start: "",
                    end: "",
                }; // 筛选条件
                this.page = 1;
                this.getList();
            },
            getList() {
                this.loadingData = true;
                let data = {
                    apiId: +this.filter.apiId,
                    start: this.filter.start
                        ? dayjs(this.filter.start).format("YYYY-MM-DD HH:mm:ss")
                        : "",
                    end: this.filter.end
                        ? dayjs(this.filter.end).format("YYYY-MM-DD HH:mm:ss")
                        : "",
                    current: this.page,
                    size: this.size,
                };
                this.httpGet(this.$root.api_logList, data).then(
                    (res) => {
                        this.logList = res.records;
                        this.totalSize = res.total;
                        this.loadingData = false;
                    },
                    (res) => {
                        this.loadingData = false;
                        this.$message.error(res);
                    }
                );
            },
            getApiList() {
                let data = {
                    current: 1,
                    size: 9999,
                    status: 0,
                };
                this.httpGet(this.$root.api_apiList, data)
                    .then((res) => {
                        this.apiList = res.records;
                    })
                    .catch((err) => {
                        console.log("接口报错", err);
                    });
            },
            // 改变当前页
            handleCurrentChange(val) {
                this.page = val;
                this.getList();
            },
            //改变每页多少条
            handleSizeChange(val) {
                this.size = val;
                this.getList();
                console.log(`每页 ${val} 条`);
            },
        },
    };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    @import '~assets/main.styl';

    .content-styl {
        .search-styl {
            color: #666666;

            .search-content {
                flex-x();
                font-size: 13px;

                .search-left {
                    flex-x(flex-start);
                    flex-wrap: wrap;

                    .search-card {
                        flex-x();
                        margin-right: 38px;

                        p {
                            margin-right: 10px;
                            flex-shrink: 0;
                        }

                        .date-item {
                            position: relative;

                            >>>.el-date-editor {
                                width: 172px;
                                height: 32px;
                                margin-right: 16px;
                            }

                            >>>.el-input__inner {
                                width: 172px;
                                height: 32px;
                            }

                            .date-select {
                                opacity: 0;
                                z-index: 10;
                                cursor: pointer;

                                input {
                                    cursor: pointer;
                                }
                            }

                            .date-show {
                                width: 360px;
                                height: 32px;
                                line-height: 32px;
                                position: absolute;
                                cursor: pointer;
                                top: 0;
                                left: 0;
                                flex-x();

                                .line {
                                    width: 8px;
                                    height: 1px;
                                    background: #999999;
                                }

                                .date {
                                    width: 172px;
                                    height: 32px;
                                    line-height: 32px;
                                    padding-left: 12px;
                                    text-align: left;
                                    box-sizing: border-box;
                                    border: 1px solid #DCDFE6;
                                    color: gray9;
                                    position: relative;

                                    i {
                                        color: btn-color;
                                        font-size: 18px;
                                        position: absolute;
                                        right: 12px;
                                        top: 50%;
                                        transform: translateY(-50%);
                                    }
                                }
                            }
                        }
                    }

                    >>>.el-input--small {
                        width: 242px;
                    }

                    >>>.element-select .el-input--small {
                        width: 220px !important;
                    }

                    >>>.element-select1 .el-input--small {
                        width: 168px !important;
                    }
                }

                .search-right {
                    flex-x();

                    .search-btn {
                        solid-btn(100px, 32px);
                        margin-right: 16px;
                    }

                    .reset-btn {
                        solid-btn(100px, 32px);
                    }
                }
            }
        }

        .main {
            .table-content {
                position: relative;

                .export-btn {
                    hollow-btn(100px, 32px);
                    border: 1px solid btn-color;
                    border-radius: 16px;
                    position: absolute;
                    right: 0;
                }
            }
        }
    }
</style>