<template>
  <div class="task-production-detail">
    <div
      class="task-production-detail-header flex items-center justify-between"
      :class="[isMobile ? 'p-2 pt-[safe-area-inset-top] pt-[44px]' : 'p-4']"
    >
      <p
        class="text-white font-bold one-ell"
        :class="[isMobile ? 'mr-1 text-sm' : 'text-2xl ml-4']"
      >
        作品集
      </p>
      <div
        class="flex items-center gap-2 bg-[#b3d5ff] rounded-lg flex-1"
        :class="[isMobile ? 'w-full' : 'max-w-[300px]']"
      >
        <el-input
          v-model="searchForm.title"
          placeholder="请输入作品标题搜索对应作品"
          clearable
          @input="debouncedSearch"
        />
        <el-icon
          @click="search"
          class="text-[#0074FE] font-bold"
          :class="[isMobile ? 'mr-2 text-lg' : 'mr-4 ml-2 text-2xl']"
          ><Search
        /></el-icon>
      </div>
    </div>

    <div
      ref="scrollContainer"
      class="card-scroll-container"
      :class="[isMobile ? '' : 'px-4']"
      v-show="list && list.length"
    >
      <Waterfall
        :key="waterfallKey"
        :list="list"
        :type="currentTaskType"
        imgSelector="fileUrl"
        show-loading
        lazyload
        :breakpoints="waterfallBreakpoints"
        animation-effect="fadeInUp"
      >
        <template #default="{ item, url }">
          <div
            class="border rounded-md box-shadow-md rounded-xl overflow-hidden transition-all duration-300 card-item"
            style="box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08)"
            @click="handleCardClick(item)"
          >
            <img
              :src="url"
              class="w-full object-cover"
              loading="lazy"
              :style="
                item.width && item.height
                  ? {
                      height: calculateHeight(item.width, item.height) + 'px',
                    }
                  : {}
              "
            />
            <div
              class="flex gap-2 items-center justify-start flex-wrap"
              :class="[isMobile ? 'p-2' : 'p-4']"
            >
              <el-tag
                v-for="tag in item.tags.split(',')"
                :key="tag"
                size="small"
                plain
                round
                type="info"
                >{{ tag }}</el-tag
              >
            </div>
          </div>
        </template>
      </Waterfall>
      <div class="loading-tip">
        <span v-if="isLoading">加载中...</span>
        <span v-else-if="!hasMore">没有更多了</span>
      </div>
    </div>
    <el-empty
      v-show="!list || !list.length"
      style="height: calc(100vh - 80px)"
      description="没有更多了"
    />
  </div>

  <!-- PC端抽屉 -->
  <el-drawer
    v-if="!isMobile"
    v-model="visible"
    :size="500"
    @close="handleClose"
    fullscreen
  >
    <div v-if="currentItem" class="detail-content">
      <img
        v-if="[MediaType.IMAGE, MediaType.IMAGE_TEXT].includes(currentTaskType)"
        :src="currentItem.fileUrl"
        @error="handleImageError"
      />
      <video
        v-if="[MediaType.VIDEO].includes(currentTaskType)"
        :src="currentItem.fileUrl"
        controls
      />
      <p
        v-if="[MediaType.IMAGE_TEXT, MediaType.TEXT].includes(currentTaskType)"
        class="text-md mt-4 align-left"
      >
        <el-button
          type="text"
          @click.stop="handleCopy(currentItem.content)"
          class="!p-0"
          size="small"
        >
          复制文案
        </el-button>
        {{ currentItem.content }}
      </p>
    </div>
    <template #footer>
      <el-button type="default" plain @click="handleClose">关闭</el-button>
      <!-- 全环境通用保存按钮 -->
      <el-button type="primary" @click="handleSave" :loading="saving">
        保存
      </el-button>
    </template>
  </el-drawer>

  <!-- 移动端弹窗 -->
  <!-- <el-dialog
    v-if="isMobile"
    v-model="visible"
    :size="500"
    @close="handleClose"
    fullscreen
  > -->
  <div
    v-if="isMobile && visible"
    class="fixed top-0 left-0 w-full h-full bg-black bg-black/75 z-10"
    @click="handleClose"
  >
    <img
      @click.stop
      :src="currentItem.fileUrl"
      class="w-full h-full object-contain rounded-md mx-auto"
    />
    <div
      @click.stop
      class="fixed bottom-3 left-0 w-full p-4 flex justify-end items-center gap-2 z-11 "
    >
      <el-button type="info" plain :icon="Close" @click="handleClose"
        >关闭</el-button
      >
      <!-- circle -->
      <!-- 全环境通用保存按钮 -->
      <el-button
        type="primary"
        @click="handleSave"
        :icon="Download"
        color="#0074FE"
      >
        保存
      </el-button>
    </div>
    <!-- </el-dialog> -->
  </div>

  <el-button
    v-show="showScrollToTop"
    type="primary"
    @click="scrollToTop"
    class="fixed bottom-4 right-4 z-10 transition-all duration-300"
    :icon="ArrowUp"
    circle
  ></el-button>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, nextTick, computed } from "vue";
