<template>
  <view class="container">
    <view class="home" :style="{backgroundImage: `url(${staticImg.bgi})`}">
      <image
        :src="staticImg.center"
        class="home-center"
        mode="aspectFit"
      />

      <image
        :src="staticImg.ava"
        class="home-ava"
        mode="aspectFill"
      />
      
      <view class="home-title">“逻辑狗杯”全国儿童·思维魔法嘉年华</view>

      <view v-if="state.videoUrl" class="home-video" :style="{backgroundImage: `url(${staticImg.videoBGI})`}">
        <video
            :src="state.videoUrl"
            objectFit="cover"
            autoplay
            loop
            muted
            show-mute-btn
            enable-play-gesture
            auto-pause-if-navigate
            auto-pause-if-open-native
            show-casting-button
        ></video>
        <view class="border top"></view>
        <view class="border bottom"></view>
        <view class="border left"></view>
        <view class="border right"></view>
      </view>

      <view class="home-practice">
        <image
          :src="staticImg.practice"
          mode="aspectFit"
          @click="goPatternPage"
        />
      </view>

      <view class="home-bottom" >
        <image :src="staticImg.left" class="home-bottom-left" mode="aspectFit"></image>
        <image :src="staticImg.right" class="home-bottom-right" mode="aspectFit"></image>
        <image :src="staticImg.tip" class="home-bottom-leftTip tip" mode="aspectFit"></image>
        <image :src="staticImg.tip" class="home-bottom-rightTip tip" mode="aspectFit"></image>
      </view>

    </view>

  </view>


</template>


<script lang="ts" setup >
import { reactive } from 'vue'
import { useStaticImg } from '@/hooks'

const staticImg = {
  bgi: "https://app-resources-luojigou.luojigou.vip/Fh9jOblR745LCJKFSyxVnzPKy2Fn",
  ava: "https://app-resources-luojigou.luojigou.vip/FqBx1QvL4M2Bs8jIuhBIbue0i3U6",
  center: "https://app-resources-luojigou.luojigou.vip/Fjfm7PfteUl9WN7jIhbo0obyK5db",
  videoBGI: "https://app-resources-luojigou.luojigou.vip/FvUutM3nN18XHjfcLJGP7Wu2bj1i",
  practice: "https://app-resources-luojigou.luojigou.vip/FuiDYpoF1JzcBzeC7zxi3ENbKiML",
  left: "https://app-resources-luojigou.luojigou.vip/FrfKepKaY3G23NcPC-oFpW_QgxeH",
  right: "https://app-resources-luojigou.luojigou.vip/FiaT6ZujXdcko9Q4sL2gg1kKD-wH",
  tip: "https://app-resources-luojigou.luojigou.vip/FqEuou75mlFUcFqOS2Ph7wOax86n"
};


  const state = reactive({
    videoUrl: 'https://cdn.video.luojigou.vip/liRfj13zjas7Tka6oAtnTmtYF1fT.mp4'
  })

  const goPatternPage = () => {
    uni.navigateTo({
      url: "/pages/Practice/index",
    });
  }
</script>


<style lang="less" scoped>
view, image {
  margin: 0 auto;
}

.container {
  width: 100vw;
  height: 100vh;
  background-color: #FFE779;
  overflow: scroll;
}

.home {
  width: 100%;
  min-height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  overflow: hidden;
  image {
    display: block;
  }

  &-center {
    position: fixed;
    right: 0;
    top: 296rpx;
    z-index: 10;
    width: 162rpx;
    height: 62rpx;
    object-fit: cover;
  }

  &-ava {
    margin-top: 128rpx;
    width: 96rpx;
    height: 96rpx;
    object-fit: cover;
    border-radius: 50%;
    border: 4rpx solid #fff;
    box-sizing: border-box;
  }

  &-title {
    margin-top: 14rpx;
    height: 50rpx;
    font-size: 36rpx;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #006EAB;
    line-height: 50rpx;
    text-align: center;
  }

  &-video {
    position: relative;
    z-index: 1;
    margin-top: 86rpx;
    width: 654rpx;
    height: 426rpx;
    background-size: 100%, 100%;
    background-repeat: no-repeat;
    border-radius: 48rpx;
    overflow: hidden;

    video {
      width: 654rpx;
      height: 356rpx;
      border-radius: 40rpx;
      border: 8rpx solid #FFEA90;
      box-sizing: border-box;
      object-fit: cover;
    }

    .border {
      position: absolute;
      background-color: #FFEA90;
    }

    .top {
      top: 8rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 600rpx;
      height: 2rpx;
    }

    .bottom {
      top: 348rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 600rpx;
      height: 2rpx;
    }

    .left {
      left: 8rpx;
      top: 25rpx;
      width: 2rpx;
      height: 310rpx;
    }

    .right {
      right: 8rpx;
      top: 25rpx;
      width: 2rpx;
      height: 310rpx;
    }
  }

  &-practice {
    position: relative;
    margin-top: 18rpx;
    width: 654rpx;
    height: 370rpx;

    image {
      position: absolute;
      left: 0;
      top: 0;
      width: 680rpx;
      height: 370rpx;
    }
  }

  &-bottom {
    position: relative;
    margin-top: 32rpx;
    margin-bottom: 60rpx;
    width: 654rpx;
    height: 304rpx;

    > image {
      position: absolute;
    }

    &-left {
      left: 0;
      top: 0;
      width: 298rpx;
      height: 304rpx;
    }

    &-right {
      right: -22rpx;
      bottom: 0;
      width: 362rpx;
      height: 330rpx;
    }

    .tip {
      bottom: -52rpx;
      width: 222rpx;
      height: 96rpx;
    }

    &-leftTip {
      left: 20rpx;
    }

    &-rightTip {
      right: 50rpx;
    }
  }
}

</style>