<template>
  <view>
    <view class="Tips">（Android8.0+系统需开启定位）</view>
    <view class="Tipss"
      >温馨提示一：蓝牙打印机由于本身属性相对不稳定，如果出现连接失败的情况请多试几次，打印机每隔20秒会重连一次。</view
    >
    <view class="Tipss"
      >温馨提示二：由于蓝牙传输数据不稳定以及受其他外界环境因素等影响，如果在打印过程中出现打印错乱或打印信息缺失，请重新打印。</view
    >
    <view class="Tipss"
      >温馨提示三：当无法连接打印机时，请点击清除缓存并重新启动软件。</view
    >
    <view class="printer-root">
      <view class="left">
        <view>当前设备</view>
        <view>{{ printerName }}</view>
      </view>
      <view class="right">
        <button
          hover-class="active1"
          hover-start-time="0"
          hover-stay-time="10"
          class="btn"
          @tap="initBlue"
          :loading="isScanning"
        >
          搜索蓝牙
        </button>
        <button
          class="btn setState"
          @tap="setState"
          hover-start-time="0"
          hover-stay-time="10"
          hover-class="active2"
        >
          设备状态
        </button>
      </view>
    </view>

    <view class="btn-root">
      <button
        class="btn text-printer1"
        hover-start-time="0"
        hover-stay-time="10"
        hover-class="active4"
        @tap="clearPrinter"
      >
        清除缓存
      </button>

      <button
        class="btn text-printer"
        hover-start-time="0"
        hover-stay-time="10"
        hover-class="active3"
        @tap="testPrint"
      >
        测试打印
      </button>
    </view>

    <view class="printer-list">
      <view class="fjsb">附近打印设备</view>
      <view class="bt-list" v-show="setData.list.length != 0">
        <view
          v-for="(item, index) in setData.list"
          :key="index"
          class="bt-item"
        >
          <view class="singleLeft">
            <div class="dev-single-name">
              <div class="single">
                <div
                  :class="{ cgreen: item.RSSI >= 1 }"
                  style="height: 8rpx"
                ></div>
                <div
                  :class="{ cgreen: item.RSSI >= 2 }"
                  style="height: 12rpx"
                ></div>
                <div
                  :class="{ cgreen: item.RSSI >= 3 }"
                  style="height: 15rpx"
                ></div>
                <div
                  :class="{ cgreen: item.RSSI >= 4 }"
                  style="height: 19rpx"
                ></div>
                <div
                  :class="{ cgreen: item.RSSI >= 5 }"
                  style="height: 22rpx"
                ></div>
              </div>
              <div class="dev-name">
                <div>{{ item.name ? item.name : '未知设备' }}</div>
                <div>{{ item.deviceId }}</div>
              </div>
            </div>
          </view>
          <view class="singleRight">
            <view
              class="link-btn activelink"
              @tap="closeBLE(item.deviceId)"
              v-if="printerVID == item.deviceId"
              >取消</view
            >
            <view
              v-else
              class="link-btn"
              @tap="linkBLE(item.deviceId, item.name)"
              >选择</view
            >
          </view>
        </view>
      </view>
      <jx-empty v-show="setData.list.length == 0" title="未发现附近打印设备" />
    </view>
  </view>

  <!-- 公共组件 -->
  <jx-loading />
</template>

<script lang="ts" setup>
import printerSetUp from './printerSetUp'
const {
  printerName,      // 当前打印机名字
  blueToothChecked, // 动态监听蓝牙开关
  initBlue,         // 初始化蓝牙
  setData,          // 蓝牙列表
  linkBLE,          // 选择蓝牙
  setState,         // 设备状态
  closeBLE,         // 断开蓝牙
  testPrint,        // 测试打印
  printerVID,       // 打印机id
  isScanning,       // 是否正在搜索打印机
  clearPrinter,     // 清除缓存
} = printerSetUp()
</script>

<style lang="scss" scoped>
@import './printerSetUp.scss';
</style>