import { useRoute } from "vue-router";
import { debounce, throttle } from "lodash-es";
import { showLoading, hiddenLoading } from "@/utils/loading";
import { showMsg } from "@/utils/showMsg";
import { Search, ArrowUp, Close, Download } from "@element-plus/icons-vue";
import apis from "@/api/index";
import {
  DictOption,
  TaskInfo,
  WaterfallItem,
  WaterfallProps,
} from "@/typings/work";
import defaultImg from "@/assets/images/img-load-err.png";
import fallbackCopyToClipboard from "@/utils/copyText";
import { Waterfall } from "vue-waterfall-plugin-next";
import "vue-waterfall-plugin-next/dist/style.css";
// 引入通用保存工具
import { saveFile, FileType } from "@/utils/saveFile";

enum MediaType {
  IMAGE = 1,
  IMAGE_TEXT = 2,
  VIDEO = 3,
  TEXT = 4,
}

const waterfallKey = ref(0);
const waterfallBreakpoints = {
  600: { rowPerView: 2 },
  320: { rowPerView: 2 },
};

const searchForm = ref({
  title: "",
});

const search = async () => {
  currentPage.value = 1;
  hasMore.value = true;
  scrollContainer.value?.scrollTo({ top: 0 });
  await getTaskProductionListLimit();
};

const debouncedSearch = debounce(search, 300);
const { WOEKS_LIST_TWO } = apis;
const route = useRoute();
const taskId = route.params.taskId as string;

const taskTypes = ref<DictOption[]>(
  JSON.parse(sessionStorage.getItem("task_type") || "[]")
);

const taskInfo = ref<TaskInfo>(
  JSON.parse(sessionStorage.getItem("currentTask") || "{}")
);

const currentTaskType = computed(() => Number(taskInfo.value.type || 1));
const list = ref<WaterfallItem[]>([]);
const visible = ref(false);
const currentItem = ref<WaterfallItem | null>(null);
const currentPage = ref(1);
const pageSize = computed(() => (isMobile.value ? 20 : 50));
const isLoading = ref(false);
const hasMore = ref(true);
const cardDom = computed(
  () => document.getElementsByClassName("waterfall-item")[0]
);
const cardDomWidth = computed(() => cardDom.value?.offsetWidth ?? 200);

const calculateHeight = (width: number, height: number) => {
  return (cardDomWidth.value * height) / width || 356;
};

const scrollContainer = ref<HTMLDivElement | null>(null);
const showScrollToTop = ref(false);
const saving = ref(false);
const isFirstLoad = ref(true);

const scrollToTop = () => {
  scrollContainer.value?.scrollTo({
    top: 0,
    behavior: "smooth",
  });
};

const refresh = () => {
  currentPage.value = 1;
  list.value = [];
  hasMore.value = true;
  getTaskProductionListLimit();
};

const handleImageError = (e: Event) => {
  const target = e.target as HTMLImageElement;
  target.src = defaultImg;
};

const getTaskProductionListLimit = async () => {
  if (isLoading.value || !hasMore.value) return;

  isLoading.value = true;
  try {
    currentPage.value == 1 && showLoading();
    const res = await WOEKS_LIST_TWO({
      current: currentPage.value,
      size: pageSize.value,
      ...searchForm.value,
    });

    const { records = [] } = res || {};
    const sizes = [
      [9, 16],
      [1, 1],
      [16, 9],
      [3, 4],
      [4, 3],
      [2, 3],
      [3, 2],
    ];

    records.forEach((item) => {
      if (!item.width || !item.height) {
        const size = sizes[Math.floor(Math.random() * sizes.length)];
        item.width = size[0];
        item.height = size[1];
      }
    });

    if (currentPage.value == 1) {
      list.value = records;
    } else {
      list.value = list.value.concat(records);
    }

    hasMore.value = !(records.length < pageSize.value);
  } catch (error) {
    console.error("列表加载失败：", error);
    currentPage.value = Math.max(1, currentPage.value - 1);
  } finally {
    isLoading.value = false;
    if (currentPage.value == 1 && !isFirstLoad.value) {
      hiddenLoading();
    }
  }
};

