<template>
  <div class="resout-container AI-Design-container">
    <div class="header">
      <van-nav-bar title="历史生图" left-arrow @click-left="returnPage" @click-right="toHome">
        <template #right>
          <van-icon name="wap-home-o" color="#333" size="26" />
        </template>
      </van-nav-bar>
    </div>
    <div class="container">
      <van-button class="selecBtn" size="small" @click="selectImage"  v-show="Object.keys(groupedImages).length > 0">
        {{ isLongPressing ? "取消" : "选择" }}
      </van-button>

      <!-- 图片列表 -->
      <div class="image-groups" v-if="Object.keys(groupedImages).length > 0">
        <div v-for="(group, date) in groupedImages" :key="date" class="image-group">
          <div class="group-header">{{ formatDate(date) }}</div>
          <div class="image-grid">
            <div v-for="image in group" :key="image.F_ID" class="image-item" @click="() => {
              if (isLongPressing && image.StateCode == 2) {
                toggleSelect(getImageIndex(image));
              } else {
                $router.push({
                  path: '/AIDesign/result',
                  query: {
                    F_id: image.F_ID,
                    fromPage: 'history',
                    wallType,
                    projectid: image.ProjectID || null
                  }
                });
              }
            }">
              <van-image lazy-load v-if="image.StateCode == 2" :src="image.BaseUrl + image.F_ResultSmallFilePath"
                class="house-image" alt="AI设计图" fit="cover" radius="8px" />
              <div v-else class="loading-state">
                <img v-if="image.StateCode != 3 && image.StateCode != 4" src="@/assets/AIDesign/loding.gif"
                  style="width: 50px;">
                <p class="loading-text" v-if="image.StateCode == 3 || image.StateCode == 4">生成失败</p>
                <p class="loading-text" v-else>图片正在生成中</p>
              </div>
              <div class="select-indicator" v-if="isLongPressing && image.StateCode == 2">
                <div class="select-indicator-circle">
                  <span v-if="selectedImages.includes(getImageIndex(image))" class="icon-select selected"></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 加载状态 -->
      <div v-if="isLoadingMore" class="loading-more">
        <van-loading size="20px" />
        <span class="loading-text">加载更多...</span>
      </div>

      <van-empty v-else-if="!isLoding && Object.keys(groupedImages).length === 0">
        <p>暂无数据</p>
      </van-empty>

      <!-- 已加载全部数据提示 -->
      <div v-if="!hasMore && !isLoding" class="load-all">
        已加载全部数据
      </div>

      <!-- 删除按钮 -->
      <button class="delete-button" @click="deleteImage" v-if="selectedImages.length > 0">
        删除图片({{ selectedImages.length }})
      </button>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { GetDesignList, DeleteEntity, insideGetDesignList, insideDeleteEntity } from "@/api/indexAI";
import { Lazyload, Loading } from 'vant';
import { toLBHome, getWecomType } from '@/utils/index';

Vue.use(Lazyload);
Vue.use(Loading);

interface ImageItem {
  F_ID: string;
  BaseUrl: string;
  F_ResultFilePath: string;
  CreateDate: string;
  StateCode: number;
}

@Component
export default class Resout extends Vue {
  private images: ImageItem[] = [];
  private selectedImages: number[] = [];
  private pressTimer: number | null = null;
  private isLongPressing = false;
  private isLoding = true;
  private wallType = '';
  // 处理内外墙api
  private GetDesignListToApi = {
    outside: GetDesignList,
    inside: insideGetDesignList
  };
  private DeleteEntityToApi = {
    outside: DeleteEntity,
    inside: insideDeleteEntity
  };
  // 分页参数
  private pagination = {
    rows: 10, // 每页加载10条，适合移动端
    page: 1,  // 当前页码
    sidx: "CreateDate",
    sord: "desc",
    records: 0, // 总记录数
    total: 0    // 总页数
  };

  // 滚动加载相关状态
  private isLoadingMore = false; // 是否正在加载更多
  private hasMore = true; // 是否还有更多数据
  private isProcessing = false; // 防止重复加载的锁
  private designPageApi = {
    outside: '/AIDesign/design',
    inside: '/AIDesign/insideDesign'
  };
  activated() {
    this.wallType = this.$route.query.wallType || 'outside';
    // 重置状态
    this.images = [];
    this.pagination.page = 1;
    this.hasMore = true;
    this.isLongPressing = false;
    this.getDataInfioList();
    // 监听滚动事件
    window.addEventListener('scroll', this.handleScroll);
  }

