<template>
    <div class="main">
        <el-card>
        <HeaderView title1="英雄榜" title2="投票时间"/>
        <div>
            <div >
      <span style="margin-right: 32px;">投票时间</span>
      <el-date-picker
        v-model="value2"
        type="daterange"
        unlink-panels
        range-separator="-"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        size="large"
      
      />
    </div>
         </div>
         <div style="display: flex;justify-content: center;margin-top: 32px ;margin-bottom: 32px;padding:32px; " >
          
            <el-button size="large" @click="puttime('温馨提示','确定要取消输入吗')">取消</el-button>
            <el-button type="primary" size="large" @click="puttime('温馨提示','确定要保存吗')">保存</el-button>
         </div>
         </el-card>
    </div>
</template>
<script setup>
import request from "../api/request.js";
import dayjs from "dayjs"
import { ElMessageBox ,ElMessage} from 'element-plus'
const value1 = ref([])
const value2 = ref([])

const times = reactive({
start_time: "",
end_time: "",
})

onMounted(() => {
    getindexs()


})
const getindexs = () => {
    request.gettime().then(res => {
        
       
        value2.value.push(new Date(res.data.data.start_time))
        value2.value.push(new Date(res.data.data.end_time))
        value1.value.push(new Date(res.data.data.start_time))
        value1.value.push(new Date(res.data.data.end_time))
    })
}
let rescode,message;
const puttime = (titles,spans) => {
  ElMessageBox({
    title: titles,
    message: h('p', null, [
      h('span', null, spans),
     
    ]),
    showCancelButton: true,
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    beforeClose: (action, instance, done) => {
      if (action === 'confirm') {
        instance.confirmButtonLoading = true
        instance.confirmButtonText = '提交中...'
        if('确定要取消输入吗'==spans){
    
            value2.value=[]
            value2.value.push(value1.value[0])
            value2.value.push(value1.value[1])
          
            done()
            instance.confirmButtonLoading = false
        }
        else{
            times.start_time= dayjs(value2.value[0]).format('YYYY-MM-DD HH:mm:ss') 
    times.end_time=dayjs(value2.value[1]).format('YYYY-MM-DD HH:mm:ss') 
    console.log(times)
    request.updatetime(times).then(res => {
        done()
        instance.confirmButtonLoading = false
        rescode = res.data.code
        message = res.data.message
    })
           
        }
        
       
      
      } else {
        
        done()
      }
    },
  }).then((action) => {
    if('确定要取消输入吗'==spans)
  {
    ElMessage({
      type: 'info',
      message: '已取消输入',
    })
  }
  else
  {
    if(rescode!=200)
  {
    ElMessage.error(message);
  
  }
  else
  {
   
    ElMessage({
      type: 'info',
      message: '提交成功',
    })
  }
    
  }
   
  })
}


</script>

<style scoped>
.main {
    text-align: center;
    background: white;
    height: 100%vh;

}
</style>