const handleScroll = throttle(() => {
  const container = scrollContainer.value;
  if (!container || isLoading.value || !hasMore.value) return;

  const { scrollHeight, scrollTop, clientHeight } = container;
  if (scrollTop + clientHeight >= scrollHeight - 50) {
    currentPage.value++;
    getTaskProductionListLimit();
  }

  showScrollToTop.value = scrollTop > 1000;
}, 100);

const isMobile = computed(() => {
  return navigator.userAgent.includes("Mobile");
});

const handleCardClick = (item: WaterfallItem) => {
  visible.value = true;
  currentItem.value = item;
};

const handleClose = () => {
  visible.value = false;
};

const handleCopy = (text: string) => {
  fallbackCopyToClipboard(text);
  showMsg("复制成功", "success");
};

// ==================== 简化后的保存方法（调用通用工具） ====================
const handleSave = async () => {
  if (!currentItem.value) {
    showMsg("请先选择要保存的作品");
    return;
  }

  if (saving.value) return;
  saving.value = true;

  try {
    const item = currentItem.value;
    // 生成安全的文件名（去除非法字符）
    const safeTitle =
      item.title?.replace(/[<>:"/\\|?*]/g, "_") || `work_${item.id}`;

    // 根据作品类型调用通用保存工具
    switch (currentTaskType.value) {
      case MediaType.IMAGE:
        await saveFile({
          type: FileType.IMAGE,
          url: item.fileUrl,
          fileName: safeTitle,
        });
        break;
      case MediaType.IMAGE_TEXT:
        await saveFile({
          type: FileType.IMAGE,
          url: item.fileUrl,
          fileName: safeTitle,
        });
        break;
      case MediaType.VIDEO:
        await saveFile({
          type: FileType.VIDEO,
          url: item.fileUrl,
          fileName: safeTitle,
        });
        break;
      case MediaType.TEXT:
        await saveFile({
          type: FileType.TEXT,
          content: item.content,
          fileName: safeTitle,
        });
        break;
      default:
        showMsg("不支持的文件类型");
    }
    if (!isMobile.value) {
      showMsg("保存成功", "success");
    }
    // handleClose();
  } catch (error) {
    console.error("保存失败：", error);
    showMsg(error.message || "保存失败，请稍后重试", "error");
  } finally {
    saving.value = false;
  }
};

// ==================== 生命周期 ====================
onMounted(async () => {
  currentPage.value = 1;
  hasMore.value = true;
  await getTaskProductionListLimit();

  await nextTick();
  const container = scrollContainer.value;
  if (container) {
    container.addEventListener("scroll", handleScroll);
  }

  setTimeout(() => {
    isFirstLoad.value = false;
    waterfallKey.value++;
    hiddenLoading();
  }, 500);
});

onBeforeUnmount(() => {
  const container = scrollContainer.value;
  if (container) {
    container.removeEventListener("scroll", handleScroll);
  }
});
</script>

<style scoped lang="scss">
.task-production-detail {
  max-height: 100vh;
  overflow: hidden;

  .task-production-detail-header {
    overflow-y: auto;
    background-color: #0072fed6;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

    > div {
      // max-width: 300px;
      :deep(.el-input) {
        flex: 1;
      }
    }
  }

  .card-scroll-container {
    max-height: calc(100vh - 60px);
    overflow-y: auto;
  }
}

.loading-tip {
  text-align: center;
  padding: 0 0 20px;
  font-size: 14px;
  color: #999;
}

.detail-content {
  img,
  video {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    transition: transform 0.3s ease;
  }
}

:deep(.el-drawer__title) {
  margin-bottom: 0 !important;
}

.card-item {
  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }

  img {
    transition: transform 0.3s ease;
    &:hover {
      transform: scale(1.05);
    }
  }
}
</style>