<template>
  <view class="window-box">
    <ly-back :showBack="false"/>
    <view class="search w100 h100 flex-center-center main">
      <view class="w60 h60 bg2 flex-center-center flex-wrap flex-dir-column">
        <view>请将卡片放入感应区</view>
        <view >
          <uv-image :src="pD.imgUrl+ '/index-card.png'" width="500px" height="306px"></uv-image>
        </view>
      </view>
      <view class="btn btn-primary" @click="search">扫码</view>
      <view class="btn btn-primary" @click="next">下一页</view>
      <!--      <view class="btn btn-primary" @click="toSelect">手动选择</view>-->
    </view>
  </view>
</template>

<script setup>
import {reactive} from "vue";
import {navTo, showToast} from "@/utils/app";
import {cradToStudentInfo} from "@/api/student";
import storage from "@/utils/storage";

const pD = reactive({
  title: '学生未激活',
  select: 0,
  selectMax: 1,
  imgUrl:'/static',
})
const queryForm = reactive({
  student_id: 0,
})
const search = async () => {
  const {code, msg, data} = await cradToStudentInfo({
    mac: 'BBBBBBBBBBBB'
  })
  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')
}
</script>

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