<template>
  <RenderImage />
</template>

<script setup lang="tsx" name="LjFilePreview_PreviewImage">
import { ref, onMounted, nextTick, computed, inject, watch } from "vue";
import { GetCacheFile } from "@/api/modules/common";
import LjDialog from "@/components/LjDialog/index.vue";
import type { FileData } from "@/typings/business";
import { isArray } from "@/utils/is";
import { getBase64Type } from "@/utils/index";

interface LjFileProps {
  /**
   * @description 文件数据
   */
  files: FileData[];
  /**
   * @description 初始预览图像索引，小于 url-list 的长度
   */
  initialIndex?: number;
  closed?: () => void;
  updated: (data: any, index: number) => any;
}

const props = withDefaults(defineProps<LjFileProps>(), {
  files: () => []
});

const isSrcList = ref<any>([]);
const ElImageViewsRef = ref();

/**
 * @description 获取图片文件url列表
 */
const getUrlList = (data: any) => {
  let arr: any = [];
  let typeArr: any = [];

  data.map((item: any) => {
    typeArr.push(item.fileType);
    if (item.fileData) {
      arr.push(item.fileData);
    } else {
      arr.push("filemd5:" + item.filemd5);
    }
  });
  return arr;
};

/**
 * @description 切换图片
 */
const handleSwitchImage = async (index: any) => {
  if (isSrcList.value.length < index + 1) {
    return;
  }

  console.log("handleSwitchImageViewer str :>> ", index, isSrcList.value);

  let res = await props.updated(props.files[index].filemd5, index);
  res && (isSrcList.value[index] = res);
  // let str: string = isSrcList.value[index] ?? "";
  // if (str.indexOf("filemd5:") > -1) {
  //   let _str = str.replace("filemd5:", "");
  //   // let res = await getData(_str);
  //   // let _type = isTypeList.value[index];
  //   // isSrcList.value[index] = getBase64Type(_type) + res.filedata;
  //   let res = await props.updated(_str, index);
  //   if (getBase64Type(props.files[index]?.fileType).indexOf(":image/") > -1) {
  //     isSrcList.value[index] = res;
  //   } else {
  //     return;
  //   }
  //   console.log("handleSwitchImage res :>> ", res);
  // }
};

const switchImage = (index: number) => {
  console.log("switchImage index :>> ", index);
  ElImageViewsRef.value.setActiveItem(index);
};

onMounted(() => {
  isSrcList.value = getUrlList(props.files);
  handleSwitchImage(props.initialIndex);
});

// watch(
//   () => props.files,
//   newVal => {
//     console.log("warch image newVal:>> ", newVal);
//     isSrcList.value = getUrlList(newVal);
//   },
//   {
//     immediate: true
//   }
// );
/**
 * ------------------------------------------------------------------------
 * @description 渲染图片
 */
const RenderImage = () => {
  console.log("RenderImage props.initialIndex :>> ", props.initialIndex, isSrcList.value);

  return (
    <el-image-viewer
      ref={ElImageViewsRef}
      zoom-rate={1.2}
      url-list={isSrcList.value}
      initial-index={props.initialIndex}
      close-on-press-escape={true}
      onClose={props.closed}
      onSwitch={handleSwitchImage}
    />
  );
};

defineExpose({
  switchImage
});
</script>

<style lang="scss">
.el-image-viewer__mask {
  background-color: $color-gray-1;
}
</style>
