<template>
  <div>
    <van-row class="padding">
      <van-col span="5">
        <div class="device_bg flex flex-direction align-center justify-center">
          <img
            src="https://img.shuimuai.com/web/phone.png"
            alt=""
            class="device_phone"
          />
          <text class="text-gray device_text"> 我的手机</text>
        </div>
      </van-col>
      <van-col span="3" offset="1">
        <div class="dot_container flex align-center">
          <div class="dot_wait">
            <img
              src="https://img.shuimuai.com/m_sign_gou%402x.png"
              alt=""
              class="moving_dot"
            />
          </div>
        </div>
      </van-col>
      <van-col span="5" offset="0">
        <div class="device_bg flex flex-direction align-center justify-center">
          <img
            src="https://img.shuimuai.com/web/sign_green.png"
            alt=""
            class="sign_green"
            v-if="device_bg == true"
          />
          <img
            src="https://img.shuimuai.com/web/sign_red.png"
            class="sign_green"
            alt=""
            v-else
          />
          <img
            src="https://img.shuimuai.com/web/brain.png"
            alt=""
            class="device_brain"
          />
          <text class="text-gray device_text second_device_text">
            已连接({{ device_power }}%)</text
          >
        </div>
      </van-col>
      <van-col span="3" offset="1">
        <div class="dot_container flex align-center">
          <div class="dot_wait">
            <img
              v-if="connect_toy == 1"
              src="https://img.shuimuai.com/web/dot.png"
              alt=""
              class="moving_dot"
              :class="{ moving: connect_toy == 1 }"
            />
            <img
              v-if="connect_toy == 2"
              src="https://img.shuimuai.com/m_sign_gou%402x.png"
              alt=""
              class="moving_dot"
            />
            <img
              v-if="connect_toy == 3"
              src="https://img.shuimuai.com/fail.png"
              alt=""
              class="moving_dot"
            />
          </div>
        </div>
      </van-col>
      <van-col span="5" offset="0">
        <div class="device_bg flex flex-direction align-center justify-center">
          <img :src="toy['img']" alt="" class="uav_toy" />
          <text class="text-gray device_text">
            <template v-if="connect_toy == 1 || connect_toy == 3">
              {{ toy["name"] }}
            </template>
            <template v-if="connect_toy == 2 || connect_toy == 4">
              {{ toy_sn }}
            </template>
          </text>
        </div>
      </van-col>
    </van-row>
    <!--        按钮组合-->
    <van-row gutter="6">
      <van-col span="8">
        <button class="cu-btn bg-red lg text-white" @click="change_status">
          <img
            src="https://img.shuimuai.com/m_duankainaohuan.png"
            class="cut_brain_icon"
            alt=""
          />
          <text class="cut_text">断开脑机</text>
        </button>
      </van-col>

      <van-col span="12" offset="1" v-if="connect_toy == 1">
        <van-row class="text-center">
          <text class="text-gray text-lg"> 连接中... </text>
        </van-row>
      </van-col>

      <!--      已经连接教具-->
      <div v-if="connect_toy == 2">
        <van-col span="8">
          <button
            class="cu-btn bg-red lg cu-btn-primary"
            @click="open_choose_toy"
          >
            <img
              src="https://img.shuimuai.com/m_xuanzewanju.png"
              alt=""
              class="cut_brain_icon"
            />
            <text class="cut_text">选择教具</text>
          </button>
        </van-col>

        <van-col span="8">
          <button
            class="cu-btn bg-red lg cu-btn-primary"
            @click="choose_pay_window"
            :disabled="is_started"
          >
            <img
              src="https://img.shuimuai.com/web/start_game_icon.png"
              alt=""
              class="cut_start_game_icon"
            />
            <text class="cut_text" style="padding: 0px">开始训练</text>
          </button>
        </van-col>
      </div>

      <!--      教具连接失败-->
      <div v-if="connect_toy == 3">
        <van-col span="8">
          <button
            class="cu-btn bg-red lg cu-btn-primary"
            @click="open_choose_toy"
          >
            <img
              src="https://img.shuimuai.com/m_xuanzewanju.png"
              alt=""
              class="cut_brain_icon"
            />
            <text class="cut_text">选择教具</text>
          </button>
        </van-col>

        <van-col span="8">
          <van-row class="text-center">
            <text class="text-gray text-lg"> 连接失败 </text>
          </van-row>
        </van-col>
      </div>

      <!--      教具连接中-->
      <div v-if="connect_toy == 4">
        <!--        <van-col span="8" style="visibility: hidden">-->
        <!--          <button class="cu-btn bg-red lg cu-btn-primary" @click="open_choose_toy">-->
        <!--            <img src="https://img.shuimuai.com/m_xuanzewanju.png" alt="" class="cut_brain_icon">-->
        <!--            <text class=" cut_text">选择教具</text>-->
        <!--          </button>-->
        <!--        </van-col>-->

        <van-col span="16">
          <button
            class="cu-btn bg-green lg"
            @click="to_playing"
            style="width: 100%"
          >
            <img
              src="https://img.shuimuai.com/web/start_game_icon.png"
              alt=""
              class="cut_start_game_icon"
            />
            <text class="cut_text" style="padding: 0px">游戏中</text>
          </button>
        </van-col>
      </div>
    </van-row>

    <!--  选择消费方式的窗口  -->

    <van-overlay :show="pay_window" @click="onClickHide" z-index="5">
      <div class="pay_type_window">
        <div class="pay_type_title padding">
          <text class="text-bold pay_type_title_text">选择消费方式</text>
        </div>

        <van-row gutter="11">
          <van-col span="11" offset="1">
            <div
              class="
                pay_type_item
                flex flex-direction
                justify-center
                align-center
              "
              @click.prevent="choose_pay(2)"
            >
              <view class="text-xl padding">
                <text class="text-white text-bold">消费时间</text>
              </view>
            </div>
          </van-col>
          <van-col span="11">
            <div
              class="
                pay_type_item
                flex flex-direction
                justify-center
                align-center
              "
              @click.prevent="choose_pay(1)"
            >
              <view class="text-xl padding">
                <text class="text-white text-bold">消费次卡</text>
              </view>
              <view class="text-sm">
                <text class="text-white">次卡时间为10分钟</text>
              </view>
            </div>
          </van-col>
        </van-row>
      </div>
      <img
        src="https://img.shuimuai.com/web/boy2.png"
        alt=""
        class="connected_boy2"
      />
    </van-overlay>
    <van-toast id="van-toast" />

    <van-popup
      :show="start_show"
      closeable
      position="bottom"
      custom-style="height: 100%"
    >
      <view>
        <text>游戏中界面</text>
      </view>
    </van-popup>

    <!-- 防止多次开始 -->
    <!-- <cover-view class="started_bg" v-show="is_started"></cover-view> -->
  </div>
