<template>
    <div>
        <div class="search-content">
            <el-form :inline="true">
                <el-form-item>
                    <el-select v-model="searchForm.requestTime" placeholder="日期">
                        <el-option v-for="(item, index) in dateList" :key="index" :label="item" :value="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-time-picker
                        is-range
                        v-model="times"
                        @change="timearr => {timearr ? (searchForm.requestStartTime = timearr[0], searchForm.requestEndTime = timearr[1]) : searchForm.requestStartTime = searchForm.requestEndTime = undefined}"
                        value-format="HH:mm:ss"
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        placeholder="选择时间范围">
                    </el-time-picker>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="searchForm.projectName" placeholder="项目">
                        <el-option v-for="(item, index) in projectList" :key="index" :label="item.project_name" :value="item.project_coce"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="searchForm.requestPath" clearable placeholder="请输入路径"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="searchForm.requestParam" clearable placeholder="请输入请求参数"></el-input>
                </el-form-item>
                <el-form-item class="ml-10">
                    <el-button icon="el-icon-search" type="primary" @click="searchSubmit">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="tableData" v-loading="tableLoading" border fit>
            <el-table-column prop="request_path" label="请求路径"></el-table-column>
            <el-table-column prop="request_project_name" label="项目名称"></el-table-column>
            <el-table-column prop="created_at" label="请求时间"></el-table-column>
            <el-table-column prop="request_time" label="执行时间" :formatter="row => row.request_time + '毫秒'"></el-table-column>
            <el-table-column label="详情">
                <template slot-scope="scope">
                    <el-button type="text" @click="view(scope.row)">详情</el-button>
                    <el-button v-permission="'trace-log-list'" v-if="scope.row.unique_trace_id" type="text" @click="viewPath(scope.row)">请求链路</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            class="marginT-20"
            @current-change="handleCurrentChange"
            :hide-on-single-page="false"
            :current-page="pageNo"
            :page-size="pageSize"
            background
            layout="total, prev, pager, next, jumper"
            :total="totalCount"
        />
        <detail v-if="detailsDialog.show" v-model="detailsDialog.show" :exData="detailsDialog.exData" @success="init"></detail>
        <linkPath v-if="linkPathDialog.show" v-model="linkPathDialog.show" :exData="linkPathDialog.exData" @success="init"></linkPath>
    </div>
</template>

<script>
import page from '@/mixin/page'
import detail from './detail';
import linkPath from '../_dialog/linkPath';
export default {
    mixins: [page],
    components: {
        detail,
        linkPath
    },
    data() {
        return {
            linkPathDialog: {
                show: false,
                exData: {}
            },
            detailsDialog: {
                show: false,
                exData: {}
            },
            times: null,
            dateList: [],
            projectList: [],
            tableData: [],
            searchForm: {
                requestTime: '',
                projectName: ''
            },
            tableUrl: '/search/request/log',
        }
    },
    methods: {
        async getConditionList() {
            const data = await this.$fetch('/search/condition/list', {}, 'get')
            if (data.code == 200) {
                this.dateList = data.data.date_list
                this.projectList = data.data.project_list
                if (this.dateList.length > 0 && this.projectList.length > 0) {
                    this.searchForm.requestTime = this.dateList[0]
                    this.searchForm.projectName = this.projectList[0].project_coce
                }
            }
        },
        view(row) {
            this.detailsDialog.exData = row
            this.detailsDialog.show = true
        },
        viewPath(row) {
            this.linkPathDialog.exData = {...row, index: this.searchForm.requestTime}
            this.linkPathDialog.show = true
        }
    },
    async mounted() {
        await this.getConditionList()
        this.init()
    },
}
</script>

<style lang="scss" scoped>
</style>
