<template>
  <!--<el-config-provider :locale="locale">
    <router-view/>
  </el-config-provider>-->
  <el-button type="primary" @click="handleClick">click</el-button>
</template>

<script setup lang="ts">
  // @ts-ignore
  import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
  import { reactive } from 'vue'
  import { ElMessage } from 'element-plus'

  // 國際化配置
  const locale = reactive(zhCn)

  const handleClick = () => {
    // 間隔為30s
    const delay = 30000
    const key = 'ls_handle_click'
    let cache = getExpiredItem(key)
    if (cache <= 0) {
      setExpiredItem(key, Date.now(), delay)
    } else {
      const now = Date.now()
      const diff = delay / 1000 - (now - cache) / 1000
      ElMessage({
        showClose: true,
        message: `點擊過于頻繁,請${Math.floor(diff)}秒后嘗試!`,
        type: 'warning',
      })
      return
    }
    // 執(zhí)行按鈕功能(處理業(yè)務邏輯)
    handleAlert()
  }
  // 封裝可以設(shè)置過期時間的localStorage
  const setExpiredItem = (key, value, expires) => {
    const data = {
      value: value,
      expires: Date.now() + expires
    }
    window.localStorage.setItem(key, JSON.stringify(data))
  }

  // 封裝獲取有過期時間的localStorage(我們規(guī)定如果key到期則返回-1，如果沒有這個key就返回0)
  const getExpiredItem = (key) => {
    const value = window.localStorage.getItem(key)
    if (!value) {
      return 0
    }
    const data = JSON.parse(value)
    if (Date.now() > data.expires) {
      window.localStorage.removeItem(key)
      return -1
    }
    return data.value
  }

  // 按鈕功能
  const handleAlert = () => {
    ElMessage({
      showClose: true,
      message: 'this is a success message.',
      type: 'success',
    })
  }
</script>

<style scoped lang="scss">

</style>