  deactivated() {
    clearTimeout(this.pressTimer);
    this.pressTimer = null;
    // 移除滚动监听
    window.removeEventListener('scroll', this.handleScroll);
  }

  // 处理滚动事件
  private handleScroll() {
    // 防止重复触发加载
    if (this.isProcessing || !this.hasMore || this.isLoadingMore) return;

    // 获取滚动相关参数
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    const clientHeight = document.documentElement.clientHeight || window.innerHeight;
    const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

    // 当滚动到距离底部200px时触发加载
    if (scrollTop + clientHeight >= scrollHeight - 200) {
      this.loadMoreData();
    }
  }

  // 加载更多数据
  private loadMoreData() {
    if (this.pagination.page >= this.pagination.total) {
      this.hasMore = false;
      return;
    }

    this.isProcessing = true;
    this.isLoadingMore = true;
    this.pagination.page += 1;

    // 延迟执行，优化用户体验
    setTimeout(() => {
      this.getDataInfioList(true);
    }, 300);
  }

  // 按日期分组逻辑
  get groupedImages(): Record<string, ImageItem[]> {
    if (!this.images || this.images.length === 0) return {};

    const groups: Record<string, ImageItem[]> = {};
    this.images.forEach(image => {
      const date = image.CreateDate.split('T')[0];
      if (!groups[date]) {
        groups[date] = [];
      }
      groups[date].push(image);
    });

    // 按日期倒序排列
    const sortedGroups: Record<string, ImageItem[]> = {};
    Object.keys(groups)
      .sort((a, b) => new Date(b).getTime() - new Date(a).getTime())
      .forEach(key => {
        sortedGroups[key] = groups[key];
      });
    return sortedGroups;
  }

  // 获取数据列表 - 支持加载更多
  getDataInfioList(isLoadMore = false): void {
    const userWecomType = sessionStorage.getItem("userWecomType") ? Number(sessionStorage.getItem("userWecomType")) : 5;
    const queryJson = {
      // WXuserid: userInfo.loginName
      wecomType:userWecomType
    };

    const formData = new FormData();
    formData.append("pagination", JSON.stringify(this.pagination));
    formData.append("queryJson", JSON.stringify(queryJson));
    this.GetDesignListToApi[this.wallType](formData).then((res) => {
      if (res.StatusCode == 200) {
        // 加载更多时合并数据，否则替换数据
        this.images = isLoadMore ? [...this.images, ...res.Data.rows] : res.Data.rows;
        // 更新分页信息
        this.pagination.records = res.Data.records;
        this.pagination.total = res.Data.total;

        // 判断是否还有更多数据
        this.hasMore = this.pagination.page < this.pagination.total;
      } else {
        this.$toast.fail(res.Info);
      }

      // 重置加载状态
      this.isLoding = false;
      this.isLoadingMore = false;
      this.isProcessing = false;
    }).catch(() => {
      // 错误处理
      this.isLoding = false;
      this.isLoadingMore = false;
      this.isProcessing = false;
      this.$toast.fail('加载失败，请重试');
    });
  }

  getImageIndex(image: ImageItem): number {
    return this.images.findIndex((item: ImageItem) => item.F_ID === image.F_ID);
  }

  formatDate(dateString: string): string {
    const date = new Date(dateString);
    const today = new Date();
    const yesterday = new Date(today);
    yesterday.setDate(yesterday.getDate() - 1);

    if (date.toDateString() === today.toDateString()) {
      return '今天';
    }

    if (date.toDateString() === yesterday.toDateString()) {
      return '昨天';
    }

    if (date.getFullYear() === today.getFullYear()) {
      return `${date.getMonth() + 1}月${date.getDate()}日`;
    }

    return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
  }

  selectImage() {
    this.selectedImages = [];
    this.isLongPressing = !this.isLongPressing;
  }

  handleTouchStart(index: number, event: Event): void {
    event.preventDefault();
    this.pressTimer = window.setTimeout(() => {
      this.isLongPressing = true;
      this.toggleSelect(index);
    }, 500);
  }

