<template>
	<div>
  <el-input v-model="input" style="width: 125px;margin-right: 10px;" placeholder="請(qǐng)輸入驗(yàn)證碼" />
   <el-button type="primary" :disabled="countdownInfo.isDisabled" @click="countdown() " style="width:105px;">{{ countdownInfo.buttonName }}</el-button>
	</div>
</template>


<script setup>
    import { ElMessage } from 'element-plus';
	import { ref,watch,onMounted } from 'vue';

      //倒計(jì)時(shí)信息
    const countdownInfo = ref({
    second: 60,    //倒計(jì)時(shí)秒
    buttonName: "獲取驗(yàn)證碼", //按鈕名稱
    isDisabled: false        //按鈕是否有效，默認(rèn)有效
   })  
    
    //生命周期函數(shù)
    onMounted(() => {
     //獲取localStorage里保存的，倒計(jì)時(shí)字符串信息，并解析為JSON對(duì)象
    var localCountdownInfo = JSON.parse(localStorage.getItem("countdownInfo"));
    //判斷獲取的信息是否為空，為空，說(shuō)明里面沒有保存數(shù)據(jù)，就不賦值到countdownInfo中
    if (localCountdownInfo) {
        countdownInfo.value =localCountdownInfo;
        //不為空時(shí)，判斷倒計(jì)時(shí)秒數(shù)，是否為60，不是就直接調(diào)用倒計(jì)時(shí)函數(shù)（說(shuō)明沒有倒計(jì)時(shí)完），執(zhí)行倒計(jì)時(shí)。
        if (countdownInfo.value.second !== 60) {
            countdown()  //調(diào)用倒計(jì)時(shí)函數(shù)
        }
    }
})


// 定義倒計(jì)時(shí)函數(shù)
const countdown=()=> {
    countdownInfo.value.isDisabled = true;   //按鈕無(wú)效
            //開始倒計(jì)時(shí)
            let interval = window.setInterval(function () {
                countdownInfo.value.buttonName =  countdownInfo.value.second + "秒后重新獲取"; //重新設(shè)置按鈕名稱
                countdownInfo.value.second = countdownInfo.value.second - 1;   //倒計(jì)時(shí)減
                //判斷是否減到了0，為0就恢復(fù)默認(rèn)信息，并停止倒計(jì)時(shí)
                if (countdownInfo.value.second <=0) {
                    countdownInfo.value.buttonName = "獲取驗(yàn)證碼";
                    countdownInfo.value.second = 60;
                    countdownInfo.value.isDisabled = false;
                    window.clearInterval(interval);
                }
            }, 1000);  //一秒執(zhí)行一次

}

//監(jiān)聽對(duì)象，數(shù)據(jù)是否發(fā)生改變，改變就進(jìn)行重新保存
watch(countdownInfo, (newValue) => {
    var JSONSTR = JSON.stringify(newValue);  //將JSON轉(zhuǎn)為字符串
    localStorage.setItem("countdownInfo", JSONSTR)  //將其保存到localStorage中
}, {
    deep: true   //深度監(jiān)聽
})
</script>