<script lang="ts" setup>
import { onBeforeMount, ref } from 'vue';

const emit = defineEmits<{
  (e: 'commit')
}>()
const props = defineProps({
  selectedTotal: {
    type: Number,
    default: () => 0,
  }
})

const show = ref(false)
const cardStyle = {
  'width': '450px',
  '--n-padding-top': '20px',
  '--n-padding-bottom': '20px',
  '--n-padding-left': '20px',
  '--n-padding-right': '20px',
}

function showModal() {
  show.value = true
}

function closeModal() {
  show.value = false
}

defineExpose({
  showModal,
})

async function handleSumbit(e: MouseEvent) {
  e.preventDefault()
  closeModal()
  emit('commit')
}

onBeforeMount(async () => { })
</script>

<template>
  <n-modal v-model:show="show" transform-origin="center">
    <n-card :style="cardStyle" :bordered="false" size="huge" role="dialog" aria-modal="true">
      <div class="wrapper">
        <div class="wrapper-header">
          <SvgIcon name="exclamation-solid" size="16" />
          <span class="wrapper-left">确认提示</span>
        </div>
        <div class="wrapper-content">
          已选<span class="highlighted-text">{{ props.selectedTotal }}</span>张图片，确认将所选照片移除可疑夹吗？
        </div>
      </div>
      <template #footer>
        <div class="wrapper-footer">
          <n-button type="info" @click="handleSumbit">
            确定
          </n-button>
          <n-button secondary style="margin-left:15px" @click="closeModal">
            取消
          </n-button>
        </div>
      </template>
    </n-card>
  </n-modal>
</template>

<style lang="less" scoped>
.wrapper {
  &-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px;
  }

  &-left {
    font-weight: 600;
    font-size: 16px;
    margin-left: 15px;
  }

  &-content {
    margin-left: 15px;
    color: #8e8e8e;

    .highlighted-text {
      color: #5b85f8;
      margin: 0 5px;
    }
  }

  &-footer {
    display: flex;
    justify-content: flex-end;
  }
}

::v-deep(.n-card.n-card--content-segmented > .n-card__content:not(:first-child)) {
  border: 0px;
}

::v-deep(.n-card > .n-card-header) {
  --n-padding-top: 0px;
  --n-padding-bottom: 12px;
}

::v-deep(.n-divider:not(.n-divider--vertical)) {
  margin-top: 0px;
  margin-bottom: 0px;
}
</style>
