<template>
  <div class="dongAo">
    <div class="banner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item><img src="./swiper3.jpg" @click="goPageBanner('3ea328db79a3')" /></van-swipe-item>
        <van-swipe-item><img src="./swiper2.jpg" @click="goPageBanner('5622238bb84b')" /></van-swipe-item>
        <!-- <van-swipe-item><img src="./banner3.jpg" @click="goLink()" /></van-swipe-item> -->
        <van-swipe-item> <img src="./banner.png" /></van-swipe-item>
        <!-- <van-swipe-item>
          <img @click="openVideoBanner" src="./swiper1.jpg" /></van-swipe-item> -->
      </van-swipe>
      <div class="endTime"></div>
      <div class="endTime-text">
        <div class="leftName">2022年北京冬奥会</div>
        <!--        <div class="rightTime">-->
        <!--          第-->
        <!--          <span class="dayBox">{{ day + 1 }}</span>-->
        <!--          天-->
        <!--        </div>-->
      </div>
    </div>
    <!-- 赛事导航 -->
    <div class="tab" v-if="false">
      <div class="tabBox" @click="link('赛程')">
        <div class="tabImg">
          <img src="./icon_dongaosaicheng.png" alt="" />
        </div>
        <div class="tabText">冬奥赛程</div>
      </div>
      <div class="tabBox" @click="link('快报')">
        <div class="tabImg">
          <img src="./icon_saishikuaibao.png" alt="" />
        </div>
        <div class="tabText">赛事快报</div>
      </div>
      <div class="tabBox" @click="link('link')">
        <div class="tabImg">
          <img src="./icon_remenhuodong.png" alt="" />
        </div>
        <div class="tabText">热门活动</div>
      </div>
      <div class="tabBox" @click="link('link')">
        <div class="tabImg">
          <img src="./icon_zhihuidongao.png" alt="" />
        </div>
        <div class="tabText">智慧冬奥</div>
      </div>
    </div>
    <!-- 每日赛事 -->
    <!--    <div class="tittle">每日赛事</div>-->
    <div class="tabList" v-if="matchList.length > 0" @click="openYda">
      <div class="listBox" v-for="(item, index) in matchList[0].content" :key="index">
        <div class="name">{{ item.matchName }}</div>
        <div class="listDate">
          <span style="text-align: start">{{ matchList[0].matchDate }}</span><span
            style="text-align: end">{{ item.matchTime }}</span>
        </div>
      </div>
    </div>
    <!-- 奖牌榜 -->
    <!-- <div class="tittle">奖牌榜</div> -->
    <div class="medalBox" v-if="false">
      <div class="medal">
        <div class="medalList">
          <div class="scrollBox">
            <div class="medalFlex" v-for="(item, index) in medalDetail" :key="index">
              <div class="num flex">NO.{{ index + 1 }}</div>
              <div class="name flex">{{ item.name }}</div>
              <div class="medalNum flex">
                <img src="./jin.png" alt="" />
                <span>{{ item.jin }}</span>
              </div>
              <div class="medalNum flex">
                <img src="./yin.png" alt="" />
                <span>{{ item.yin }}</span>
              </div>
              <div class="medalNum flex">
                <img src="./tong.png" alt="" />
                <span>{{ item.tong }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 冬奥视频 -->
    <!-- <div class="tittle">冬奥视频</div> -->
    <div v-if="false" class="videoBox" @click="openVideo">
      <div class="video">
        <img src="./shipinpic.png" alt="" />
        <div class="icon"></div>
      </div>
    </div>
    <!-- 冬奥闭幕式 -->
    <!-- <div class="tittle">冬奥闭幕式</div> -->
    <div class="closeBox" v-if="false">
      <div class="closeImg" @click="goLink">
        <img src="./banner3.jpg" alt="" />
      </div>
    </div>
    <!-- 热门活动 -->
    <div class="tittle" style="margin-top:20px">热门活动</div>
    <div class="huodongBox">
      <div class="huodongImg" @click="goPage('5622238bb84b')">
        <img src="./banner5gb.png" alt="" />
      </div>
      <div class="huodongImg" @click="goPage('3ea328db79a3')">
        <img src="./banner10gb.png" alt="" />
      </div>
      <div class="huodongImg" @click="recommend('tencent')">
        <img src="./tencent.png" alt="" />
      </div>
      <div class="huodongImg" @click="recommend('bili')">
        <img src="./bili.png" alt="" />
      </div>
      <div class="huodongImg" @click="recommend('mangguo')">
        <img src="./mangguo.png" alt="" />
      </div>
    </div>
    <!-- 智慧活动 -->
    <!-- <div class="tittle">智慧冬奥</div> -->
    <div v-if="false" class="huodongBox" id="dongAoId">
      <div class="huodongImg" @click="goUrl(0)">
        <img src="./banner1.jpeg" alt="" />
      </div>
      <div class="huodongImg" @click="goUrl(1)">
        <img src="./banner2.jpg" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
  import Schedule from "./saiCheng";
  import vanSwipe from "../../../node_modules/vant/lib/swipe";
  import vanSwipeItem from "../../../node_modules/vant/lib/swipe-item";
  import {
    shence
  } from "../../util/shence";
  // import jpb from '../../../public/jiangPB.js'
  // import jpb from 'https://operation.mige.tv/TJtest/jiangPB.js'
  import {
    medalList
  } from "./js";
  export default {
    components: {
      vanSwipe,
      vanSwipeItem,
    },
    data() {
      return {
        day: 40,
        medalDetail: [],
        matchList: [],
      };
    },

    created() {
      document.title = "冬奥专区";
      // console.log(jpb)
      // this.medalDetail = jpb.jiangPB
      this.getMedal();
    },
    mounted() {
      let nowDate = new Date();
      let endTime = new Date("2022-02-04").getTime();
      let startTime = nowDate.getTime();
      this.day = parseInt((startTime - endTime) / (1000 * 60 * 60 * 24));
      let y = nowDate.getFullYear();
      let m = nowDate.getMonth() + 1;
      let mm = m < 10 ? "0" + m : m;
      let d = nowDate.getDate();
      let dd = d < 10 ? "0" + d : d;
      let dateTime = `${y}-${mm}-${dd}`;
      this.matchList = Schedule.schedule(dateTime);
      shence("simplePage", "simpleDongAo", "daOpenPage", "");
    },
    methods: {
      link(type) {
        if (type === "赛程") {
          shence("simplePage", "simpleDongAo", "daBtnclick", "冬奥专区" + type);
          window.open("https://www.beijing2022.cn/cn/schedule/index.htm");
        } else if (type === "快报") {
          shence("simplePage", "simpleDongAo", "daBtnclick", "冬奥专区" + type);
          window.open("https://www.beijing2022.cn/video2ch.htm");
        } else if (type === "link") {
          let scroll = document.getElementById("dongAoId").offsetTop;
          window.scrollTo({
            top: scroll,
            behavior: "smooth"
          });
        }
      },
      openVideo() {
        shence("simplePage", "simpleDongAo", "daBtnclick", "冬奥视频");
        window.open("https://m.yangshipin.cn");
      },
      openVideoBanner() {
        shence("simplePage", "simpleDongAo", "daBannerclick", "冬奥视频");
        window.open("https://m.yangshipin.cn");
      },
      openYda() {
        shence("simplePage", "simpleDongAo", "daBtnclick", "每日赛事");
        window.open("https://m.yangshipin.cn/static/m/linkUrl/happy/");
      },
      goUrl(e) {
        let arr = [{
            name: "冬奥翻牌活动",
            url: "https://img.client.10010.com/2021dongaofanpai/#/?channel=ceshi",
          },
          {
            name: "冬奥问答",
            url: "https://mbh.chinaunicomvideo.cn/Olympic_2nd/index.html?channel=datc20",
          },
        ];
        console.log(arr[e].name + "：", arr[e].url);
        shence("simplePage", "simpleDongAo", "daBtnclick", arr[e].name);
        window.open(arr[e].url);
      },
      goPage(key) {
        shence("simplePage", "simpleDongAo", "daPushClick", key);
        if (key == "5622238bb84b") {
          window.location.href = "http://v.mige.tv/ysp5";
        } else if (key === "3ea328db79a3") {
          window.location.href = "http://v.mige.tv/ysp10";
        }
      },
      recommend(type) {
        if (type === 'bili') {
          window.location.href = "http://v.mige.tv/fQfu6j"
        } else if (type === "tencent") {
          window.location.href = "http://v.mige.tv/6BrAZf"
        } else if (type === 'mangguo') {
          window.location.href = "http://v.mige.tv/jqQfye"
        }
      },
      goPageBanner(key) {
        shence("simplePage", "simpleDongAo", "daBannerclick", key);
        if (key == "5622238bb84b") {
          window.location.href = "http://v.mige.tv/ysp5";
        } else {
          window.location.href = "http://v.mige.tv/ysp10";
        }
      },
      goLink() {
        window.location.href =
          "https://m.yangshipin.cn/static/match/schedule.html?matchid=OlympicWinterGames_2022&test=%3Fchannel%3Dliantong";
      },
      // 获取每日奖牌榜
      getMedal() {
        medalList().then((res) => {
          this.medalDetail = res.data;
        });
      },
    },
  };
</script>

<style lang="scss">
  @import "./index.scss";
</style>
