<template>
  <div class="lock-screen flex justify-center items-center">
    <div class="flex items-center">
      <img src="../assets/images/waiting.png" class="m-r-base" />
      <el-form ref="ruleFormRef">
        <el-form-item label="">
          <el-input class="tip-input" size="large" clearable value="老师幸苦了，请稍作休息" readonly></el-input>
        </el-form-item>
        <!-- <el-form-item>
          <el-button type="primary" size="large" class="m-l-base" @click="confirm">确定</el-button>
        </el-form-item> -->
      </el-form>
    </div>
    <el-progress type="circle" :percentage="percentage" class="progress" :width="80">
      <span style="color: #fff; font-size: 16px">{{ remainTime }}</span>
    </el-progress>
  </div>
</template>
<script lang="ts" setup name="PauseMarker">
import { ElInput, ElButton, ElForm, ElMessage, ElProgress } from 'element-plus'
import { onMounted, reactive, ref, computed } from 'vue'
// import StandardDialog from '@/components/shared/StandardDialog.vue'
import useFetch from '@/hooks/useFetch'
import useMainStore from '@/store/main'
const mainStore = useMainStore()
// const standardVisible = ref(false)
onMounted(() => {
  useFetch('pauseMarkStart').fetch()
})
// const confirm = () => {
//   standardVisible.value = true
// }
const percentage = computed<number>(() => {
  return (mainStore.markerPausedLimit / (2 * 60 * 1000)) * 100
})
const remainTime = computed(() => {
  return parseInt(mainStore.markerPausedLimit / 1000 + '')
})
</script>
<style lang="scss" scoped>
.lock-screen {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 3000;
  background: rgba(0, 0, 0, 0.9);
  .progress {
    position: absolute;
    right: 20px;
    top: 20px;
  }
  .tip-input {
    width: 200px;

    :deep(input.el-input__inner) {
      font-weight: bold;
      color: #333;
    }
  }
  img {
    height: 40px;
  }
}
</style>