</template>

<script>
import { timestamp } from "@/requests/user";
import { gameStart } from "@/requests/game";
import Toast from "../../../../static/vant/toast/toast";
import game_store from "../../../store/game";

let $this;
export default {
  name: "connected",
  props: [
    "connect_toy",
    "toy_id",
    "toy",
    "device_bg",
    "device_power",
    "toy_power",
    "toy_sn",
  ],
  data() {
    return {
      pay_window: false,
      //  使用类型 1次数 2时间 0未选择
      pay_type: 0,
      // 限制点击一次
      is_started: false,

      start_show: false,
    };
  },
  methods: {
    open_choose_toy() {
      $this.$emit("open_choose_toy", true);
    },
    //打开选择消费的选项框
    choose_pay_window() {
      if (!$this.device_bg) {
        Toast.fail("请佩戴好脑机开始训练");
        return false;
      }

      if (wx.getStorageSync("userinfo").level == 11) {
        $this.choose_pay(2);
      } else {
        $this.pay_window = true;
      }
    },
    //选择消费的时间或者次数
    choose_pay($event) {
      if (!$this.device_bg) {
        Toast.fail("请佩戴好脑机开始训练");
        return false;
      }

      let $toyId = $this.toy_id;
      if($this.toy_id == 8){
        $toyId = "0";
      }
      $this.pay_type = $event;
      let $params = {
        type: $event,
        device_id: $toyId,
        access_token: wx.getStorageSync("token"),
      };
      gameStart($params).then(
        (res) => {
          // 重置断开脑机的状态
          game_store.setters.setGameCloseStatus(0);
          let $data = res.data;
          let $res = $data.data;
          if ($data.code == 0) {
            $this.is_started = true;

            // 设置游戏模式
            game_store.setters.setMode($event);
            // 设置游戏状态为游戏中
            // 设置游戏记录id
            game_store.setters.setGameRecordId($res["game_record_id"]);

            //打开脑控
            $this.$bluetooth.sendControl();

            Toast.success($data.errmsg);
            game_store.setters.setPlayTime($res["play_time"]);
            game_store.setters.setOverPlayTime($res["play_time"]);
            setTimeout(() => {
              mpvue.navigateTo({
                url: "/pages/start/main",
                success() {
                  $this.$emit("gameStart", true);

                  // 设置游戏状态为游戏中
                  game_store.setters.setGameStatus(1);
                },
              });
            }, 800);

          } else {
            $this.is_started = false;
            Toast.fail($data.errmsg);
          }
        },
        (err) => {
          $this.is_started = false;
          console.log(err);
        }
      );
    },
    //点击隐藏
    onClickHide() {
      $this.pay_window = false;
    },
    // 前往正在玩的波动时间界面
    to_playing() {
      $this.$emit("gameStart", true);
      mpvue.navigateTo({
        url: "/pages/start/main",
      });
    },
    //修改连接状态
    change_toy_connect_status($status) {
      $this.$emit("change_toy_connect_status", $status);
    },
    change_status() {
      $this.$emit("change_status", 0);
    },
  },
  onShow() {
    $this.is_started = false;
  },
  created() {
    $this = this;
  },
};
</script>

<style scoped>
.uav_toy {
  width: 47px;
  height: 47px;
}

.cut_text {
  padding: 0px 5px;
  font-size: 11px;
}

.cut_start_game_icon {
  width: 21px;
  height: 23px;
}

/*消费类型窗口*/
.pay_type_window {
  width: 95%;
  height: 180px;
  background-image: url("https://img.shuimuai.com/web/dialog.png");
  background-position: center;
  background-size: 100% 100%;
  position: absolute;
  bottom: 225px;
  right: 10px;
}

.pay_type_title_text {
  color: #6b6b6b;
  font-size: 12px;
}

.pay_type_item {
  width: 100%;
  height: 100px;
  background-image: url("https://img.shuimuai.com/web/pay_type_bg.png");
  background-position: center;
  background-size: 100% 100%;
}

.connected_boy2 {
  width: 60px;
  height: 82px;
  position: absolute;
  right: 0px;
  bottom: 160px;
}

.started_bg {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0);
  z-index: 999;
}
</style>
