<template>
  <view class="img">
    <image src="https://img.51miz.com/Element/00/77/75/70/b433028a_E777570_00fd6980.png" class="img-center"></image>
  </view>
  <view class='content_box'>
    <view class="pay_box">
      <button class="btn" type="primary" @click="initBlue">开启蓝牙</button>
      <button class="btn" type="primary" @click="findBlue">搜寻附近蓝牙</button>
    </view>
    <view>
      <scroll-view scroll-y class="box">
        <view class="itemContent" v-for="(item, index) in bleDevs" :key="index" @click="connectBlue(item)">
          <view>
            <text>设备名称: {{ item.name }}</text>
          </view>
          <view>
            <text>设备id: {{ item.deviceId }}</text>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      bleDevs: [], // 蓝牙列表
    };
  },
  methods: {
    // 初始化蓝牙设备
    initBlue() {
      let vm = this;
      uni.openBluetoothAdapter({ // 初始化蓝牙、判断是否开启蓝牙
        success: function (res) {
          vm.getState();
        },
        fail: res => {
          uni.showModal({
            title: '提示',
            content: '蓝牙初始化失败，请到设置打开蓝牙',
            showCancel: false
          });
        }
      });
    },
    // 获取本机蓝牙适配器状态
    getState() {
      uni.getBluetoothAdapterState({ // 获取本机蓝牙适配器状态
        success(res) {
          uni.showModal({
            title: '提示',
            content: '蓝牙初始化成功，获取本机蓝牙适配器状态成功',
            showCancel: false
          });
        },
        fail(err) {
          uni.showModal({
            title: '提示',
            content: '查看手机蓝牙是否打开',
            showCancel: false
          });
        }
      });
    },
    // 获取蓝牙设备信息
    findBlue() {
      var vm = this;
      uni.showLoading({
        title: '正在加载',
        icon: 'loading',
      });
      uni.startBluetoothDevicesDiscovery({
        interval: 0, // 上报设备的间隔
        allowDuplicatesKey: false, // 是否允许重复上报
        success: (res) => {
          // 获取所有的蓝牙设备列表
          vm.getBlue();
        },
        fail: err => {
          uni.showToast({
            title: '搜索蓝牙设备失败',
            icon: 'none',
            duration: 1000
          });
        }
      });
    },
    // 获取设备列表
    getBlue() {
      var vm = this;
      setTimeout(() => {
        uni.hideLoading();
        uni.getBluetoothDevices({
          success: function (res) {
            // 过滤掉name为未知设备的设备
            var bluetoothArr = [];
            res.devices.forEach((obj) => {
              if (obj.name !== "未知设备") {
                bluetoothArr.push(obj);
              }
            });
            vm.bleDevs = bluetoothArr;
          },
          fail: function () {
            uni.showToast({
              title: '搜索蓝牙设备失败',
              icon: 'none',
              duration: 1000
            });
          },
        });
      }, 2000);
    },
    // 连接蓝牙设备
    connectBlue(item) {
      let vm = this;
      uni.showLoading({
        title: "连接中，请稍等",
        mask: true,
      });
      uni.createBLEConnection({
        deviceId: item.deviceId, // 设备的 id
        success(res) {
          console.log("连接蓝牙成功", res);
          uni.setStorageSync("deviceId", item.deviceId); // 存储设备ID
          uni.hideLoading();
          uni.showToast({
            title: item.name + "蓝牙连接成功",
            icon: "none",
            duration: 1000
          });
          // 跳转到打印页面
          uni.navigateTo({
            url: '/pages/printTicket/printTicket',
          });
        },
        fail(res) {
          uni.hideLoading();
          uni.showToast({
            title: item.name + "蓝牙连接失败",
            icon: "none",
          });
        }
      });
    },
  }
};
</script>

<style lang="scss" scoped>
.img {
  width: 150px;
  height: 150PX;
  margin: 0 auto;
  background-color: #007aff;
}
.img-center {
  width: 100%;
  height: 100%;
}
.blueList {
  width: 100%;
  height: 100px;
  background-color: #ffd5de;
}
.itemContent {
  width: 80%;
  height: 60px;
  border-radius: 10px;
  background-color: #4095e5;
  text-align: center;
  margin: 15px auto;
  line-height: 30px;
}
.content_box {
  width: 100%;
  .pay_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin-top: 30rpx;
  }

  .btn {
    background-color: #007aff;
    box-sizing: border-box;
    font-size: 26rpx;
    border-radius: 30rpx;
    width: 28%;
    margin-top: 10px;
  }
}
</style>