<template>
    <div class="video-model">
      <!-- 返回按钮 -->
      <div class="header">
        <van-button type="primary" size="small" @click="goBack">关闭视频</van-button>
      </div>
  
      <!-- 视频全屏播放 -->
      <video
        ref="videoRef"
        class="video-box"
        :src="url"
        controls
        autoplay
      ></video>
  
      <!-- 底部操作按钮 -->
      <!-- <div class="opt-model">
        <van-button round type="success" @click="download">保存到本地</van-button>
      </div> -->
    </div>
  </template>
  
  <script setup>
//   import { useRoute, useRouter } from 'vue-router'
//   import { Filesystem, Directory } from '@capacitor/filesystem'
//   import { Share } from '@capacitor/share'
  
  const route = useRoute()
  const router = useRouter()
  const url = decodeURIComponent(route.query.src || '');
  const name = route.query.name || 'video.mp4'
  
  function goBack() {
    router.back()
  }
  
//   async function download() {
//     try {
//       const response = await fetch(url)
//       const blob = await response.blob()
//       const reader = new FileReader()
//       reader.onload = async () => {
//         const base64Data = (reader.result).split(',')[1]
//         await Filesystem.writeFile({
//           path: name,
//           data: base64Data,
//           directory: Directory.Documents
//         })
//         await Share.share({
//           title: '视频已保存',
//           text: '点击查看视频',
//           url: url
//         })
//       }
//       reader.readAsDataURL(blob)
//     } catch (err) {
//       console.error('下载失败', err)
//     }
//   }
  </script>
  
  <style scoped lang="less">
  .video-model {
    background: #000;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
  }
  
  .header {
    padding: 8px;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
  }
  
  .video-box {
    flex: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  
  .opt-model {
    position: absolute;
    bottom: 20px;
    right: 20px;
  }
  </style>
  