  handleTouchEnd(index: number): void {
    if (this.pressTimer) {
      clearTimeout(this.pressTimer);
      this.pressTimer = null;
    }

    if (!this.isLongPressing) {
      this.toggleSelect(index);
    } else {
      const F_ID = this.images[index].F_ID;
      this.$router.push({
        path: '/AIDesign/result',
        query: {
          F_id: F_ID,
          wallType: this.wallType,
          projectid: this.images[index].ProjectID || null
        }
      });
    }
    this.isLongPressing = false;
  }

  toggleSelect(index: number): void {
    const idx = this.selectedImages.indexOf(index);
    if (idx === -1) {
      this.selectedImages.push(index);
    } else {
      this.selectedImages.splice(idx, 1);
    }
  }

  saveImage(): void {
    this.selectedImages.forEach((index) => {
      if (index < 0 || index >= this.images.length) return;
      const image = this.images[index];
      if (!image) return;
      const imageUrl = image.BaseUrl + image.F_ResultFilePath;
      this.downloadImage(imageUrl, `ai-design-${image.F_ID}.png`);
    });
  }

  returnPage() {
    this.$router.push({ path: this.designPageApi[this.wallType] });
  }
  toHome() {
    toLBHome()
  }
  downloadImage(imageUrl: string, filename: string): void {
    fetch(imageUrl).then(response => response.blob()).then(blob => {
      const blobUrl = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = blobUrl;
      link.download = `ai-design-${new Date().getTime()}.png`;
      link.style.display = 'none';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      URL.revokeObjectURL(blobUrl);
    }).catch(error => {
      console.error('图片下载失败:', error);
      this.$toast.fail('图片下载失败');
    });
  }

  deleteImage(): void {
    const F_ids = this.selectedImages.map(index => this.images[index].F_ID);
    const formData = new FormData();
    formData.append("F_ids", JSON.stringify(F_ids));

    this.DeleteEntityToApi[this.wallType](formData).then((res) => {
      if (res.StatusCode == 200) {
        this.$toast.success("删除成功");
        // 重新加载第一页数据
        this.pagination.page = 1;
        this.getDataInfioList();
        this.selectedImages = [];
      } else {
        this.$toast.fail(res.Info);
      }
    });
  }

  beforeDestroy() {
    if (this.pressTimer) {
      clearTimeout(this.pressTimer);
    }
    window.removeEventListener('scroll', this.handleScroll);
  }
}
</script>

<style scoped lang="scss">
/* 原有样式保持不变，增加以下样式 */
// 加载更多样式
.loading-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
  color: #666;

  .loading-text {
    margin-left: 8px;
    font-size: 14px;
  }
}

// 加载完成提示
.load-all {
  text-align: center;
  padding: 15px 0;
  color: #999;
  font-size: 14px;
}

/* 其他原有样式... */
.resout-container {
  width: 100%;
  background-color: #f8f9fa;
  min-height: 100vh;
  flex-direction: column;
}

.container {
  position: relative;
  padding: 20px;

  .selecBtn {
    font-size: 14px;
    width: 50px;
    position: absolute;
    right: 20px;
    top: 56px;
    border-radius: 8px;
    background-color: #2484F2;
    color: #fff;
  }
}

.image-groups {
  flex: 1;
  padding-top:15px;
}

.image-group {
  margin-bottom: 24px;
}

.group-header {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 12px;
  padding-left: 8px;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.image-item {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0eded;
}

.house-image {
  height: 150px;
  width: 100%;
}

.loading-state {
  width: 100%;
  height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #666;
  text-align: center;
  background-image: url('../../assets/AIDesign/bg.png');
  background-size: 100% 100%;
}

.loading-text {
  margin-top: 10px;
  font-size: 14px;
  color: white;
}

.select-indicator {
  position: absolute;
  top: 10px;
  right: 10px;
}

.select-indicator-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #B2C4DB;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-select {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-select.selected {
  background-color: #FFFFFF;
}

.delete-button {
  position: fixed;
  bottom: 20px;
  left: 5%;
  width: 90%;
  padding: 12px 16px;
  background-color: #E96337;
  border: none;
  border-radius: 12px;
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  font-size: 16px;
  font-weight: normal;
}

.delete-button:active {
  transform: scale(0.98);
}

.header {
  border-bottom: 1px solid #f8f8f8;

  .van-nav-bar__title {
    font-size: 20px;
    color: #333;
  }

  .van-icon {
    font-size: 20px;
    color: #333 !important;
  }
}
</style>