<template>
  <view class="window-box">
    <ly-back :showBack="false"/>
    <view class="search w100 h100 flex-center-center main flex-dir-column">
      <!--      <view class="w60 h60 bg2 flex-center-center flex-wrap flex-dir-column">-->
      <!--        <view>请将卡片放入感应区</view>-->
      <!--        <view>-->
      <!--          <uv-image :src="pD.imgUrl+ '/index-card.png'" height="306px" width="500px"></uv-image>-->
      <!--        </view>-->
      <!--      </view>-->
      <!--      <view class="flex-start-center" @click="clearList">-->
      <!--        卡号：-->
      <!--        &lt;!&ndash;        <view class="col-checked">{{ pD.value1 || '&#45;&#45;' }}</view>&ndash;&gt;-->
      <!--        <view class="btn btn-danger" @click="clearList">清空</view>-->
      <!--      </view>-->
      <!--      <view class="flex-dir-column f-u-21" style="max-height: 50vh;overflow-y: auto">-->
      <!--        <view v-for="(item,index) in list" :key="index" class="">-->
      <!--          {{ item.time }}:{{ item.str }}-->
      <!--        </view>-->
      <!--      </view>-->
      <!--      <view class="btn btn-primary" @click="search">扫码</view>-->
      <!--      <view class="btn btn-primary" @click="next">下一页</view>-->
      <view class="img-saoma-box">
        <text class="img-saoma-text">请将卡片放进感应区</text>
        <img src="@/static/image/bmi/img_saoma.png" alt="" class="img-saoma">
      </view>
      <view class="btn btn-primary hand-select" @click="toSelect">手动选择</view>
    </view>
  </view>
</template>

<script setup>
import {getCurrentInstance, inject, onActivated, onBeforeUnmount, onMounted, reactive, ref} from "vue";
import {onShow, onHide} from "@dcloudio/uni-app";
import {navTo, showToast} from "@/utils/app";
import {cradToStudentInfo} from "@/api/student";
import storage from "@/utils/storage";
import {getAllMethods, logs, sleep} from "@/utils/util";
import * as ASCIIUtils from "@/uni_modules/wrs-js-modbusCRCHex/js_sdk/wrs-ASCIIUtils";
import * as HexUtils from "@/uni_modules/wrs-js-modbusCRCHex/js_sdk/wrs-HexUtils";
import {orderToData} from "@/utils/ble/hex";
import * as dayjs from "@/utils/dayjs";

const $machine = inject('$machine')

const pD = reactive({
  title: '学生未激活',
  select: 0,
  selectMax: 1,
  imgUrl: '/static',
  value1: '',
})
const queryForm = reactive({
  student_id: 0,
})
const list = ref([])
const clearList = async () => {
  list.value = []
}
const addList = async (data) => {
  list.value.push(data)
}
const search = async (mac) => {
  // const {code, msg, data} = await cradToStudentInfo({
  //   mac
  // })
  // if (code === 1) {
  //   queryForm.student_id = data.student.id
  //   storage.setKey(`student-${data.student.id}`)
  //   navTo('pages/task/info', {
  //     id: queryForm.student_id,
  //   })
  // } else {
  //   showToast(msg)
  // }
  navTo('pages/task/info')
}

const next = () => {
  navTo('pages/task/info', {
    id: queryForm.student_id,
  })
}

const toSelect = () => {
  navTo('pages/classes/select')
}

const scanWatch = (value) => {
  // console.log('scanWatch123', value)
  // pD.value1 = value
  // search(value)
  addList({
    time: dayjs().format('YYYY-MM-DD HH:mm:ss:SSS'),
    str: value
  })
}

const setWatch = (open = false) => {
  if (open) {
    $machine.scan().setWatch(scanWatch)
  } else {
    $machine.scan().setWatch(null)
  }
}


// 挂载完成之后
onMounted(async (r) => {
})

onShow(async () => {
  setWatch(true)
})

onHide(async () => {
  setWatch()
})
// 页面卸载前
onBeforeUnmount(() => {
  setWatch()
})

// 激活页面时
onActivated(async () => {
})
</script>

<style lang="scss" scoped>
.main {
  //background-image: url('static/image/index-bg.png');
  width: 100%;
  height: 100%;
  background-position: center center;
  background-size: 100%;
  background-repeat: no-repeat;
}

.bg2 {
  //background-image: url('static/image/index-bg2.png');
  width: 80%;
  height: 80%;
  background-position: center center;
  background-size: 100%;
  background-repeat: no-repeat;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;

  &-label {
    margin-right: 50rpx;
  }
}

.img-saoma-box{
  display: flex;
  flex-direction: column;
}
.img-saoma-text{
  text-align: center;
  font-weight: bold;
  font-size: 35upx;
  color: #2F3C42;
  line-height: 41upx;
  margin-bottom: 40upx;
}
.img-saoma{
  width: 520upx;
  height: 400upx;
}
.hand-select{
  width: 480upx;
  border-radius: 21upx;
}
</style>
