<template>
  <div class="flex flex-col h-full">
    <div class="h-77px flex items-center bg-white px-20px">
      <el-icon class="mr-30px cursor-pointer" size="29" @click="handleBack">
        <ArrowLeftBold />
      </el-icon>
      <h3 class="text-24px">
        {{ detailInfo[params.name] }}
      </h3>
    </div>
    <div class="p-15px flex-1 flex flex-col overflow-hidden">
      <div class="text-right pr-40px">
        <el-button class="h-48px w-118px" type="primary" @click="handleDownload">下载</el-button>
      </div>
      <div class="rounded-24px mt-10px flex-1 overflow-hidden">
        <div v-show="fileUrl === ''">
          <div class="flex items-center justify-center h-100px">暂无资源</div>
        </div>
        <div class="h-full" v-show="fileUrl !== ''">
          <template v-if="fileType === 'video'">
            <div id="player-con" class="rounded-24px" />
          </template>
          <template v-else-if="fileType === 'audio'">
            <audio class="w-full" :src="fileUrl" controls></audio>
          </template>
          <template v-else-if="fileType === 'image'">
            <img class="h-full m-auto rounded-24px" :src="fileUrl" />
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ArrowLeftBold } from '@element-plus/icons-vue'
import { getFileType } from "~/utils/helper"
import { downLoadFile } from '~/utils/download'
import { userDetailStore } from "~/store/detail";
const detailStore = userDetailStore();
const router = useRouter()

const params = ref(detailStore.params)
const detailInfo = ref({});
const fileUrl = ref("");
const fileType = ref("video");

function handleBack() {
  router.back()
}

initDetailInfo();
async function initDetailInfo() {
  const { code, data } = await request({ url: `/aimooc/${params.value.catalog}/detail`, data: { [params.value.idKey]: params.value.id } })
  if (code === '1') {
    detailInfo.value = data.one_info;
    fileUrl.value = detailInfo.value[params.value.file];
    fileType.value = getFileType(fileUrl.value.split("?")[0] || fileUrl.value);

    if (fileType.value === "video") {
      const player = new Aliplayer({
        id: 'player-con',
        source: fileUrl.value,
        width: '100%',
        height: '100%',
        autoplay: false,
        // cover: detailInfo.value[params.value.cover],
        isLive: false,
        rePlay: false,
        playsinline: true,
        preload: true,
        controlBarVisibility: 'hover',
        useH5Prism: true,
        skinLayout: [
          {
            name: 'bigPlayButton',
            align: 'blabs',
            x: 30,
            y: 80,
          },
          {
            name: 'H5Loading',
            align: 'cc',
          },
          {
            name: 'errorDisplay',
            align: 'tlabs',
            x: 0,
            y: 0,
          },
          {
            name: 'infoDisplay',
          },
          {
            name: 'tooltip',
            align: 'blabs',
            x: 0,
            y: 56,
          },
          {
            name: 'thumbnail',
          },
          {
            name: 'controlBar',
            align: 'blabs',
            x: 0,
            y: 0,
            children: [
              {
                name: 'progress',
                align: 'blabs',
                x: 0,
                y: 44,
              },
              {
                name: 'playButton',
                align: 'tl',
                x: 15,
                y: 12,
              },
              {
                name: 'timeDisplay',
                align: 'tl',
                x: 10,
                y: 7,
              },
              {
                name: 'fullScreenButton',
                align: 'tr',
                x: 10,
                y: 12,
              },
              {
                name: 'setting',
                align: 'tr',
                x: 15,
                y: 12,
              },
              {
                name: 'volume',
                align: 'tr',
                x: 5,
                y: 10,
              },
            ],
          },
        ],
      }, (player) => {
        console.log('The player is created')
      })
    }
  }
}

const handleDownload = () => {
  const arr = fileUrl.value.split('.');
  const ext = arr[arr.length - 1].split("?")[0].toLowerCase();
  downLoadFile(fileUrl.value, `${detailInfo.value[params.value.name]}.${ext}`)
}
</script>

<route lang="json">
  {
    "meta": {
      "hidden": true,
      "hideLayout": true
    }
  }
</route>

<style>
</style>