<template>
  <div class="banner m-auto relative sm:flex">
    <svg viewBox="0 0 1440 181" fill="none" xmlns="http://www.w3.org/2000/svg"
         class="pointer-events-none absolute w-full top-[-2px] transition-all text-green-5 flex-shrink-0 opacity-100 duration-[400ms] opacity-80 -z-10">
      <mask id="path-1-inside-1_414_5526" fill="white">
        <path d="M0 0H1440V181H0V0Z"></path>
      </mask>
      <path d="M0 0H1440V181H0V0Z" fill="url(#paint0_linear_414_5526)" fill-opacity="0.22"></path>
      <path d="M0 2H1440V-2H0V2Z" fill="url(#paint1_linear_414_5526)" mask="url(#path-1-inside-1_414_5526)"></path>
      <defs>
        <linearGradient id="paint0_linear_414_5526" x1="720" y1="0" x2="720" y2="181" gradientUnits="userSpaceOnUse">
          <stop stop-color="currentColor"></stop>
          <stop offset="1" stop-color="currentColor" stop-opacity="0"></stop>
        </linearGradient>
        <linearGradient id="paint1_linear_414_5526" x1="0" y1="90.5" x2="1440" y2="90.5" gradientUnits="userSpaceOnUse">
          <stop stop-color="currentColor" stop-opacity="0"></stop>
          <stop offset="0.395" stop-color="currentColor"></stop>
          <stop offset="1" stop-color="currentColor" stop-opacity="0"></stop>
        </linearGradient>
      </defs>
    </svg>
    <div class="md:w-screen-xl m-auto">
      <div class="sm:py-4 sm:px-0 mx-3 py-2">
        <el-breadcrumb :separator-icon="ArrowRight">
          <el-breadcrumb-item :to="{ path: '/' }">
            <el-icon class="cursor-pointer">
              <ElIconHouse/>
            </el-icon>
          </el-breadcrumb-item>
          <el-breadcrumb-item>项目详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="py-1 sm:py-16 px-3" _path="/templates" _dir="" _draft="false" _partial="false" _locale=""
           _id="content:4.templates.yml" _type="yaml" _source="content" _file="4.templates.yml" _stem="4.templates"
           _extension="yml">
        <div id="mse"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ArrowRight} from '@element-plus/icons-vue'
import Player from "xgplayer";
import 'xgplayer/dist/index.min.css';

const props = withDefaults(
    defineProps<{
      title?: string;
      desc?: string;
      buyUrl?: string;
      form?: any;
      value?: number;
    }>(),
    {
      title: 'Templates',
      desc: 'Explore community templates to get up and running in a few seconds.',
      demoUrl: '/product/website',
      buyUrl: 'https://github.com/websoft9/ansible-templates',
      value: 4.2
    }
);

const url = ref<string>('');
const poster = ref<string>('');

const reload = () => {
  new Player({
    id: "mse", //元素id
    lang: "zh", //设置中文
    volume: 0, // 默认静音
    autoplay: false, //自动播放
    screenShot: false, // 开启截图功能
    //视频地址
    url: props.form.video,
    //封面图
    poster: poster.value,
    fluid: true, // 填满屏幕 （流式布局）
    playbackRate: [0.5, 1, 2] //传入倍速可选数组
  });
};

watch(
    () => props.form.video,
    (video) => {
      if(video){
        url.value = video;
        // poster.value = props.form.photo;
        reload();
      }
    },
    { immediate: true }
);
</script>
<style scoped lang="less">
.rounded-avatar{
  border-radius: 30px;
}
.rounded-avatar-xs{
  border-radius: 20px;
}
</style>
