<template>
  <view class="page">
    <BackBar title="一键锁屏" />
    <view class="title">设备当前状态</view>
    <view class="status">{{
      screenControlInfo?.lockFlag === 1 ? '设备锁屏中' : '正在使用中'
    }}</view>
    <image
      :src="
        screenControlInfo?.lockFlag === 1
          ? `${OSS_URL}/urm/screen_unlock.png`
          : `${OSS_URL}/urm/screen_lock.png`
      "
      mode="scaleToFill"
      class="screen_btn"
      @click="handleMachineScreen"
    />
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getDeviceScreenControlApi, lockDeviceScreenApi } from '@/api';
const OSS_URL = import.meta.env.VITE_OSS_HOST;
const simSerialNumber = ref();
const screenControlInfo = ref<any>({});

async function handleMachineScreen() {
  try {
    uni.showLoading({
      title: `${screenControlInfo?.value.lockFlag === 1}` ? '解屏中...' : '锁屏中...',
    });
    const { data } = await lockDeviceScreenApi(simSerialNumber.value);
    fetchDeviceScreen();
  } finally {
    uni.hideLoading();
  }
}
async function fetchDeviceScreen() {
  try {
    uni.showLoading({
      title: '加载中...',
    });
    const { data } = await getDeviceScreenControlApi(simSerialNumber.value);
    screenControlInfo.value = data ? data : {};
  } finally {
    uni.hideLoading();
  }
}

onLoad(option => {
  simSerialNumber.value = option.simSerialNumber;
  fetchDeviceScreen();
});
</script>

<style lang="scss" scoped>
.page {
  display: flex;
  flex-direction: column;
  align-items: center;

  .title {
    padding: 50rpx 0 0 0;
    color: #a9aab5;
    font-size: 34rpx;
    line-height: 48rpx;
    text-align: center;
  }
  .status {
    margin: 20rpx 0 50rpx 0;
    color: #333333;
    font-size: 34rpx;
    font-weight: 500;
    line-height: 48px;
    text-align: center;
  }
  .screen_btn {
    width: 400rpx;
    height: 400rpx;
  }
}
</style>
