<script setup>
import { ArrowLeftBold } from '@element-plus/icons-vue'
import { downLoadFile } from "~/utils/download";

const router = useRouter()
const route = useRoute()
function handleBack() {
  router.back()
}

let axm_id = $ref('')
let detailData = $ref({})
if (route.query.axm_id) {
  let axm_id = route.query.axm_id;
  initData();
}
async function initData() {
  const { code, data } = await request({ url: '/aimooc/xnszr_make/detail', data: { axm_id: route.query.axm_id } })
  if (code === '1') {
    detailData = data.one_info
    const player = new Aliplayer(
      {
        id: 'player-con',
        source: detailData.axm_video,
        width: '100%',
        height: '460px',
        autoplay: false,
        cover: detailData.axm_img,
        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')
      },
    )
  }
}
function handleDown() {
  if (!detailData.axm_video) {
    ElMessage.error('暂无资源！')
    return
  }
  const arr = detailData.axm_video.split('.');
  const ext = arr[arr.length - 1].split('?')[0];
  console.log(ext);
  downLoadFile(detailData.axm_video, `${detailData.axm_title}.${ext}`)
}
</script>

<template>
  <div>
    <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">
        {{ detailData.axm_title }}
      </h3>
    </div>
    <div class="my-10px w-full flex justify-end pr-47px">
      <el-button type="primary" size="large" class="w-118px" @click="handleDown">
        下载
      </el-button>
    </div>
    <div class="overflow-hidden rounded-10px px-14px py-22px">
      <div id="player-con" class="rounded-10px" />
    </div>
  </div>
</template>

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