<template>
  <keep-alive>
    <div class="guide">
      <div class="guide__header">
        <ul class="flex">
          <li class="tab" :class="{ active: active === 0 }" @click="change(0)">
            鞋子使用
          </li>
          <li class="tab" :class="{ active: active === 1 }" @click="change(1)">
            游戏操作
          </li>
        </ul>
        <p class="tips f12 mt15" v-if="active === 0">
          <img
            class="warning-fill"
            src="@/assets/guide/warning-fill.png"
            alt="提醒"
          />
          注意：首次使用前需给鞋子充电5分钟。确保鞋子配对、APP连接鞋子、查看电量等操作可正常执行
        </p>
      </div>
      <div class="guide__body mt16">
        <ul class="shoes-use" v-if="active === 0">
          <li
            class="item df jc-sb ai-c pt20 pb20 pl16 pr16 pointer"
            @click="navigate('/recharge')"
          >
            <div class=" df ai-c">
              <img
                class="icon"
                src="@/assets/guide/recharge@2x.png"
                alt="鞋子充电"
              />
              <span class="ml10">鞋子充电</span>
            </div>
            <van-icon name="arrow" color="#999999" />
          </li>
          <li
            class="item df jc-sb ai-c pt20 pb20 pl16 pr16 pointer mt16"
            @click="navigate('/pair')"
          >
            <div class=" df ai-c">
              <img
                class="icon"
                src="@/assets/guide/pair@2x.png"
                alt="配对激活"
              />
              <span class="ml10">配对激活</span>
            </div>
            <van-icon name="arrow" color="#999999" />
          </li>
          <li
            class="item df jc-sb ai-c pt20 pb20 pl16 pr16 pointer mt16"
            @click="navigate('/connect')"
          >
            <div class=" df ai-c">
              <img
                class="icon"
                src="@/assets/guide/connect@2x.png"
                alt="连接APP"
              />
              <span class="ml10">连接APP</span>
            </div>
            <van-icon name="arrow" color="#999999" />
          </li>
          <li
            class="item df jc-sb ai-c pt20 pb20 pl16 pr16 pointer mt16"
            @click="navigate('/begin')"
          >
            <div class=" df ai-c">
              <img
                class="icon"
                src="@/assets/guide/begin@2x.png"
                alt="开始运动"
              />
              <span class="ml10">开始运动</span>
            </div>
            <van-icon name="arrow" color="#999999" />
          </li>
          <li
            class="item df jc-sb ai-c pt20 pb20 pl16 pr16 pointer mt16"
            @click="navigate('/power')"
          >
            <div class=" df ai-c">
              <img
                class="icon"
                src="@/assets/guide/power@2x.png"
                alt="查看电量"
              />
              <span class="ml10">查看电量</span>
            </div>
            <van-icon name="arrow" color="#999999" />
          </li>
          <li
            class="item df jc-sb ai-c pt20 pb20 pl16 pr16 pointer mt16"
            @click="navigate('/replace')"
          >
            <div class=" df ai-c">
              <img
                class="icon"
                src="@/assets/guide/replace@2x.png"
                alt="更换设备"
              />
              <span class="ml10">更换设备</span>
            </div>
            <van-icon name="arrow" color="#999999" />
          </li>
          <li
            class="item df jc-sb ai-c pt20 pb20 pl16 pr16 pointer mt16"
            @click="navigate('/miracast')"
          >
            <div class=" df ai-c">
              <img
                class="icon"
                src="@/assets/guide/game_operate@2x.png"
                alt="游戏操作指引"
              />
              <span class="ml10">电视投屏</span>
            </div>
            <van-icon name="arrow" color="#999999" />
          </li>
        </ul>
        <ul class="shoes-use" v-else>
          <li
            class="item df jc-sb ai-c pt20 pb20 pl16 pr16 pointer"
            @click="
              open(
                'http://static.ouj.com/video/bcc4eb41-7475-3296-845f-1ef35a2d01d8.mp4'
              )
            "
          >
            <div class=" df ai-c">
              <img
                class="icon"
                src="@/assets/guide/game_common@2x.png"
                alt="鞋子充电"
              />
              <span class="ml10">游戏通用操作教程</span>
            </div>
            <van-icon name="arrow" color="#999999" />
          </li>
          <li
            class="item df jc-sb ai-c pl16 pr16 pt16 pb16 pointer mt16"
            v-for="item in gameLinks"
            :key="item.image"
            @click="open(item.video)"
          >
            <div class=" df ai-c">
              <img class="image" :src="item.image" :alt="item.alt" />
              <span class="ml10">{{ item.title }}</span>
            </div>
            <van-icon name="arrow" color="#999999" />
          </li>
        </ul>
      </div>
      <VideoDialog v-model:visible="videoVisible" :url="cVideo" />
    </div>
  </keep-alive>
