<script setup lang="ts">
import { globalStore } from '@/stores'
import { useBindQrCode, XMessage } from '@/hooks'
import { $XXL, getVersion } from '@/utils'
import { storeToRefs } from 'pinia'
import { debounce } from 'lodash-es'
import sass from '@/utils/sass'

const OSS_URL = import.meta.env.VITE_OSS_URL
const bg = `url(${OSS_URL}/urm/header_bg.svg) 100%/cover no-repeat`
const equipmentBg = `url(${OSS_URL}/urm/system_setting_equipment_bg.svg) 100%/cover no-repeat`
const qr = sass.getQrCode()
const longArrow = `url(${OSS_URL}/urm/system_setting_equipment_long_arrow.svg)`

const { destroyDevTool } = globalStore()
const { system } = storeToRefs(globalStore())
const version = ref()
const { bindQrCode, loadingQrCode, initQrCode } = useBindQrCode()

const enterDebug = ref(0)
async function onClick(type: number) {
  switch (type) {
    case 1:
      destroyDevTool()
      break
    case 2:
      $XXL.forceRefresh()
      break
    case 3:
      $XXL.restartApp()
      break
  }
}
function onEnter() {
  if (system.value.debug) return
  enterDebug.value++
  if (enterDebug.value >= 10) {
    debug()
  }
}
const debug = debounce(
  () => {
    enterDebug.value = 0
    $XXL.showDebugPanel()
  },
  1000,
  {
    leading: true,
    trailing: false,
  },
)

onMounted(() => {
  initQrCode()
  version.value = getVersion()
})
</script>
<template>
  <div class="equipment_module hidden_scroll">
    <!--设备信息 -->
    <div class="equipment_info">
      <div
        class="header"
        :style="{
          background: bg,
        }"
      >
        设备信息
      </div>
      <div class="equipment_info_detail">
        <div class="item">
          <div class="label">序列号</div>
          {{ system.device.SN }}
        </div>
        <div class="item" @click="onEnter">
          <div class="label">系统版本号</div>
          {{ version }}#{{ getVersion(1) }}
        </div>
      </div>
      <div class="action">
        <Btn v-if="system.debug" width="170" height="66" tilt @click="onClick(1)">结束调试</Btn>
        <Btn width="170" height="66" tilt @click="onClick(3)">清理缓存</Btn>
      </div>
    </div>
    <!-- 绑定学习机 -->
    <div class="machine_info">
      <div
        class="header"
        :style="{
          background: bg,
        }"
      >
        请关注公众号并绑定学习机
      </div>
      <div class="about_binding">
        <div class="box">
          <div class="box_content">
            <span class="box_content_title">1、关注公众号</span>
            <span class="box_content_info"> 用微信扫描下方二维码<br />并关注公众号 </span>
            <div class="qr_border">
              <div>
                <img :src="qr" />
              </div>
            </div>
          </div>
        </div>
        <div class="arrow"></div>
        <div class="box">
          <div class="box_content">
            <span class="box_content_title">2、绑定学习机</span>
            <span class="box_content_info"> 进入公众号，点击【家长助手】<br />扫码绑定设备 </span>
            <div class="qr_border">
              <div v-loading="loadingQrCode">
                <img v-if="bindQrCode" :src="bindQrCode" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.equipment_module {
  padding: 4.5vh 0 0 14px;
  font-family: $font-special;
  width: 100%;
  height: 88vh;
  .header {
    width: 61.17vh;
    height: 12.5vh;
    font-size: 3.33vh;
    padding: 1.83vh 0 0 146px;
    line-height: 6vh;
    color: #ffffff;
  }

  .equipment_info {
    width: 100%;
    position: relative;
    .action {
      position: absolute;
      right: 0;
      top: 1.5vh;

      .x-button {
        margin-right: $space-3;
      }
    }

    .equipment_info_detail {
      margin-top: -3.83vh;
      width: 100%;
      padding: $space-6 $space-6 0 $space-8;
      border-radius: 3.33vh;
      background: $white-gradient;
      z-index: 99;

      .item {
        display: flex;
        align-items: center;
        padding-bottom: $space-6_h;
        color: $font-color;
        font-size: 2.67vh;
        line-height: 4vh;
        .label {
          width: 200px;
          margin-right: $space-7;
          color: $font-tag-color;
          font-size: 3.33vh;
          line-height: 5vh;
        }
      }
    }
  }
  .machine_info {
    margin: $space-6 0;
    width: 100%;

    .about_binding {
      margin-top: -3.83vh;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      width: 100%;
      height: 39.08vh;
      padding: 4vh 0;
      border-radius: 3.33vh;
      background: $white-gradient;
      // background: v-bind(equipmentBg);
      z-index: 99;
      box-sizing: border-box;

      .arrow {
        margin-top: 1vh;
        width: 168px;
        height: 2.17vh;
        background: v-bind(longArrow);
        background-size: 100%;
        background-repeat: no-repeat;
      }
      .box_content {
        width: 336px;
        height: 31.08vh;
        text-align: center;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        &_title {
          display: inline-block;
          font-family: $font-special;
          font-size: $font-size-7;
          line-height: 1.5em;
          color: rgba(10, 31, 19, 1);
        }
        &_info {
          margin: $space-1_h 0;
          display: inline-block;
          font-family: $font-cn;
          font-size: $font-size-3;
          line-height: 1.5em;
          color: rgba(75, 75, 104, 1);
          white-space: nowrap;
        }
        .qr_border {
          --w: 228px;
          width: var(--w);
          height: var(--w);
          position: relative;
          &::after {
            content: '';
            display: block;
            width: var(--w);
            height: var(--w);
            border: 0.33vh solid transparent; // 边框设置为透明
            border-radius: $radius-7;
            @include gradient(
              linear-gradient(180deg, #fff, #fff),
              linear-gradient(180deg, #fff01f, #4de75c)
            );
          }

          div {
            position: absolute;
            top: 0.33vh;
            left: 4px;
            width: var(--w);
            height: var(--w);
            :deep(.el-loading-mask) {
              border-radius: $radius-7;
            }
            img {
              border-radius: $radius-7;
              width: var(--w);
              height: var(--w);
              overflow: hidden;
              background: #fff;
              padding: $space-1;
            }
          }
        }
      }
    }
  }
}
</style>
