<template>
  <el-dialog v-model="deleteDialogVisible" title="删除" width="250" center align-center @close="close" draggable>
    <div class="text-center">
      <span style="color: #fff; font-size: 15px">确定删除吗？</span>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handleDelelte"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
import { defineProps } from "vue";
import { deleteUser, batchDeleteUser } from "@/api/user.ts";
import { DeleteMode } from "@/components/Delete/enum.ts";
interface deleteDialogPropType {
  dialogVisible: boolean;
  deleteMode: DeleteMode;
  id: number;
  ids: number[];
}
const props = defineProps<deleteDialogPropType>();
const emit = defineEmits(["update:dialogVisible", "confirm", "getUserList", "update:deleteMode"]);
const deleteDialogVisible = ref(props.dialogVisible);
const deleteMode = ref(props.deleteMode);
// 删除方法
const handleDelelte = async () => {
  if (props.deleteMode == DeleteMode.SINGLE_DELETE) {
    await deleteUser({ id: props.id });
    emit("getUserList");
    deleteDialogVisible.value = false;
  } else if (props.deleteMode == DeleteMode.BATCH_DELETE) {
    console.log(props.ids);
    await batchDeleteUser({ ids: props.ids });
    emit("getUserList");
    deleteDialogVisible.value = false;
  }
};
// 关闭弹窗的方法
const close = () => {
  deleteDialogVisible.value = false;
};
// 监听父组件传过来的值
watch(
  () => props.dialogVisible,
  (newVal) => {
    deleteDialogVisible.value = newVal;
  }
);
// 监听组件内的值并向父组件更新
watch(
  () => deleteDialogVisible.value,
  (newVal) => {
    emit("update:dialogVisible", newVal);
  }
);
// 监听父组件传过来的值
watch(
  () => props.deleteMode,
  (newVal) => {
    deleteMode.value = newVal;
  }
);
// 监听组件内的值并向父组件更新
watch(
  () => deleteMode.value,
  (newVal) => {
    emit("update:deleteMode", newVal);
  }
);
</script>
