<template>
    <div class="commands-list-container commands-body">
        <!-- 头部导航 -->
        <div class="commands-header">
            <Button type="default" icon="ios-arrow-back" class="back-btn" @click="handleBack">
                返回任务列表
            </Button>
            <div class="commands-title">
                <Icon type="ios-list-box" size="20" />
                <span class="title-text">{{ title }}</span>
            </div>
        </div>

        <!-- 内容区域 -->
        <tables :columns="columns" :value="data" :loading="loading"></tables>

        <!-- 查看完整内容弹窗 -->
        <Modal
            v-model="showDetailModal"
            title="查看完整内容"
            width="800"
            :mask-closable="true"
        >
            <div class="detail-content">
                <pre class="detail-pre">{{ detailContent }}</pre>
            </div>
            <div slot="footer">
                <Button @click="showDetailModal = false">关闭</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
export default {
    name: 'CommandsList',
    props: {
        // 是否显示
        visible: {
            type: Boolean,
            default: false
        },
        // 标题
        title: {
            type: String,
            default: '指令列表'
        },
        // 加载状态
        loading: {
            type: Boolean,
            default: false
        },
        // 数据
        data: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            showDetailModal: false,
            detailContent: '',
            columns: [
                { title: 'ID', key: 'id', align: 'center' },
                { title: '序号', key: 'sequence', align: 'center' },
                {
                    title: '指令类型',
                    key: 'command_type',
                    align: 'center',
                    type: 'template',
                    render: (h, params) => {
                        return h('Tag', {
                            props: {
                                color: this.getCommandTypeColor(params.row.command_type)
                            }
                        }, params.row.command_type)
                    }
                },
                { title: '指令名称', key: 'command_name' },
                {
                    title: '指令参数',
                    key: 'command_params',
                    type: 'template',
                    width: 250,
                    render: (h, params) => {
                        if (!params.row.command_params) {
                            return h('span', '-')
                        }
                        return h('div', {
                            class: 'json-content',
                            style: {
                                cursor: 'pointer'
                            },
                            on: {
                                dblclick: () => {
                                    this.showDetail('指令参数', params.row.command_params)
                                }
                            }
                        }, [
                            h('pre', this.formatJson(params.row.command_params))
                        ])
                    }
                },
                {
                    title: '状态',
                    key: 'status',
                    align: 'center',
                    type: 'template',
                    render: (h, params) => {
                        return h('Tag', {
                            props: {
                                color: this.getStatusColor(params.row.status)
                            }
                        }, this.getStatusText(params.row.status))
                    }
                },
                {
                    title: '执行结果',
                    key: 'result',
                    type: 'template',
                    width: 300,
                    render: (h, params) => {
                        if (!params.row.result) {
                            return h('span', '-')
                        }
                        return h('div', {
                            class: 'json-content',
                            style: {
                                cursor: 'pointer'
                            },
                            on: {
                                dblclick: () => {
                                    this.showDetail('执行结果', params.row.result)
                                }
                            }
                        }, [
                            h('pre', this.formatJson(params.row.result))
                        ])
                    }
                },
                {
                    title: '错误信息',
                    key: 'error_message',
                    type: 'template',
                    render: (h, params) => {
                        if (!params.row.error_message) {
                            return h('span', '-')
                        }
                        return h('div', {
                            class: 'error-content'
                        }, params.row.error_message)
                    }
                },
                { title: '重试次数', key: 'retry_count', align: 'center' },
                { title: '执行时长(s)', key: 'execution_time', align: 'center' },
                {
                    title: '创建时间',
                    key: 'create_time',
                    type: 'template',
                    render: (h, params) => {
                        return h('span', this.formatDateTime(params.row.create_time))
                    }
                },
                {
                    title: '更新时间',
                    key: 'last_modify_time',
                    type: 'template',
                    render: (h, params) => {
                        return h('span', this.formatDateTime(params.row.last_modify_time))
                    }
                }
            ]
        }
    },
    methods: {
        // 返回按钮点击
        handleBack() {
            this.$emit('back')
        },

        // 获取指令类型颜色
        getCommandTypeColor(type) {
            const colorMap = {
                'browser': 'blue',
                'search': 'cyan',
                'fill': 'geekblue',
                'click': 'purple',
                'wait': 'orange',
                'screenshot': 'magenta',
                'extract': 'green'
            }
            return colorMap[type] || 'default'
        },

        // 获取状态颜色
        getStatusColor(status) {
            const colorMap = {
                'pending': 'default',
                'running': 'blue',
                'success': 'success',
                'failed': 'error',
                'skipped': 'warning'
            }
            return colorMap[status] || 'default'
        },

        // 获取状态文本
        getStatusText(status) {
            const textMap = {
                'pending': '待执行',
                'running': '执行中',
                'success': '成功',
                'failed': '失败',
                'skipped': '已跳过'
            }
            return textMap[status] || status
        },

        // 格式化JSON
        formatJson(str) {
            if (!str) return ''
            try {
                const obj = typeof str === 'string' ? JSON.parse(str) : str
                return JSON.stringify(obj, null, 2)
            } catch {
                return str
            }
        },

        // 格式化日期时间
        formatDateTime(datetime) {
            if (!datetime) return '-'
            const date = new Date(datetime)
            const year = date.getFullYear()
            const month = String(date.getMonth() + 1).padStart(2, '0')
            const day = String(date.getDate()).padStart(2, '0')
            const hours = String(date.getHours()).padStart(2, '0')
            const minutes = String(date.getMinutes()).padStart(2, '0')
            const seconds = String(date.getSeconds()).padStart(2, '0')
            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
        },

        // 显示完整内容
        showDetail(title, content) {
            this.detailContent = this.formatJson(content)
            this.showDetailModal = true
        }
    }
}
</script>