</template>
<script lang="ts">
import {
  defineComponent,
  ref,
  reactive,
  onUnmounted,
  onBeforeUnmount
} from "vue";
import { useRoute, useRouter } from "vue-router";
import VideoDialog from "./components/VideoDialog/index.vue";
export default defineComponent({
  components: { VideoDialog },
  setup() {
    const router = useRouter();
    const route = useRoute();
    const active = ref(0);
    const gameLinks = reactive([
      {
        image:
          "https://static.ouj.com/shoes/game/2f1f2a47a3954468bd780ef5e8717d09.jpg?x-oss-process=image/resize,w_240",
        video:
          "http://static.ouj.com/video/d84b945b-0bf4-3a17-8a37-2a9e77ed3a67.mp4",
        alt: "跑酷",
        title: "跑酷 操作教程"
      },
      {
        image:
          "https://static.ouj.com/shoes/game/972a3abdaf064763b82b78f8840fbb81.jpg?x-oss-process=image/resize,w_240",
        video:
          "http://static.ouj.com/video/8b0c5908-254f-3179-b274-5077e4855190.mp4",
        alt: "跳舞",
        title: "跳舞 操作教程"
      },
      {
        image:
          "https://static.ouj.com/shoes/game/a597ea4e7f3744b0ac7f41d23933f65b.jpg?x-oss-process=image/resize,w_240",
        video:
          "http://static.ouj.com/video/b45d2fab-6829-3615-9a21-b62aa474084d.mp4",
        alt: "硬币奔跑",
        title: "硬币奔跑 操作教程"
      },
      {
        image:
          "https://static.ouj.com/shoes/game/524449d2533f4ddf85eba2f7750ae8c0.jpg?x-oss-process=image/resize,w_240",
        video:
          "http://static.ouj.com/video/04d3c34a-7c29-34de-8e6f-fc33e7268274.mp4",
        alt: "功夫小羊",
        title: "功夫小羊 操作教程"
      },
      {
        image:
          "https://static.ouj.com/shoes/game/6e73083316d745c6af62970cfd5a4458.png?x-oss-process=image/resize,w_240",
        video:
          "http://static.ouj.com/video/f4991d52-238b-38c6-99da-6851bbb01368.mp4",
        alt: "剪刀石头布",
        title: "剪刀石头布 操作教程"
      },
      {
        image:
          "https://static.ouj.com/shoes/game/5279be54588a498785cc628ab1e3732e.jpg?x-oss-process=image/resize,w_240",
        video:
          "http://static.ouj.com/video/95c523ad-8315-3155-8d5e-e8e24d3fafe1.mp4",
        alt: "踢馆大师",
        title: "踢馆大师 操作教程"
      }
    ]);
    const videoVisible = ref(false);
    const cVideo = ref("");
    const is = ref(route.query.is);

    if (route.query.active) active.value = +route.query.active;

    const $_change = (index: number) => {
      active.value = index;
      if (is.value) {
        const href = window.location.href.replace(/\?\S+/g, "");
        window.location.href = href + `?is=1&active=${index}`;
      }
    };

    const $_navigate = (path: string) => {
      router.push({ path, query: { is: is.value } });
    };

    const $_open = (url: string) => {
      if (!is.value) {
        cVideo.value = url;
        videoVisible.value = true;
      } else {
        const href = window.location.href.replace(/\?\S+/g, "");
        window.location.href = href + "?is=1&active=1";
        window.open(url, "_self");
      }
    };

    return {
      active,
      change: $_change,
      gameLinks,
      navigate: $_navigate,
      videoVisible,
      cVideo,
      open: $_open
    };
  }
});
</script>
<style lang="scss" scoped>
.guide {
  min-height: 100vh;
  background-color: #f1f1f1;
  padding: 16px;
  box-sizing: border-box;
  &__header {
    .flex {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .tab {
      color: #999999;
      font-size: 18px;
      line-height: 2.5;

      &:last-child {
        margin-left: 42px;
      }
      &.active {
        color: black;
        font-weight: bold;
        position: relative;
        &::after {
          content: "";
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 26px;
          height: 4px;
          border-radius: 4px;
          background-color: #ffc400;
        }
      }
    }
    .tips {
      color: #ff5b1d;
      line-height: 1.5;
      .warning-fill {
        width: 18px;
        height: 18px;
      }
    }
  }
  &__body {
    .item {
      background-color: white;
      border-radius: 8px;
    }
    .icon {
      width: 22px;
      height: 22px;
    }
    .image {
      width: 44px;
      height: 44px;
      border-radius: 8px;
    }
  }
}
</style>
