<template>
  <el-dialog title="延迟缴费" v-model="visible" width="300px" height="50%" @close="handleClose">
    <el-date-picker 
      v-model="delayPayTime" 
      format="YYYY-MM-DD HH:mm:ss" 
      value-format="YYYY-MM-DD HH:mm:ss"
      filterable 
      clearable 
      type="datetime"
      style="width: 100%"
    ></el-date-picker>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关 闭</el-button>
        <el-button @click="handleSave" type="primary">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { updateInfo } from '/@/api/recruit/recruitstudentsignup'

export default {
  name: 'DelayPayTimeDialog',
  emits: ['refresh'],
  setup(props, { emit }) {
    const visible = ref(false)
    const delayPayTime = ref('')
    const currentId = ref('')

    const init = (row) => {
      delayPayTime.value = ''
      currentId.value = row.id
      if (row.delayPaymentTime) {
        delayPayTime.value = row.delayPaymentTime
      }
      visible.value = true
    }

    const handleSave = () => {
      ElMessageBox.confirm('是否确认进度延迟收费操作？请谨慎操作', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return updateInfo({ delayPaymentTime: delayPayTime.value, id: currentId.value })
      }).then(() => {
        visible.value = false
        ElMessage.success('延迟收费修改成功')
        emit('refresh')
      }).catch(() => {
        // 用户取消操作
      })
    }

    const handleClose = () => {
      visible.value = false
    }

    return {
      visible,
      delayPayTime,
      init,
      handleSave,
      handleClose
    }
  }
}
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>