<style scoped>
/* 容器 - 撑满父元素 */
.commands-list-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    height: 100%;
}

/* 头部导航 */
.commands-header {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    background: #fff;
    border-bottom: 1px solid #e8eaec;
    flex-shrink: 0;
}

.back-btn {
    margin-right: 16px;
}

.commands-title {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.commands-title>>>.ivu-icon {
    margin-right: 8px;
    color: #2d8cf0;
}

.title-text {
    color: #17233d;
}



/* JSON内容显示 */
.commands-body>>>.json-content {
    font-size: 12px;
    line-height: 1.5;
    height: 120px;
    overflow: hidden;
    display: block;
    position: relative;
    transition: background-color 0.2s;
}

.commands-body>>>.json-content:hover {
    background: #f0f0f0;
}

.commands-body>>>.json-content pre {
    margin: 0;
    padding: 8px;
    background: #f8f8f9;
    border-radius: 4px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
    color: #515a6e;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 120px;
    overflow: hidden;
    display: block;
}

/* 错误信息显示 */
.error-content {
    font-size: 12px;
    line-height: 1.5;
    color: #ed4014;
    padding: 8px;
    background: #fff1f0;
    border-radius: 4px;
    border-left: 3px solid #ed4014;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* 表格样式优化 */
.commands-body>>>.ivu-table {
    font-size: 13px;
}

.commands-body>>>.ivu-table-wrapper {
    overflow: visible;
}

.commands-body>>>.ivu-table-body {
    overflow: visible;
}

.commands-body>>>.ivu-table th {
    background: #f8f8f9;
    font-weight: 600;
}

.commands-body>>>.ivu-table-stripe .ivu-table-body tr:nth-child(2n) td {
    background-color: #fafafa;
}

.commands-body>>>.ivu-table td {
    padding: 12px 8px;
    vertical-align: top;
}

/* 确保表格单元格内容不会撑高 */
.commands-body>>>.ivu-table td .json-content {
    max-height: 120px;
    overflow: hidden;
    display: block;
}

.commands-body>>>.ivu-table td .json-content pre {
    max-height: 120px;
    overflow: hidden;
    display: block;
}

/* 滚动条美化 - 仅作用于外层容器 */
.commands-body::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.commands-body::-webkit-scrollbar-thumb {
    background: #dcdee2;
    border-radius: 4px;
}

.commands-body::-webkit-scrollbar-thumb:hover {
    background: #b8bbbf;
}

.commands-body::-webkit-scrollbar-track {
    background: #f8f8f9;
    border-radius: 4px;
}

/* 弹窗内容样式 */
.detail-content {
    max-height: 60vh;
    overflow: auto;
}

.detail-pre {
    margin: 0;
    padding: 16px;
    background: #f8f8f9;
    border-radius: 4px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
    font-size: 13px;
    line-height: 1.6;
    color: #515a6e;
    white-space: pre-wrap;
    word-wrap: break-word;
}
</style>
