<script setup>
import { JsvPreDownloader } from "jsview";
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

const downloader = new JsvPreDownloader();
const single =
  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/JsvPreDownloader/App/dd4b1c7471613493.jpg";

const list = [
  {
    url: "",
    isImage: true,
  },
  {
    url: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/JsvPreDownloader/App/8a2b507dd6effe91.jpg",
    isImage: true,
  },
  downloader.buildDownloadItem(
   "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/JsvPreDownloader/App/d6f86f1b1d5f112d.jpg",
   "",
    true
  ),
  {
    url: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/JsvPreDownloader/App/e1e898525109d0ea.jpg",
    isImage: false,
  },
  {
    url:null,
    isImage:false
  },
  downloader.buildDownloadItem(null),
  null
];

const singleRef = ref(1);
const listRef = reactive(
  new Array(list.length).fill({
    state: 1,
    extra: "",
  })
);

downloader.download(single, "", true).then(
  (info) => {
    console.log("download single success", info);
    singleRef.value = 0;
  },
  (info) => {
    console.log("download single failed", info);
    singleRef.value = -1;
  }
);

const updateInfo = (info) => {
  for (let i = 0; i < info.length; i++) {
    const item = info[i];
    let extra = "";
    if (item.succeed) {
      extra =
        item.info.fileType === "image"
          ? `图片: ${item.info.imageSize.width}x${item.info.imageSize.height}`
          : "非图片";
    } else if (!item.info.url) {
      extra = "空链接"
    }
    listRef[i] = {
      state: item.succeed ? 0 : -1,
      extra,
    };
  }
};

downloader.download(list).then(
  (info) => {
    console.log("download list success", info);
    updateInfo(info);
  },
  (info) => {
    console.log("download list failed", info);
    updateInfo(info);
  }
);

const stateToText = (state) => {
  switch (state) {
    case 0:
      return "下载成功";
    case 1:
      return "下载中";
    case -1:
      return "下载失败";
  }
};

const onKeyDown = (ev) => {
  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
    router?.go(-1); // 有router时，是从DemoHomepage进入，回退
  }
  return true;
};
</script>

<template>
  <div :style="{ width: 1920, height: 1080, backgroundColor: '#007788' }">
    <jsv-focus-block
      autoFocus
      :onAction="{
        onKeyDown: onKeyDown,
      }"
    />
    <div :style="{ left: 10, top: 10 }">
      <div class="describe">单文件下载</div>
      <div class="block" :style="{ left: 200 }">
        {{ `${stateToText(singleRef)}` }}
      </div>
    </div>

    <div :style="{ left: 10, top: 210 }">
      <div class="describe">{{ "多文件下载\n(第一个空链接)" }}</div>
      <div :style="{ left: 0,top:90 }">
        <div
          v-for="(item, index) in listRef"
          :key="index"
          class="block"
          :style="{
            left: 180 * index,
          }"
        >
          {{ `${stateToText(item.state)} \n ${item.extra}` }}
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.describe {
  width: 300;
  height: 150;
  color: #ffffff;
  font-size: 30;
  white-space: pre-wrap;
  text-overflow: clip;
}
.block {
  width: 170;
  height: 150;
  background-color: #888888;
  color: #000000;
  font-size: 24;
  white-space: pre-wrap;
  text-overflow: clip;
}
</style>