<template>
  <view class="page">
    <view class="content-box">
      <view class="progress-box">
        <l-circle class="progress" :size="ringWidth" :duration="600" :trail-width="trailWidth" trail-color="#DDDDDD" :stroke-width="strokeWidth" :stroke-color="strokeColors" :percent="arcProgress" />
        <view class="status">
          <view>{{ deviceStatus }}</view>
        </view>
      </view>
      <view>设备 ID: {{ deviceId }}</view>
      <view>RSSI: {{ deviceRssi }}</view>
      <input class="input" placeholder="请输入密码" v-model="devicePassword" />
      <view :class="{ button: true, selected: operationType === 'unlock' }" @click="onUnlock">开锁</view>
      <view :class="{ button: true, selected: operationType === 'lock' }" @click="onLock">关锁</view>
      <view :class="{ button: true, selected: operationType === 'setKey' }" @click="onSetKey">设置密码</view>
      <view :class="{ button: true, selected: operationType === 'writeCustomData' }" @click="onWriteCustomData">写自定义数据</view>
      <view :class="{ button: true, selected: operationType === 'readCustomData' }" @click="onReadCustomData">读自定义数据</view>
    </view>
  </view>
</template>

<script setup>
  import { reactive, ref } from "vue";
  import { onShow } from "@dcloudio/uni-app";
  import { WxNFCHelper, CustomDataConfig } from "@/jssdk/NFCSDK-shared-nfc-kmp.mjs";
  
  const deviceId = ref("--");
  const deviceRssi = ref("--");
  const devicePassword = ref("123456")
  const deviceStatus = ref("");
  const operationType = ref(null);
  const arcProgress = ref(0);
  const trailWidth = uni.upx2px(30);
  const strokeWidth = uni.upx2px(30);
  const strokeColors = ["purple", "purple"];
  const ringWidth = uni.upx2px(240 + 60 * 2).toFixed(0);
  
  const nfcHelper = new WxNFCHelper({
    discovered(id, isNew, rssi) {
      deviceId.value = id;
      deviceRssi.value = rssi;
      arcProgress.value = 0;
    },
    finished() {
      operationType.value = null;
      deviceId.value = "--";
      deviceRssi.value = "--";
      deviceStatus.value = "";
      arcProgress.value = 0;
    },
    charging(res, level) {
      if (res === "OK") {
        deviceStatus.value = `充电中 (${level})`;
        arcProgress.value = Math.min(level * 0.75, 75);
      } else if (res === "UNAUTHORIZED") {
        deviceStatus.value = "验证失败";
      } else if (res === "ERROR") {
        deviceStatus.value = "充电失败";
      }
    },
    controlling(res, progress, ctrl) {
      if (res === "OK") {
        let keyword = "";
        if (operationType.value === "unlock") {
          keyword = "开锁";
        } else if (operationType.value === "lock") {
          keyword = "关锁";
        }
        deviceStatus.value = `${keyword}成功`;
        arcProgress.value = 100;
      } else if (res === "UNAUTHORIZED") {
        deviceStatus.value = "验证失败";
      } else if (res === "ERROR") {
        deviceStatus.value = `${keyword}失败`;
      }
    },
    setKey(res, password) {
      if (res === "OK") {
        deviceStatus.value = "设置密码成功";
      } else if (res === "UNAUTHORIZED") {
        deviceStatus.value = "验证失败";
      } else if (res === "ERROR") {
        deviceStatus.value = "设置密码失败";
      }
    },
    customData(res, config, data) {
      let keyword = "";
      if (config.name === "WRITE") {
        keyword = "写数据";
      } else if (config.name === "READ") {
        keyword = "读数据";
      }
      if (res === "OK") {
        deviceStatus.value = `${keyword}成功`;
        console.log(Array.from(data));
      } else if (res === "ERROR") {
        deviceStatus.value = `${keyword}失败`;
      }
    }
  });

  const onUnlock = () => {
    nfcHelper.unlock(devicePassword.value);
    operationType.value = "unlock";
  };

  const onLock = () => {
    nfcHelper.lock(devicePassword.value);
    operationType.value = "lock";
  };
  
  const onSetKey = () => {
    nfcHelper.setKey(devicePassword.value, "123456");
    operationType.value = "setKey";
  };
  
  const onWriteCustomData = () => {
    let data = new Array(56).fill(0).map((_, index) => index);
    data = Int8Array.from(data);
    nfcHelper.customDataOperation(CustomDataConfig.WRITE, data);
    operationType.value = "writeCustomData";
  };
  
  const onReadCustomData = () => {
    nfcHelper.customDataOperation(CustomDataConfig.READ, null);
    operationType.value = "readCustomData";
  };
  
  onShow(() => {
    nfcHelper.start();
  });
</script>

<style lang="less" scoped>
  .page {
    width: 100%;
    height: 100%;
    padding: 32rpx;
    color: #333333;
    box-sizing: border-box;
    
    .progress-box {
      position: relative;
      
      .status {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .content-box {
      height: 100%;
      padding-top: 40rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      row-gap: 20rpx;
      
      input {
        width: 100%;
        height: 80rpx;
        padding: 0rpx 20rpx;
        border: 2rpx solid #CCCCCC;
      }

      .button {
        width: 100%;
        text-align: center;
        padding: 20rpx;
        background-color: lightgray;
        border-radius: 10rpx;

        &.selected {
          color: white;
          background-color: purple;
        }
      }
    }
  }
</style>