<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 class="bg-main u-m-t-50 btn-create" shape="circle" type="primary" @click="handleCreate">创建患者</u-button>

    <uni-popup ref="popupRef" background-color="transparent">
      <CreatePatient @on-scan="uploadImage" @on-cancel="onCancel" @on-confirm="onConfirm" />
    </uni-popup>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const leftTime = ref(6)
const popupRef = ref()
let timer: number | undefined

function init() {
  const localFirst = uni.getStorageSync(uni.$u.LOCAL_KEY.LOADED)
  if (localFirst) {
    openPage('patient-list')
    return
  }

  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 handleCreate() {
  if (timer) {
    clearInterval(timer)
    timer = undefined
  }
  popupRef.value.open()
}


function uploadImage() {
  uni.chooseImage({
    count: 1,
    sizeType: ['original'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'], //从相册选择
    success: function (res) {
      console.log(JSON.stringify(res.tempFilePaths));
    }
  });
}

function onCancel() {
  popupRef.value.close()
}

function onConfirm() {
  // TODO: 提交
  openPage('detail1')

  onCancel()
}

// 打开页面
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;
}
</style>
