<template>
  <div class="WorldContribution">
    <van-image :width="topWidth" :height="topWidth / 1.7" :src="soundbyteJpg" />
    <br />
    <van-cell-group inset>
      <van-nav-bar title="活动介绍" />
      <p
        style="
          text-indent: 2em;
          padding: 8px 8px 0 8px;
          text-align: justify;
          line-height: 1.5em;
          font-size: 16px;
        "
      >
        尽管曾经的比赛已成过眼云烟，但总有些经典瞬间无法忘却。那些年的世界杯名场面、那些与挚友一同熬夜看比赛的日子，那些因为足球而欣喜、落寞、激动、感伤的时刻，会永远铭记心中。
      </p>
      <p
        style="
          text-indent: 2em;
          padding: 0 8px 8px 8px;
          text-align: justify;
          line-height: 1.5em;
          font-size: 16px;
        "
      >
        用户可在下方“我要投稿”上传自己与足球相关的视频，题材包含：足球技巧展示、喜爱的球队/球星、球衣收藏、印象深刻的比赛等各种足球、世界杯相关的视频，并点击“我的投稿”分享邀请好友助威。参赛作品严禁抄袭、搬运等非原创内容、涉嫌违规内容
      </p>
    </van-cell-group>
    <br />
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-nav-bar title="报名信息" />
        <van-field
          required
          v-model="from.name"
          label="选手姓名"
          placeholder="请输入用户名"
          :rules="[{ validator: isString, message: '请输入正确内容' }]"
        />
        <van-field
          required
          v-model="from.tel"
          label="联系方式"
          type="tel"
          placeholder="请输入手机号"
          :rules="[{ validator: isNumber, message: '请输入正确内容' }]"
        />
        <van-field
          required
          v-model="from.university"
          label="参赛院校"
          placeholder="请输入院校名称"
          :rules="[{ validator: isString, message: '请输入正确内容' }]"
        />
        <van-field
          required
          v-model="from.description"
          label="作品简介"
          placeholder="请输入简介"
          :rules="[{ validator: isString, message: '请输入正确内容' }]"
        />
        <van-field
          placeholder="上传作品"
          required
          label="上传作品"
          :rules="[{ validator: isFile, message: '请输入正确内容' }]"
        >
          <template #input>
            <van-uploader
              accept="video/*"
              v-model="from.file"
              :max-count="1"
              :max-size="524288000"
              @oversize="filesize"
              result-type="file"
            >
              <template #preview-cover>
                <van-icon
                  color="#fff"
                  size="40"
                  @click="previewClick"
                  name="play-circle-o play"
                />
              </template>
            </van-uploader>
            <p style="font-size: 12px; color: #666">
              支持上传MP4、MOV格式的视频，视频时长三分钟以内，视频大小500M以内
            </p>
          </template>
        </van-field>
        <div style="padding: 5px">
          <van-button block type="danger" native-type="submit">
            我要报名
          </van-button>
        </div>
      </van-cell-group>
    </van-form>
    <br />

    <div class="guize" @click="showGuize">活动规则</div>

    <div
      class="Preview"
      :style="preview !== '' ? '' : 'z-index: -1;opacity: 0'"
    >
      <van-icon
        name="close"
        color="#fff"
        size="30"
        class="close"
        @click="closePreview"
      />
      <video ref="previewVideo" controls :src="preview"></video>
    </div>
  </div>
</template>
<script setup>
// import { onMounted, reactive } from "vue";
import { ref, reactive } from "vue";
import { Toast, Dialog } from "vant";
import axios from "axios";
import config from "@/config/index.js";
import soundbyteJpg from "../../assets/img/upbg.jpg";
/**
 * window.$originData.orginParames.title 页面标题
 * window.$originData.orginParames.parameters 固定参数值
 * window.$originData.urlParames url参数
 */
console.log("--|>", window.$originData.urlParames);
const topWidth = ref(window.$originData.orginParames.availWidth);
const preview = ref("");
const previewVideo = ref(null);
const shanshipin = window.$shanshipin || {};
shanshipin.Phone =
  window.$originData.urlParames.phone || shanshipin.Phone || "";
