<template>
  <div class="image-captioning-container">
    <!-- 左侧导航栏 -->
    <Sidebar
      :is-sidebar-visible="isSidebarVisible"
      :label-list="labelList"
      :selected-item="selectedItem"
      @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>

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

    <!-- 主内容区域-历史 -->
    <div class="main-content" v-if="showNewAnnotationAdd">
      <HistoryView
        :image-results="imageResults"
        :selected-images="selectedImages"
        :file-list="fileList"
        @hand-click="handleHandClick"
        @confirm-results="confirmResults"
        @file-change="handleFileChange"
        @remove-image="removeImage"
        @start-upload="startUpload"
      />
    </div>
  </div>
</template>

<script>
import {
  getImageListAPI,
  getImageListDetailsAPI,
  addImageEvaluateAPI,
  updateImageSureAPI
} from "@/api/imageCaptioning/imageEvaluate";

import Sidebar from "../image-captioning/components/Sidebar";
import FileUploader from "../image-captioning/components/FileUploaderUn";
import HistoryView from "../image-captioning/components/HistoryViewUn";
export default {
  name: "imageCaptioning",
  components: {
    Sidebar,
    FileUploader,
    HistoryView
  },
  data() {
    return {
      showNewAnnotation: true, // 控制新建标注界面的显示状态
      showNewAnnotationAdd: false, // 控制历史界面的显示状态

      // 导航栏数据
      labelList: [],
      selectedItem: null,

      // 文件上传相关
      fileList: [],
      showImageResults: false,

      // 图片识别结果
      imageResults: [],
      selectedImages: {}, // 用于跟踪选中的图片
      isSidebarVisible: true, // 控制左侧导航栏显示/隐藏
      addId: '',
    }
  },

  created() {
    //查询左侧历史记录
    this.getImageListAPI()
  },

  methods: {
    async getImageListAPI() {
      try {
        const res = await getImageListAPI({operaType: 2})
        // 判断返回码和数据
        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.showImageResults = false;
      this.imageResults = [];
      this.selectedImages = {};
      this.showNewAnnotation = true;
      this.showNewAnnotationAdd = false;
      this.addId ='';
    },

    startUpload() {
      console.log('开始上传')

      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("id", this.addId)
      addImageEvaluateAPI(formData)
        .then(res => {
          loading.close();
          if (res.code === 200 && res.data && Array.isArray(res.data)) {
            // 处理成功响应
            this.addId = res.data[0].operaId;
            let allImageResults = [];
            res.data.forEach(record => {
              this.addId = record.operaId;
              const fileResults = record.fileVoList.map((item, index) => ({
                url: item.bjUrl || item.url,
                id: item.imageId || index,
                name: item.originalName,
                contentImage: item.contentImage,
                fileSize: item.fileSize,
                operId: record.id,

                overallScore: item.overallScore,
                clarity: item.clarity,
                cleanliness: item.cleanliness,
                compressMarks: item.compressMarks,
                impression: item.impression,
                balance: item.balance,
                detail: item.detail,
                dictValue:item.dictValue
              }));
              allImageResults = allImageResults.concat(fileResults);
            });
            this.imageResults = allImageResults;
            // 刷新左侧标签文本并选中对应标签
            if (res.data.length > 0) {
              this.refreshSidebarLabel(res.data[0].operaName, res.data[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.showImageResults = true; // 显示识别结果
        this.selectedImages = {}; // 初始化选中状态
        // 生成数据
        this.generateTestData(recordId);
      }
    },

    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) {
      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: 2})
        // 判断返回码和数据
        if (res.code === 200 && res.data && Array.isArray(res.data)) {
          this.addId = res.data[0].operaId;

          let allImageResults = [];
          res.data.forEach(record => {
            const fileResults = record.fileVoList.map((item, index) => ({
              url: item.bjUrl || item.url,
              id: item.imageId || index,
              name: item.originalName,
              contentImage: item.contentImage,
              fileSize: item.fileSize,
              operId: record.id,

              overallScore: item.overallScore,
              clarity: item.clarity,
              cleanliness: item.cleanliness,
              compressMarks: item.compressMarks,
              impression: item.impression,
              balance: item.balance,
              detail: item.detail,
              dictValue:item.dictValue
            }));
            allImageResults = allImageResults.concat(fileResults);
          });
          this.imageResults = allImageResults;
        }
      } catch (error) {
        console.error('获取列表异常:', error)
      }
    },

    confirmResults(){
      const selectedItems = [];
      for (let index in this.selectedImages) {
        const idx = parseInt(index);
        if (this.selectedImages[idx]) {
          selectedItems.push(this.imageResults[idx]); // 根据 index 取出 imageResults 中对应图片
        }
      }
      if (selectedItems.length === 0) {
        this.$message.warning('请至少选择一张图片');
        return;
      }
      // 提取 operId 和 imageId
      const imageIds = selectedItems.map(item => item.id);
      const operId = selectedItems[0].operId; // 所有图片的 operId 应该一致
      // 调用确认接口
      this.handleConfirm(operId,imageIds);
    },

    async handleConfirm(operId,imageIds) {
      try {
        // 调用后端接口
        const res = await updateImageSureAPI({
          id: operId,
          imageId:imageIds
        });
        if (res.code === 200) {
          this.$message.success('确认成功');
          // 可以在这里处理成功后的逻辑
          await this.generateTestData(operId);
        } else {
          this.$message.error('确认失败');
        }
      } catch (error) {
        console.error('确认异常:', error);
        this.$message.error('确认过程中出现错误');
      }
    },

    toggleSidebar() {
      this.isSidebarVisible = !this.isSidebarVisible;
    }
  },
}
</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>
