<template>
  <div class="WorldCupDetail">
    <img class="upbg" :src="require('../../assets/img/upbg.jpg')" />
    <video controls class="video" :src="detailUse.file || ''"></video>
    <p class="title" v-text="detailUse.name"></p>
    <van-cell-group inset>
      <van-row>
        <van-col span="8">
          <div class="user">
            <p class="number">22011</p>
            <div class="key">
              <van-image
                width="14"
                height="14"
                style="vertical-align: middle"
                :src="require('../../assets/img/bh.png')"
              />
              <span style="vertical-align: middle"> 编号 </span>
            </div>
          </div>
        </van-col>
        <van-col span="8">
          <div class="user">
            <p class="number" v-text="detailUse.votes"></p>
            <div class="key">
              <van-image
                width="14"
                height="14"
                style="vertical-align: middle"
                :src="require('../../assets/img/ps.png')"
              />
              <span style="vertical-align: middle"> 票数 </span>
            </div>
          </div>
        </van-col>
        <van-col span="8">
          <div class="user">
            <p class="number" v-text="detailUse.top"></p>
            <div class="key">
              <van-image
                width="14"
                height="14"
                style="vertical-align: middle"
                :src="require('../../assets/img/pm.png')"
              />
              <span style="vertical-align: middle"> 排名 </span>
            </div>
          </div>
        </van-col>
      </van-row>
    </van-cell-group>
    <div class="line" v-if="detailUse.description">作品简介</div>
    <div class="artcle" v-text="detailUse.description"></div>
    <van-button
      round
      color="linear-gradient(to bottom, #FFA244, #FF5733)"
      type="primary"
      class="saveP"
      block
      style="font-size: 18px"
      @click="saveVote"
      >投票</van-button
    >
  </div>
</template>
<script setup>
import { isShanshipin,isWechat } from "@/utils/isTerminal";
import { ref, reactive } from "vue";
import { votpSave } from "@/api/worldCup.js";
import { Toast, Dialog } from "vant";
// import { onMounted, reactive } from "vue";
// import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
/**
 * window.$originData.orginParames.title 页面标题
 * window.$originData.orginParames.parameters 固定参数值
 * window.$originData.urlParames url参数
 */
import { Detail } from "@/api/worldCup.js";

const p = isWechat?'微信': isShanshipin? '闪视频' : '其它';
const detailUse = ref({});
const shanshipin = window.$shanshipin || {};
const from = reactive({
  name: shanshipin.UserName || localStorage.getItem("worldCupName") || "",
  phone: shanshipin.Phone || localStorage.getItem("worldCupPhone") || "",
});

function login(next) {
  Dialog.alert({
    title: "",
    messageAlign: "left",
    theme: "round-button",
    confirmButtonText: "登录",
    message: () => (
      <div>
        <van-field
          required
          v-model={from.name}
          label="姓名"
          placeholder="请输入用户名"
        />
        <van-field
          required
          v-model={from.phone}
          label="联系方式"
          type="tel"
          placeholder="请输入手机号"
        />
      </div>
    ),
  }).then(() => {
    localStorage.setItem("worldCupPhone", from.phone || "");
    localStorage.setItem("worldCupName", from.name || "");
    next && next();
  });
}
const target = window.$originData.urlParames.phone || from.phone;

Detail({
  phone: target,
}).then(r => {
  detailUse.value = r || {};
});
function saveVote() {
  if (!from.phone) return login(vote);
  else vote();
}
function vote() {
  votpSave({
    target: target,
    source: from.phone,
    client: p
  }).then(r => {
    console.log(r);
    Toast("感谢您的支持！");
  });
}
</script>
<style lang="scss">
.WorldCupDetail {
  width: 100vw;
  padding-top: 38.8vw;
  padding-bottom: 50px;
  font-family: PingFangSC-Regular, PingFang SC;
  position: relative;
  .upbg {
    position: absolute;
    top: 0;
    z-index: 0;
    width: 100%;
  }
  .video {
    position: relative;
    z-index: 1;
    width: calc(100% - 26px);
    margin: 13px;
    background: #000;
  }
  .title {
    font-size: 18px;
    font-weight: 500;
    color: #333333;
    padding: 7px 10px;
  }
  .user {
    text-align: center;
    color: #999999;
    font-size: 12px;
    font-weight: 400;
    line-height: 17px;
    padding: 11px 0;
    background-color: #d8d8d8;
    .number {
      font-size: 18px;
      color: #956116;
      padding-bottom: 3px;
    }
  }
  .line {
    height: 20px;
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    line-height: 20px;
    padding: 7px 0 7px 10px;
  }
  .artcle {
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    padding: 7px 10px;
    line-height: 1.7em;
    text-indent: 2em;
  }
  .saveP {
    position: fixed;
    bottom: 10px;
    width: calc(100% - 40px);
    left: 20px;
  }
}
</style>