shanshipin.UserName =
  decodeURI(window.$originData.urlParames.userName || "") ||
  shanshipin.UserName ||
  "";
const from = reactive({
  name: shanshipin.UserName || "",
  tel:
    !isNaN(shanshipin.Phone) && Number(shanshipin.Phone)
      ? shanshipin.Phone
      : "",
  university: "",
  file: [],
});

const filesize = () => Toast("超出文件大小限制");
const previewClick = () => {
  let getUrl = null;
  const file = from.file[0].file;
  if (window.createObjectURL != undefined) {
    //basic
    getUrl = window.createObjectURL(file);
  } else if (window.URL != undefined) {
    //window.URL 标准定义
    getUrl = window.URL.createObjectURL(file);
  } else if (window.webkitURL != undefined) {
    //window.webkitURL是webkit的内核
    //webkit or chrome
    getUrl = window.webkitURL.createObjectURL(file);
  }
  preview.value = getUrl;
  previewVideo.value.play();
};
const closePreview = () => {
  preview.value = "";
};

const showGuize = () => {
  Dialog.alert({
    title: "活动规则",
    messageAlign: "left",
    confirmButtonText: "关闭",
    message: () => (
      <div class="art">
        <p>1、报名时间：2022年11月20日—2022年12月20日。</p>
        <p>2、视频投稿，视频帖不短于30秒，作品原创</p>
        <p>
          3、闪视频官方将会选择优秀作品奖X名，人气选手X名，获奖选手根据投稿时填写手机号进行联系领取奖品。
        </p>
      </div>
    ),
  });
};

const isString = v => {
  return !!v && typeof v == "string" && isNaN(v);
};
const isFile = () => {
  return from.file && from.file.length;
};
const isNumber = () => {
  console.log(from);
  return /1[0-9]{10}/g.test(from.tel);
};

const onSubmit = () => {
  if (!isFile) Toast("请上传作品");
  const oriData = new FormData();
  oriData.append("name", from.name);
  oriData.append("phone", from.tel);
  oriData.append("description", from.description);
  oriData.append("university", from.university);
  oriData.append("file", from.file[0].file);

  Toast.loading({
    message: "报名中...",
    forbidClick: true,
    duration: 0,
  });
  axios({
    method: "post",
    url: config.base.ajax + "store",
    headers: {
      "Content-Type": "multipart/form-data",
    },
    data: oriData,
  })
    .then(() => {
      Toast.clear();
      Toast("报名成功");
    })
    .catch(() => {
      Toast.clear();
      Toast("报名失败");
    });
};
</script>
<style>
.WorldContribution {
  width: 100vw;
  min-height: 100vh;
  background-image: url(../../assets/img/bg.jpg);
  background-size: 100% 100%;
  font-weight: 400;
}
.WorldContribution .art {
  padding: 8px 8px 0 8px;
  text-align: justify;
  line-height: 1.5em;
  font-size: 16px;
}
.WorldContribution .van-hairline--bottom:after {
  border-bottom-width: 0px;
}
.WorldContribution .van-nav-bar__content {
  background-image: url("../../assets/img/title.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  overflow: hidden;
}
.WorldContribution .van-nav-bar__title {
  color: #f63634;
  font-size: 23px;
}
.WorldContribution .van-button__text {
  font-size: 15px;
  font-weight: 400;
}
.WorldContribution .van-uploader__preview-cover {
  background-color: #000;
}
.van-uploader__preview-cover video {
  width: 100%;
  height: 100%;
}
.WorldContribution .play {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.WorldContribution .Preview {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 10;
}
.WorldContribution .Preview video {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100vw;
  max-width: 100vh;
  background: #000;
}
.WorldContribution .Preview .close {
  position: absolute;
  right: 5px;
  top: 5px;
}
.WorldContribution .guize {
  background-color: #ff2c2c;
  position: fixed;
  right: 0;
  top: 2em;
  color: #fff;
  font-weight: 400;
  font-size: 16px;
  padding: 3px 5px 3px 15px;
  border-top-left-radius: 1em;
  border-bottom-left-radius: 1em;
  z-index: 11;
}
</style>
