<template>
  <view class="page">
    <BackBar title="设备截屏" />
    <template v-if="!network">
      <view class="network_err">
        <image class="warn_icon" :src="`${OSS_URL}/iconfont/warn_icon.png`" mode="" />
        <text class="text">设备目前处于关机/未联网/网络不畅通状态<br />设备截屏暂时无法使用</text>
      </view>
    </template>
    <template v-else>
      <view v-if="screenshoting" class="shoting">
        <view class="title">连接设备截屏中…</view>
        <view class="screen_shot">
          <image class="phone" :src="`${OSS_URL}/urm/home_screen_phone.png`" mode="" />
          <view class="loading"> <LoadIcon /></view>

          <image class="pingban" :src="`${OSS_URL}/urm/home_screen_pingban.png`" mode="" />
        </view>
        <view class="friendly">
          <text class="friendly_title">温馨提示：</text>
          <text class="friendly_text"
            >考虑孩子的隐私，在使用设备截屏过程中，最好不要让孩子看到哦～</text
          >
        </view>
      </view>
      <view v-else class="shot_result">
        <text class="time"
          >截图时间：{{
            screenInfo?.screenshotTime ? screenInfo?.screenshotTime.replace(/-/g, '.') : ''
          }}</text
        >
        <image :src="screenInfo.imageUrl" class="pic" mode="aspectFill" @click="previewImageFun" />
      </view>
    </template>
    <button class="footer-btn" @click="lookScreenShot">查看历史截屏</button>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { onLoad, onShow, onUnload } from '@dcloudio/uni-app'
import LoadIcon from './loadIcon.vue'
import router from '@/router/router'
import { socket } from '@/store'

const sockets = socket()
const OSS_URL = import.meta.env.VITE_OSS_HOST
const simSerialNumber = ref()
const network = ref(true)
const screenshoting = ref(true)
const screenInfo = ref<any>({})
function lookScreenShot() {
  router.navigateTo({
    path: '/pages/home/DesktopPreview/historyScreenShot',
    query: { simSerialNumber: simSerialNumber.value }
  })
}
function previewImageFun(e: any) {
  uni.previewImage({
    urls: [screenInfo?.value.imageUrl],
  })
}

function socketMsgFun(e: any) {
  if (e.code === 500) {
    network.value = false
  } else {
    network.value = true
    screenshoting.value = false
    screenInfo.value = e.msg
  }
}

onLoad(option => {
  simSerialNumber.value = option.simSerialNumber
})
onMounted(() => {
  uni.$on('socketMsg', data => {
    socketMsgFun(data)
  })
})
onShow(() => {
  sockets.initSocket(simSerialNumber.value)
  sockets.socketSend({ type: 'desktopPreview', simSerialNumber: simSerialNumber.value })
})
onUnload(() => {
  uni.$off('socketMsg')
})
</script>

<style lang="scss" scoped>
.page {
  padding: 0 30rpx;
  color: #333;
  .network_err {
    padding: 120rpx 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    .warn_icon {
      width: 120rpx;
      height: 120rpx;
    }
    .text {
      display: block;
      margin: 90rpx 0 100rpx 0;
      font-size: 30rpx;
      font-weight: 400;
      line-height: 45rpx;
      text-align: center;
      color: #666;
    }
  }
  .shoting {
    padding: 50rpx 0 0 0;
    .title {
      margin-bottom: 50rpx;
      text-align: center;
      font-weight: 500;
      font-size: 34rpx;
      line-height: 48rpx;
    }
    .screen_shot {
      display: flex;
      align-items: center;
      justify-content: center;
      .phone {
        width: 128rpx;
        height: 250rpx;
      }
      .loading {
        width: 62rpx;
        margin: 0 62rpx;
        height: 14rpx;
      }
      .pingban {
        width: 336rpx;
        height: 250rpx;
      }
    }
    .friendly {
      padding: 30rpx;
      margin: 120rpx 0 100rpx 0;
      background: #ffffff;
      border-radius: 20rpx;
      font-size: 30rpx;
      line-height: 45rpx;
      text-align: left;
      &_title {
        margin-bottom: 20rpx;
        font-weight: 500;
        display: block;
        color: #333;
      }
      &_text {
        color: #666;
        display: block;
      }
    }
  }
  .shot_result {
    padding: 30rpx 0 0 0;
    .time {
      font-size: 28rpx;
      line-height: 45rpx;
      text-align: left;
      color: #a9aab5;
    }
    .pic {
      margin: 10rpx 0 100rpx 0;
      width: 100%;
      height: 430rpx;
      border-radius: 20rpx;
    }
  }

  .footer-btn {
    width: 100%;
    height: 90rpx;
    border-radius: 20rpx;
    background: #615dff;
    font-size: 30rpx;
    line-height: 90rpx;
    color: #fff;
    font-weight: 500;
  }
}
</style>
