<template>
    <div class="image-captioning-container">
        <!-- 左侧导航栏 -->
        <Sidebar
            :is-sidebar-visible="isSidebarVisible"
            :label-list="labelList"
            :selected-item="selectedItem"
            :current-index="1"
            @toggle-sidebar="toggleSidebar"
            @create-new-label="createNewLabel"
            @select-item="selectItem"
        />

        <!-- 主内容区域 -->
        <div class="main-content" v-if="showNewAnnotation">
            <!-- 主内容区域-新增的 -->
            <div class="add-content">
                <!-- 标题 -->
                <div class="welcome-message"> 嗨！我是你的图像标注助理 </div>

                <!-- 标签选择区域 -->
                <TagSelector
                    :tags="tags"
                    :visible-tags="visibleTags"
                    :selected-tag="selectedTag"
                    @toggle-tag="toggleTag"
                    @toggle-all-tags="toggleAllTags"
                />

                <!-- 输入备注 -->
                <el-input
                    :rows="1"
                    placeholder="请输入备注"
                    type="textarea"
                    v-model="remarkInfo"
                />

                <!-- 图片上传区域 -->
                <FileUploader
                    :file-list="fileList"
                    :selected-tag="selectedTag"
                    @file-change="handleFileChange"
                    @remove-image="removeImage"
                    @start-upload="startUpload"
                />
            </div>
        </div>

        <!-- 主内容区域-历史 -->
        <div class="main-content" v-if="showNewAnnotationAdd">
            <HistoryView
                :upload-info="uploadInfo"
                :image-results="imageResults"
                :grouped-image-results="groupedImageResults"
                :selected-images="selectedImages"
                :tags="tags"
                :visible-tags="visibleTags"
                :selected-tag="selectedTag"
                :file-list="fileList"
                :is-sure="isSure"
                @hand-click="handleHandClick"
                @confirm-results="confirmResults"
                @toggle-tag="toggleTag"
                @toggle-all-tags="toggleAllTags"
                @file-change="handleFileChange"
                @remove-image="removeImage"
                @start-upload="startUpload"
                @update-image-annotation="updateImageAnnotation"
            />
        </div>
    </div>
</template>

<script>
import {
    getSelectedAPI,
    getImageListAPI,
    getImageListDetailsAPI,
    addImageInfoAPI,
    updateImageSureAPI,
} from '@/api/imageCaptioning/imageCaptioning'
import Sidebar from './components/Sidebar'
import TagSelector from './components/TagSelector'
import FileUploader from './components/FileUploader'
import HistoryView from './components/HistoryView'

