<template>
    <!-- 设备管理-识别图片 -->
    <el-card class="image-recognition-container">
        <!-- 顶部过滤器 -->
        <el-card v-show="showSearch" class="search-card">
            <el-form :inline="true" ref="queryFormRef" :model="queryParams" label-width="auto">
                <el-form-item>
                    <el-select clearable filterable v-model="queryParams.vehicleType" placeholder="选择选项"
                        style="width: 250px">
                        <el-option v-for="item in vehicleTypeOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item >
                    <el-date-picker v-model="timeRange" type="datetimerange" range-separator=" ~ "
                        start-placeholder="开始时间" end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm"
                        format="yyyy-MM-dd HH:mm" style="width: 400px" @change="handleTimeRangeChange" />
                </el-form-item>
                <el-form-item>
                    <el-button class="query-btn" @click="handleQuery">查询</el-button>
                    <el-button class="reset-btn" @click="handleReset">重置</el-button>
                    <el-button class="export-btn" @click="handleExport">导出</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <!-- 数据列表 -->
        <el-card class="table-card">
            <div class="table-header">
                <h3 class="table-title">数据列表</h3>
            </div>

            <!-- 图像网格 -->
            <div class="image-grid-container" v-loading="loading">
                <div v-for="(item, index) in imageList" :key="index" class="image-card">
                    <div class="image-wrapper">
                        <el-image :src="item.imageUrl || getDefaultImage()" fit="cover" class="detection-image"
                            :preview-src-list="previewImageList">
                            <div slot="error" class="image-error">
                                <i class="el-icon-picture"></i>
                                <span>图片加载失败</span>
                            </div>
                        </el-image>
                        <!-- 覆盖文本 -->
                        <div class="image-overlay">
                            <div class="overlay-text">
                                {{ formatOverlayText(item) }}
                            </div>
                        </div>
                        <!-- 检测框（如果有坐标数据） -->
                        <div v-if="item.boxes && item.boxes.length > 0" class="detection-boxes">
                            <div v-for="(box, boxIndex) in item.boxes" :key="boxIndex" class="detection-box" :style="{
                                left: (box.xPercent || box.x) + '%',
                                top: (box.yPercent || box.y) + '%',
                                width: (box.widthPercent || box.width) + '%',
                                height: (box.heightPercent || box.height) + '%'
                            }">
                                <div class="box-corner corner-tl"></div>
                                <div class="box-corner corner-tr"></div>
                                <div class="box-corner corner-bl"></div>
                                <div class="box-corner corner-br"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="imageList.length === 0 && !loading" class="empty-state">
                    <i class="el-icon-picture-outline"></i>
                    <p>暂无数据</p>
                </div>
            </div>

            <!-- 分页 -->
            <div class="pagination-wrapper">
                <pagination :total="total" @pagination="handlePagination" :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize" />
            </div>
        </el-card>
    </el-card>
</template>

