<template>
    <div>
        <el-dialog title="请求详情" :visible.sync="dialog" center width="900px" top="50px">
            <div>
                <el-form ref="form" label-width="100">
                    <el-form-item label="项目名称"> {{exData.request_project_name}} </el-form-item>
                    <el-form-item label="请求路径"> {{exData.request_path}} </el-form-item>
                    <el-form-item label="请求参数">
                        <prism-editor class="my-editor" v-model="exData.request_param" line-numbers readonly :highlight="highlighter"></prism-editor>
                    </el-form-item>
                    <!-- <el-form-item label="请求响应"> {{exData.request_response}} </el-form-item> -->
                    <el-form-item label="请求响应">
                        <prism-editor class="my-editor" v-model="exData.request_response" line-numbers readonly :highlight="highlighter"></prism-editor>
                    </el-form-item>
                    <el-form-item label="sql语句">
                        <prism-editor class="my-editor" v-model="exData.request_sql_log" line-numbers readonly :highlight="code => highlighter(code, 'sql')"></prism-editor>
                    </el-form-item>
                    <el-form-item label="自定义日志">
                        <prism-editor class="my-editor" v-model="exData.request_log" line-numbers readonly :highlight="highlighter"></prism-editor>
                    </el-form-item>
                    <el-form-item label="请求时间"> {{exData.created_at}}</el-form-item>
                    <el-form-item label="响应时间"> {{exData.updated_at}}</el-form-item>
                    <el-form-item label="执行时间"> {{exData.request_time}} 毫秒</el-form-item>
                </el-form>
            </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>
    </div>
</template>

<script>
import { PrismEditor } from 'vue-prism-editor'
import 'vue-prism-editor/dist/prismeditor.min.css'
import { highlight, languages } from 'prismjs/components/prism-core'
import 'prismjs/components/prism-clike'
import 'prismjs/components/prism-sql'
import 'prismjs/components/prism-json'
import 'prismjs/components/prism-vim'
import 'prismjs/themes/prism-tomorrow.css'
import attempt from 'lodash/attempt';
export default {
    props: {
        value: {
            type: Boolean,
            default: true,
        },
        exData: {
            type: Object,
            default: {},
        },
    },
    components: {
        PrismEditor,
    },
    data() {
        return {
            showData: {},
            dialog: !!this.value,
        }
    },
    methods: {
        highlighter(code, type = 'json') {
            return highlight(code, languages[type]) // languages.<insert language> to return html with markup
        },
        async handleSubmit() {
            
        },
        parseLodash(str){  
            return attempt(JSON.parse.bind(null, str));  
        },
        parseData(data) {
            let response = this.parseLodash(this.exData.request_response)
            let param = this.parseLodash(this.exData.request_param)
            let log = this.parseLodash(this.exData.request_log)
            if (response) {
                this.exData.request_response = JSON.stringify(response, null, 4)
            }
            if (param) {
                this.exData.request_param = JSON.stringify(param, null, 4)
            }
            if (log) {
                this.exData.request_log = JSON.stringify(log, null, 4)
            }
        }
    },
    mounted() {
        this.parseData()
    },
    watch: {
        dialog(val) {
            if (!val) this.$emit('input', val)
        },
    },
}
</script>
<style lang="scss">
.my-editor {
    width: 750px;
    max-height: 600px;
    /* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
    background: #2d2d2d;
    color: #ccc;

    /* you must provide font-family font-size line-height. Example: */
    font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
    font-size: 14px;
    line-height: 1.5;
    padding: 5px;
}

/* optional class for removing the outline */
.prism-editor__textarea:focus {
    outline: none;
}
.footer-btn {
    margin-top: -30px;
}
// .prism-editor__textarea {
//   width: 999999px !important;
// }
// .prism-editor__editor {
//   white-space: pre !important;
// }
// .prism-editor__container {
//   overflow-x: scroll !important;
// }
</style>
