<template>
    <div>
        <el-dialog title="请求链路" :visible.sync="dialog" center width="900px" top="50px">
            <div>
                <el-table :data="tableData" v-loading="tableLoading" border fit>
                    <el-table-column type="index" label="序号" width="60"></el-table-column>
                    <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>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div slot="footer" class="dialog-footer text-center">
                <el-button @click="dialog = false">确定</el-button>
                <!-- <el-button type="danger" @click="handleSubmit">确 定</el-button> -->
            </div>
        </el-dialog>
        <detail v-if="detailsDialog.show" v-model="detailsDialog.show" :exData="detailsDialog.exData" @success="init"></detail>
    </div>
</template>

<script>
import detail from '../list/detail'
export default {
    props: {
        value: {
            type: Boolean,
            default: true,
        },
        exData: {
            type: Object,
            default: {},
        },
    },
    components: {
        detail,
    },
    data() {
        return {
            tableData: [],
            detailsDialog: {
                show: false,
                exData: {}
            },
            dialog: !!this.value,
        }
    },
    methods: {
        async getData() {
            const data = await this.$fetch('/search/trace/log', {uniqueTraceId: this.exData.unique_trace_id, index: this.exData.index}, 'get')
            this.tableData = data.data.list
        },
        view(row) {
            this.detailsDialog.exData = row
            this.detailsDialog.show = true
        }
    },
    mounted() {
        this.getData()
    },
    watch: {
        dialog(val) {
            if (!val) this.$emit('input', val)
        },
    },
}
</script>
<style lang="scss">
</style>