<script>
import { imageRecognitionListAPI, exportImageRecognitionAPI } from '@/api/device/image-recognition'
import test_image from '@/assets/images/test_image.png'
export default {
    name: 'ImageRecognition',
    data() {
        return {
            showSearch: true,
            loading: false,
            imageList: [],
            total: 0,
            timeRange: null,
            test_image,
            vehicleTypeOptions: [
                { label: '油车', value: '油车' },
                { label: '货车', value: '货车' },
                { label: '客车', value: '客车' },
                { label: '小车', value: '小车' },
            ],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                vehicleType: '',
                startTime: '',
                endTime: '',
            },
        }
    },

    computed: {
        previewImageList() {
            return this.imageList.map(item => item.imageUrl).filter(url => url)
        },
    },

    created() {
        this.getImageList()
    },

    methods: {
        /** 获取测试数据 */
        getTestData() {
            const vehicleTypes = ['油车', '货车', '客车', '小车']
            const locations = ['绕城高速', '京沪高速', '沪杭高速', '杭甬高速', '沈海高速']
            const testData = []

            // 生成20条测试数据
            for (let i = 0; i < 20; i++) {
                const vehicleType = vehicleTypes[i % vehicleTypes.length]
                const location = locations[i % locations.length]
                const date = new Date()
                date.setDate(date.getDate() - Math.floor(i / 4))
                date.setHours(8 + (i % 12), 30 + (i % 30), 0, 0)
                const detectTime = this.formatDateTime(date)

                testData.push({
                    id: i + 1,
                    imageUrl: this.test_image,
                    location: location,
                    detectTime: detectTime,
                    vehicleType: vehicleType,
                    // 添加检测框数据（部分数据有检测框，使用百分比定位）
                    boxes: i % 3 === 0 ? [{
                        xPercent: 20 + (i % 3) * 5,
                        yPercent: 30 + (i % 2) * 10,
                        widthPercent: 30 + (i % 5) * 2,
                        heightPercent: 25 + (i % 4) * 3
                    }] : []
                })
            }

            return testData
        },

        /** 格式化日期时间 */
        formatDateTime(date) {
            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')
            return `${year}-${month}-${day} ${hours}:${minutes}`
        },

        /** 获取图像列表 */
        async getImageList() {
            try {
                this.loading = true
                const params = { ...this.queryParams }

                // 尝试调用API，如果失败则使用测试数据
                try {
                    const res = await imageRecognitionListAPI(params)
                    if (res.code === 200) {
                        this.imageList = res.rows || []
                        this.total = res.total || 0
                        return
                    }
                } catch (apiError) {
                    console.log('API调用失败，使用测试数据:', apiError)
                }

                // 使用测试数据
                const allTestData = this.getTestData()

                // 应用过滤条件
                let filteredData = allTestData
                if (this.queryParams.vehicleType) {
                    filteredData = filteredData.filter(item => item.vehicleType === this.queryParams.vehicleType)
                }
                if (this.queryParams.startTime) {
                    filteredData = filteredData.filter(item => {
                        const itemTime = new Date(item.detectTime.replace(' ', 'T'))
                        const startTime = new Date(this.queryParams.startTime.replace(' ', 'T'))
                        return itemTime >= startTime
                    })
                }
                if (this.queryParams.endTime) {
                    filteredData = filteredData.filter(item => {
                        const itemTime = new Date(item.detectTime.replace(' ', 'T'))
                        const endTime = new Date(this.queryParams.endTime.replace(' ', 'T'))
                        return itemTime <= endTime
                    })
                }

                // 分页处理
                const start = (this.queryParams.pageNum - 1) * this.queryParams.pageSize
                const end = start + this.queryParams.pageSize
                this.imageList = filteredData.slice(start, end)
                this.total = filteredData.length

            } catch (error) {
                console.error('获取图像列表失败:', error)
                // 如果出错，也使用测试数据
                const allTestData = this.getTestData()
                const start = (this.queryParams.pageNum - 1) * this.queryParams.pageSize
                const end = start + this.queryParams.pageSize
                this.imageList = allTestData.slice(start, end)
                this.total = allTestData.length
            } finally {
                this.loading = false
            }
        },

        /** 查询操作 */
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getImageList()
        },

        /** 重置操作 */
        handleReset() {
            this.queryParams.vehicleType = ''
            this.queryParams.startTime = ''
            this.queryParams.endTime = ''
            this.timeRange = null
            this.queryParams.pageNum = 1
            this.getImageList()
        },

        /** 导出操作 */
        async handleExport() {
            try {
                this.loading = true
                const params = { ...this.queryParams }
                const res = await exportImageRecognitionAPI(params)
                if (res.code === 200) {
                    // 处理文件下载
                    const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
                    const url = window.URL.createObjectURL(blob)
                    const link = document.createElement('a')
                    link.href = url
                    link.download = `图像识别数据_${new Date().getTime()}.xlsx`
                    link.click()
                    window.URL.revokeObjectURL(url)
                    this.$message.success('导出成功')
                } else {
                    this.$message.error(res.msg || '导出失败')
                }
            } catch (error) {
                console.error('导出失败:', error)
                this.$message.error('导出失败')
            } finally {
                this.loading = false
            }
        },

        /** 时间范围变化 */
        handleTimeRangeChange(value) {
            if (value && value.length === 2) {
                this.queryParams.startTime = value[0]
                this.queryParams.endTime = value[1]
            } else {
                this.queryParams.startTime = ''
                this.queryParams.endTime = ''
            }
        },

        /** 分页变化 */
        handlePagination({ page, limit }) {
            this.queryParams.pageNum = page
            this.queryParams.pageSize = limit
            this.getImageList()
        },

        /** 获取默认图片 */
        getDefaultImage() {
            return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0iI2Y1ZjVmNSIvPjx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMTQiIGZpbGw9IiM5OTk5OTkiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGR5PSIuM2VtIj7lm77niYfliqDovb3lpLHotKU8L3RleHQ+PC9zdmc+'
        },

        /** 格式化覆盖文本 */
        formatOverlayText(item) {
            const parts = []
            if (item.location) parts.push(item.location)
            if (item.detectTime) parts.push(item.detectTime)
            if (item.vehicleType) parts.push(item.vehicleType)
            return parts.join(' ') || '未知位置'
        },
    },
}
</script>
<style scoped lang="scss">
.image-recognition-container {
    height: calc(100vh - 84px);
    overflow: hidden;
    background: linear-gradient(180deg, #f1f6ff 20%, #e5efff 100%);
}

.search-card {
    margin-bottom: 10px;

    ::v-deep .el-form-item {
        margin-bottom: 10px;
    }

    .query-btn {
        width: 98px;
        height: 36px;
        background: #1f72ea;
        box-shadow: 0px 4px 8px 0px rgba(51, 135, 255, 0.5);
        border-radius: 4px;
        color: #fff;
        border: none;
        font-size: 14px;
        transition: all 0.3s;

        &:hover {
            background: #4a8bff;
            box-shadow: 0px 6px 12px 0px rgba(51, 135, 255, 0.6);
        }
    }

    .reset-btn {
        width: 98px;
        height: 36px;
        background: #ffffff;
        box-shadow: 0px 4px 8px 0px rgba(76, 76, 76, 0.2);
        border-radius: 4px;
        color: #333;
        border: none;
        font-size: 14px;
        transition: all 0.3s;

        &:hover {
            background: #f5f5f5;
            box-shadow: 0px 6px 12px 0px rgba(76, 76, 76, 0.3);
            color: #40a9ff;
        }
    }

    .export-btn {
        width: 98px;
        height: 36px;
        background: #1f72ea;
        box-shadow: 0px 4px 8px 0px rgba(51, 135, 255, 0.5);
        border-radius: 4px;
        color: #fff;
        border: none;
        font-size: 14px;
        transition: all 0.3s;

        &:hover {
            background: #4a8bff;
            box-shadow: 0px 6px 12px 0px rgba(51, 135, 255, 0.6);
        }
    }
}

.table-card {
    height: calc(100vh - 230px);
    display: flex;
    flex-direction: column;

    ::v-deep .el-card__body {
        padding: 20px;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .table-header {
        flex-shrink: 0;
        padding-bottom: 16px;

        .table-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin: 0;
        }
    }

    .image-grid-container {
        flex: 1;
        overflow-y: auto;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        padding: 0 0 16px 0;

        &::-webkit-scrollbar {
            width: 6px;
        }

        &::-webkit-scrollbar-track {
            background: transparent;
        }

        &::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.2);
            border-radius: 3px;

            &:hover {
                background: rgba(0, 0, 0, 0.3);
            }
        }

        .image-card {
            background: #fff;
            border-radius: 4px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            transition: all 0.3s;

            &:hover {
                box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
                transform: translateY(-2px);
            }

            .image-wrapper {
                position: relative;
                width: 100%;
                padding-top: 75%; // 4:3 比例
                overflow: hidden;

                .detection-image {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                }

                .image-overlay {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    padding: 8px;
                    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent);
                    pointer-events: none;

                    .overlay-text {
                        color: #fff;
                        font-size: 12px;
                        line-height: 1.4;
                        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
                    }
                }

                .detection-boxes {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    pointer-events: none;

                    .detection-box {
                        position: absolute;
                        border: 2px solid #ff0000;
                        box-sizing: border-box;

                        .box-corner {
                            position: absolute;
                            width: 8px;
                            height: 8px;
                            background: #00ff00;
                            border: 1px solid #fff;

                            &.corner-tl {
                                top: -4px;
                                left: -4px;
                            }

                            &.corner-tr {
                                top: -4px;
                                right: -4px;
                            }

                            &.corner-bl {
                                bottom: -4px;
                                left: -4px;
                            }

                            &.corner-br {
                                bottom: -4px;
                                right: -4px;
                            }
                        }
                    }
                }

                .image-error {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    text-align: center;
                    color: #999;

                    i {
                        font-size: 32px;
                        display: block;
                        margin-bottom: 8px;
                    }
                }
            }
        }

        .empty-state {
            grid-column: 1 / -1;
            text-align: center;
            padding: 60px 0;
            color: #999;

            i {
                font-size: 64px;
                display: block;
                margin-bottom: 16px;
            }

            p {
                font-size: 14px;
                margin: 0;
            }
        }
    }

    .pagination-wrapper {
        flex-shrink: 0;
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid #ebeef5;
    }
}
</style>