export default {
    name: 'imageCaptioning',
    components: {
        Sidebar,
        TagSelector,
        FileUploader,
        HistoryView,
    },
    data() {
        return {
            showNewAnnotation: true, // 控制新建标注界面的显示状态
            showNewAnnotationAdd: false, // 控制历史界面的显示状态
            tags: [], // 标签数据
            visibleTags: [], // 默认显示前3个
            selectedTag: [], // 当前选中的标签
            showAllTags: false, // 控制是否显示所有标签

            // 导航栏数据
            labelList: [],
            selectedItem: null,
            // 文件上传相关
            fileList: [],
            showImageResults: false,
            uploadInfo: '',

            // 图片识别结果
            imageResults: [],
            selectedImages: {}, // 用于跟踪选中的图片
            isSidebarVisible: true, // 控制左侧导航栏显示/隐藏
            isSure: '', //小图标，确定按钮 0-未确定 1-已确定
            addId: '', //新增id

            groupedImageResults: [], // 新增分组数据

            remarkInfo: '', // 备注信息
        }
    },

    created() {
        // 获取标签列表数据
        this.getSelectedAPI()
        //查询左侧历史记录
        this.getImageListAPI()
    },

    methods: {
        async getSelectedAPI() {
            try {
                const res = await getSelectedAPI()
                // 判断返回码和数据
                if (res.code === 200 && res.data && Array.isArray(res.data)) {
                    // 将返回的数据转换为包含 id 和 name 的对象数组
                    this.tags = res.data.map((item) => ({
                        id: item.id,
                        name: item.name,
                    }))
                    this.visibleTags = this.tags.slice(0, 3)
                } else {
                    console.error('获取标签列表失败:', res)
                    this.tags = []
                }
            } catch (error) {
                console.error('获取标签列表异常:', error)
                this.tags = []
            }
        },

        async getImageListAPI() {
            try {
                const res = await getImageListAPI({ operaType: 1 })
                // 判断返回码和数据
                if (res.code === 200 && res.data && Array.isArray(res.data)) {
                    this.labelList = res.data.map((item) => ({
                        id: item.id,
                        date: item.operaTime,
                        name: item.operaName,
                    }))
                }
            } catch (error) {
                console.error('获取列表异常:', error)
            }
        },

        createNewLabel() {
            this.selectedItem = null
            this.fileList = []
            this.selectedTag = []
            this.showImageResults = false
            this.uploadInfo = ''
            this.imageResults = []
            this.selectedImages = {}
            this.showNewAnnotation = true
            this.showNewAnnotationAdd = false
            this.addId = ''
        },

        startUpload(remarkInfo = '') {
            console.log('开始上传')
            if (this.selectedTag.length === 0) {
                this.$message.warning('请选择需要标注的内容标签')
                return
            }
            // 标签处理
            const selectedTagIds = this.selectedTag
                .map((tag) => tag.id)
                .join(',')
            const selectedTagNames = this.selectedTag
                .map((tag) => tag.name)
                .join(',')
            console.log('选中的标签IDs:', selectedTagIds)
            console.log('选中的标签名称:', selectedTagNames)
            if (this.fileList.length === 0) {
                this.$message.warning('请上传图片')
                return
            }
            // 初始化 selectedImages
            this.selectedImages = {}
            // 显示加载状态
            const loading = this.$loading({
                lock: true,
                text: '正在上传和识别图片...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)',
            })
            // 保存原始文件列表用于显示结果
            const originalFileList = [...this.fileList]
            // 清空上传预览区域
            this.fileList = []

            // 创建 FormData 对象
            const formData = new FormData()
            // 添加文件
            originalFileList.forEach((file) => {
                formData.append('files', file.raw) // 使用 raw 字段获取原始文件对象
            })
            // formData.append('param',  selectedTagNames);
            // formData.append('id', this.addId);

            // 修改参数处理方式，与之前的params 保持一致
            const params = {
                param: selectedTagNames,
                remark: remarkInfo || this.remarkInfo,
                id: this.addId,
            }
            formData.append('params', JSON.stringify(params))

            //调用上传的接口，传递文件列表和标签IDs，name
            addImageInfoAPI(formData)
                .then((res) => {
                    loading.close()
                    if (
                        res.code === 200 &&
                        res.data &&
                        Array.isArray(res.data)
                    ) {
                        // 处理成功响应 - 获取全部记录
                        const records = res.data
                        this.addId = records[0]?.operaId || ''
                        console.log('this.addId:', this.addId)

                        // 按下标分组存储数据
                        this.groupedImageResults = records.map(
                            (record, index) => ({
                                index: index, // 下标
                                operaName: record.operaName,
                                images: record.fileVoList.map((item) => ({
                                    url: item.bjUrl || '未找到图片地址',
                                    originUrl: item.imageUrl,
                                    id: item.imageId || item.id,
                                    name: item.originalName,
                                    contentImage: item.contentImage,
                                    fileSize: item.fileSize,
                                    operId: record.id,
                                })),
                                totalCount:
                                    record.imageNum || originalFileList.length,
                                recognizedCount: record.bzNum || 0,
                                unrecognizedCount: record.wbzNum || 0,
                                isSure: record.isSure,
                                operId: record.operaId,
                                id: record.id,
                            }),
                        )
                        // 初始化选中状态 - 根据 isActive 字段
                        this.initializeSelectedImages(records)

                        // this.isSure = record.isSure;

                        // 刷新左侧标签文本并选中对应标签
                        if (records.length > 0) {
                            this.refreshSidebarLabel(
                                records[0].operaName,
                                records[0].id,
                            )
                        }

                        this.showImageResults = true
                        this.showNewAnnotation = false
                        this.showNewAnnotationAdd = true
                        this.$message.success('上传和识别完成')
                    } else {
                        this.$message.error('上传失败')
                    }
                })
                .catch((error) => {
                    loading.close()
                    console.error('上传异常:', error)
                    this.$message.error('上传过程中出现错误')
                })
        },

        refreshSidebarLabel(operaName, recordId) {
            this.getImageListAPI()
            setTimeout(() => {
                const index = this.labelList.findIndex(
                    (item) => item.id === recordId,
                )
                if (index !== -1) {
                    this.labelList[index].name = operaName
                }
                // 选中对应的标签
                this.selectedItem = recordId
            }, 500) // 延迟确保数据加载完成
        },

        selectItem(item) {
            this.selectedItem = item.id
            // 这里可以添加加载历史记录数据的逻辑
            this.loadRecordData(item.id)
        },

        loadRecordData(recordId) {
            // 模拟加载历史记录数据
            const record = this.labelList.find((r) => r.id === recordId)
            if (record) {
                this.showNewAnnotation = false
                this.showNewAnnotationAdd = true
                // 这里可以添加实际的数据加载逻辑
                this.fileList = [] // 清空文件列表
                this.selectedTag = [] // 清空标签选择
                this.showImageResults = true // 显示识别结果
                this.selectedImages = {} // 初始化选中状态
                // 生成数据
                this.generateTestData(recordId)
            }
        },

        toggleTag(tag) {
            const index = this.selectedTag.findIndex(
                (item) => item.id === tag.id,
            )
            if (index === -1) {
                this.selectedTag.push(tag)
            } else {
                this.selectedTag.splice(index, 1)
            }

            if (!this.showAllTags) {
                this.updateVisibleTagsInCollapsedState()
            }
        },

        updateVisibleTagsInCollapsedState() {
            const selectedTags = this.selectedTag || []
            const defaultTags = this.tags.slice(0, 3)

            if (selectedTags.length > 0) {
                if (selectedTags.length >= 3) {
                    this.visibleTags = selectedTags.slice(0, 3)
                } else {
                    const tags = defaultTags
                        .filter(
                            (tag) =>
                                !selectedTags.some(
                                    (selected) => selected.id === tag.id,
                                ),
                        )
                        .slice(0, 3 - selectedTags.length)
                    this.visibleTags = [...selectedTags, ...tags]
                }
            } else {
                this.visibleTags = defaultTags
            }
        },

        toggleAllTags() {
            this.showAllTags = !this.showAllTags
            if (this.showAllTags) {
                this.visibleTags = this.tags
            } else {
                const selectedTags = this.selectedTag || []
                const defaultTags = this.tags.slice(0, 3)

                if (selectedTags.length > 0) {
                    if (selectedTags.length <= 3) {
                        const allTags = [...selectedTags, ...defaultTags]
                        const uniqueTags = allTags.filter(
                            (tag, index, self) =>
                                index ===
                                self.findIndex((t) => t.id === tag.id),
                        )
                        this.visibleTags = uniqueTags.slice(0, 3)
                    } else {
                        this.visibleTags = selectedTags
                    }
                } else {
                    this.visibleTags = defaultTags
                }
            }
        },

        handleFileChange(file, fileList) {
            if (file.raw) {
                const reader = new FileReader()
                reader.onload = (e) => {
                    file.url = e.target.result
                }
                reader.readAsDataURL(file.raw)
            }
            // 延迟设置fileList，确保file.url已正确设置
            setTimeout(() => {
                this.fileList = fileList
            }, 100)
        },

        removeImage(index) {
            this.fileList.splice(index, 1)
            this.$message.success('已删除文件')
        },

        // 处理手图标点击事件
        // 处理手图标点击事件
        handleHandClick(result, index) {
            // 判断是分组模式还是普通模式
            if (
                typeof result === 'object' &&
                result.hasOwnProperty('groupIndex') &&
                result.hasOwnProperty('imageIndex')
            ) {
                // 分组模式
                const { groupIndex, imageIndex, key } = result

                console.log('点击了分组图片:', groupIndex, imageIndex)

                // 检查是否已有其他未确认分组的选中项
                const hasOtherUnconfirmedGroupSelection = Object.keys(
                    this.selectedImages,
                ).some((k) => {
                    if (k.includes('-')) {
                        const [otherGroupIndex, otherImageIndex] = k
                            .split('-')
                            .map(Number)
                        // 获取其他分组的信息
                        const otherGroup =
                            this.groupedImageResults[otherGroupIndex]
                        // 只有当其他分组未确认且与当前分组不同时，才限制选择
                        if (
                            otherGroup &&
                            otherGroup.isSure !== '1' &&
                            otherGroupIndex !== groupIndex &&
                            this.selectedImages[k]
                        ) {
                            return true
                        }
                    }
                    return false
                })

                // 如果已有其他未确认分组的选中项，提示用户
                if (hasOtherUnconfirmedGroupSelection) {
                    this.$message.warning(
                        '当前版本不支持跨组选择，请先取消其他组的选择',
                    )
                    return
                }

                if (this.selectedImages[key]) {
                    console.log('取消选中分组图片:', groupIndex, imageIndex)
                    this.$set(this.selectedImages, key, false)
                } else {
                    console.log('选中分组图片:', groupIndex, imageIndex)
                    this.$set(this.selectedImages, key, true)
                }
            } else if (
                typeof result === 'object' &&
                result.hasOwnProperty('index') &&
                result.isSingle
            ) {
                // 普通模式
                const { index } = result
                console.log('点击了图片:', index)

                if (this.selectedImages[index]) {
                    console.log('取消选中:', index)
                    this.$set(this.selectedImages, index, false)
                } else {
                    console.log('选中:', index)
                    this.$set(this.selectedImages, index, true)
                }
            } else {
                // 兼容旧的处理方式
                console.log(result)
                console.log('点击了图片:', index)

                if (this.selectedImages[index]) {
                    console.log('取消选中:', index)
                    this.$set(this.selectedImages, index, false)
                } else {
                    console.log('选中:', index)
                    this.$set(this.selectedImages, index, true)
                }
            }
        },

        async generateTestData(recordId) {
            try {
                const res = await getImageListDetailsAPI({
                    id: recordId,
                    operaType: 1,
                })
                if (res.code === 200 && res.data && Array.isArray(res.data)) {
                    this.addId = res.data[0].operaId
                    console.log('addId:', this.addId)
                    // 按下标分组存储数据
                    this.groupedImageResults = res.data.map(
                        (record, index) => ({
                            index: index, // 下标
                            operaName: record.operaName,
                            images: record.fileVoList.map((item) => ({
                                url: item.bjUrl,
                                originUrl: item.imageUrl,
                                id: item.imageId || item.id,
                                name: item.originalName,
                                contentImage: item.contentImage,
                                fileSize: item.fileSize,
                                operId: record.id,
                            })),
                            totalCount: record.imageNum || 0,
                            recognizedCount: record.bzNum || 0,
                            unrecognizedCount: record.wbzNum || 0,
                            isSure: record.isSure,
                            operId: record.operaId,
                            id: record.id,
                            remark: record.remark,
                        }),
                    )

                    // 初始化选中状态 - 根据 isActive 字段
                    this.initializeSelectedImages(res.data)
                    // 设置第一条记录的状态用于界面显示
                    this.isSure = res.data[0]?.isSure || ''
                }
            } catch (error) {
                console.error('获取列表异常:', error)
            }
        },

        // 获取选中图片的ID和operId
        getSelectedImageInfo() {
            const selectedImageInfo = []

            // 遍历选中的图片
            for (let key in this.selectedImages) {
                if (this.selectedImages[key]) {
                    // 判断是分组模式还是普通模式
                    if (key.includes('-')) {
                        // 分组模式: key格式为 "groupIndex-imageIndex"
                        const [groupIndex, imageIndex] = key
                            .split('-')
                            .map(Number)
                        const group = this.groupedImageResults[groupIndex]
                        if (group && group.images[imageIndex]) {
                            selectedImageInfo.push({
                                imageId: group.images[imageIndex].id,
                                operId: group.operId,
                                imageName: group.images[imageIndex].name,
                            })
                        }
                    } else {
                        // 普通模式: key是数字索引
                        const index = parseInt(key)
                        if (this.imageResults[index]) {
                            selectedImageInfo.push({
                                imageId: this.imageResults[index].id,
                                operId: this.imageResults[index].operId,
                                imageName: this.imageResults[index].name,
                            })
                        }
                    }
                }
            }

            return selectedImageInfo
        },

        confirmResults(id) {
            console.log('确认结果', id)
            const selectedInfo = this.getSelectedImageInfo()

            if (selectedInfo.length === 0) {
                // this.$message.warning('请至少选择一张图片');
                // return;
                this.handleConfirm(this.addId, null, id)
            } else {
                // 获取图片ID数组
                const imageIds = selectedInfo.map((item) => item.imageId)

                // 获取operId（假设所有选中图片属于同一组，使用第一个）
                const operId = selectedInfo[0].operId

                console.log('选中的图片IDs:', imageIds)
                console.log('操作ID:', operId)

                // 调用确认接口
                this.handleConfirm(operId, imageIds, id)
            }
        },

        async handleConfirm(operId, imageIds, id) {
            try {
                // 调用后端接口
                const res = await updateImageSureAPI({
                    operaId: operId,
                    imageId: imageIds,
                    id: id,
                })
                if (res.code === 200) {
                    this.$message.success('确认成功')
                    // 使用 nextTick 确保 DOM 更新后再延迟
                    this.$nextTick(() => {
                        setTimeout(async () => {
                            await this.generateTestData(this.addId)
                        }, 8000) // 延迟0.8秒
                    })
                } else {
                    this.$message.error('确认失败')
                }
            } catch (error) {
                console.error('确认异常:', error)
                this.$message.error('确认过程中出现错误')
            }
        },

        toggleSidebar() {
            this.isSidebarVisible = !this.isSidebarVisible
        },

        initializeSelectedImages(records) {
            // 清空当前选中状态
            this.selectedImages = {}
            // 遍历所有分组和图片
            records.forEach((record, groupIndex) => {
                if (record.fileVoList && Array.isArray(record.fileVoList)) {
                    record.fileVoList.forEach((fileItem, imageIndex) => {
                        // 如果 isActive 为 "1"，则默认选中
                        if (fileItem.isActive === '1') {
                            const key = `${groupIndex}-${imageIndex}`
                            this.$set(this.selectedImages, key, true)
                        }
                    })
                }
            })
        },

        updateImageAnnotation() {
            this.generateTestData(this.selectedItem)
        },
    },
}
</script>

<style scoped>
.image-captioning-container {
    display: flex;
    overflow: hidden;
    height: calc(100vh - 84px);
    width: 100%;
    background: url('../../../assets/images/imageCaptioning/login-bg-background.png')
        no-repeat center center;
    background-size: 100% 100%;
}

.main-content {
    flex: 1;
    padding: 40px;
    overflow-y: auto;
}

.add-content {
    height: 55%;
    width: 60%;
    margin-top: 15%;
    margin-left: 22%;
}

.welcome-message {
    text-align: center;
    font-size: 20px;
    margin-bottom: 50px;
    font-weight: 600;
    color: #334249;
    font-style: normal;
    text-transform: none;
}
</style>
