<template>
  <view>
    <view class="title">摸亮触摸屏</view>
    <image
      src="https://oss-lock.xhjcn.ltd/mp/icon_lock_touch_screen.png"
      mode="aspectFill"
      class="icon"
    ></image>
    <view class="tips">摸亮触摸屏，锁进入可添加状态，点击下一步</view>
    <view @click="toSearchDevice" class="button">下一步</view>
  </view>
</template>

<script setup>
  import { onLoad } from '@dcloudio/uni-app'
  import { ref } from 'vue'
  import { useBluetoothStore } from '@/stores/bluetooth'
  import { useBasicStore } from '@/stores/basic'

  const bluetoothStore = useBluetoothStore()
  const basicStore = useBasicStore()

  const type = ref('bluetooth')

  onLoad(options => {
    if (options.type) {
      type.value = options.type
    }
  })

  const toSearchDevice = async () => {
    if (bluetoothStore.bluetoothStatus !== 0) {
      bluetoothStore.getBluetoothStatus()
      return
    }
    let result = true
    if (!bluetoothStore.isInitBluetooth) {
      result = await bluetoothStore.initAndListenBluetooth()
    }
    if (result) {
      if (type.value === 'bluetooth') {
        basicStore.routeJump({
          type: 'redirectTo',
          name: 'searchDevice'
        })
      } else if (type.value === 'wifi') {
        basicStore.routeJump({
          type: 'redirectTo',
          name: 'distributionNetwork'
        })
      }
    } else {
      bluetoothStore.checkSetting()
    }
  }
</script>

<style lang="scss" scoped>
  .title {
    margin-top: 200rpx;
    font-size: 36rpx;
    font-weight: bold;
    text-align: center;
  }

  .icon {
    width: 300rpx;
    height: 300rpx;
    margin: 150rpx 225rpx;
  }

  .tips {
    margin-bottom: 100rpx;
    font-size: 28rpx;
    font-weight: bold;
    color: #999;
    text-align: center;
  }

  .button {
    width: 600rpx;
    height: 100rpx;
    margin: 0 auto;
    font-size: 36rpx;
    line-height: 100rpx;
    color: #fff;
    text-align: center;
    background-color: #63b8af;
    border-radius: 50rpx;
  }
</style>
