<template>
  <view class="relative column align-center justify-center full-height bg-white">
    <u-button class="last-time" shape="circle" size="mini" :plain="true" @click="openPage('patient-list')">
      跳过 {{ leftTime }}
    </u-button>

    <image class="loading-img" src="@/static/images/loading-img.png" mode="scaleToFill" />

    <u-button v-show="showCreateBtn" class="bg-main u-m-t-50 btn-create" shape="circle" type="primary" @click="openPage('detail1')">
      创建患者
    </u-button>

    <uni-icons type="gear-filled" color="#e9f0ff" size="32" class="icon-setting" @click="openSetting" />

    <uni-popup ref="popupRef" background-color="transparent">
      <SettingPad @on-confirm="onSettingCancel" @on-cancel="onSettingCancel" />
    </uni-popup>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useServiceStore } from '@/store/modules/service';

const service = useServiceStore()
const leftTime = ref(6)
const popupRef = ref()
let timer: number | undefined
const showCreateBtn = ref(true)

function init() {
  service.syncDevice()

  const localFirst = uni.getStorageSync(uni.$u.LOCAL_KEY.LOADED)
  if (localFirst) { showCreateBtn.value = false }

  uni.setStorageSync(uni.$u.LOCAL_KEY.LOADED, 'true')

  timer = setInterval(() => {
    if (leftTime.value === 0) {
      clearInterval(timer)
      timer = undefined
      openPage('patient-list')
      return
    }
    leftTime.value -= 1
  }, 1000)
}

// 创建患者
function openSetting() {
  if (timer) {
    clearInterval(timer)
    timer = undefined
  }
  popupRef.value.open()
}

// 设置平板信息的取消 确认 退出loading页
function onSettingCancel() {
  popupRef.value.close()
  openPage('patient-list')
}

// 打开页面
function openPage(name) {
  uni.$u.openPage(name, true)
}

init()
</script>

<style lang="scss" scoped>
.last-time {
  position: absolute;
  right: 48rpx;
  top: 68rpx;
}

.loading-img {
  width: 196*3rpx;
  height: 215*3rpx;
  margin-bottom: 50rpx;
}

.btn-create {
  width: 560rpx;
  height: 100rpx;
}

.icon-setting {
  position: fixed;
  right: 40px;
  bottom: 30px;
}
</style>
