<template>
  <Dialog
    v-model:show="dialogVisible"
    show-cancel-button
    get-container="body"
    teleport="body"
    @confirm="onComfirm"
    className="vant-confirm-z-index"
    overlayClass="vant-overlay-z-index"
  >
    <template #title>
      <p class="title">删除分组，分组中的资料将归类到默认分组中</p>
    </template>
    <div class="checkbox-wrap">
      <Checkbox v-model="checkboxValue">同时删除分组中的资料</Checkbox>
    </div>
  </Dialog>
</template>

<script lang="ts">
export default {
  name: "DeleteDialog",
};
</script>

<script setup lang="ts">
import { watch, ref, watchEffect } from "vue";
import { Dialog, Checkbox } from "vant";
type Props = {
  show?: boolean;
};
const props = withDefaults(defineProps<Props>(), {
  show: false,
});

const dialogVisible = ref(false);
const checkboxValue = ref(false);

const emit = defineEmits<{
  (e: "onConfirm", val: boolean);
  (e: "update:show", val: boolean);
}>();

const onComfirm = () => emit("onConfirm", checkboxValue.value);

watchEffect(() => {
  //默认要清除输入内容
  dialogVisible.value = props.show;
});

watch(
  () => dialogVisible.value,
  (val) => {
    dialogVisible.value = val;
    checkboxValue.value = false;
    emit("update:show", val);
  },
  { immediate: true },
);
</script>

<style lang="scss" scoped>
.title {
  text-align: center;
  padding: 0 j(50);
}

.checkbox-wrap {
  padding: j(20) 0;
  @extend %flex-middle-center;
}
</style>
