<!--
 * @Author: xiejiang
 * @Date: 2024-11-06 09:53:55
 * @LastEditors: xiejiang
 * @LastEditTime: 2024-12-11 21:54:38
 * @Description: 系统提示确认
 * Copyright（c）2024 by 好老师教育科技有限公司 All right Reserved.
-->
<template>
  <main class="main">
    <t-dialog
      class="dialog-style"
      v-model:visible="visible"
      header="系统提示"
      :footer="false"
      :on-close="onClose"
      destroy-on-close
    >
      <template #body>
        <div>
          {{ typeTxt[props.type] }}
        </div>
      </template>
      <template #footer>
        <div class="mt-[16px] text-right">
          <t-button variant="outline" @click="onClose" class="!mr-[8px]"> 取消</t-button>
          <t-button :loading="loading" @click="handleConfirm">确定</t-button>
        </div>
      </template>
    </t-dialog>
  </main>
</template>

<script setup lang="ts">
defineOptions({
  name: 'SystemPrompts'
})

interface DialogVisibleProps {
  dialogVisible: boolean // 双向绑定的值 ==>必传
  type?: number // 0: 删除提示 1: 启用提示 2: 停用提示 ==>非必传（默认值0）
  width?: string // 抽屉宽度 ==>非必传（默认值480px）
}
const typeTxt = ['删除的数据不可恢复，是否确认操作?', '正在启用数据，是否确认操作？', '正在停用数据，是否确认操作？']
const props = withDefaults(defineProps<DialogVisibleProps>(), {
  type: 0,
  dialogVisible: false,
  width: '480px'
})
const loading = ref(false)

const visible = ref(props.dialogVisible)

const emit = defineEmits<{
  close: []
  confirm: []
}>()

const handleConfirm = () => {
  emit('confirm')
  visible.value = false
  loading.value = true
}

const onClose = () => {
  emit('close')
  visible.value = false
  loading.value = false
}

defineExpose({
  onClose
})
</script>

<style scoped lang="less">
.main {
  :deep(.dialog-style) {
    .t-dialog--default {
      padding: 20px;
    }

    .t-dialog__body {
      padding: 20px 0 0;
    }
  }
}
</style>
