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

interface Props {
  productName: string;
}

interface Emits {
  (e: 'delete'): void;
}

defineProps<Props>();
const emit = defineEmits<Emits>();
</script>

<template>
  <ElCard class="setting-danger-zone card-wrapper">
    <div class="setting-danger-zone__content">
      <div class="min-w-0 flex-1">
        <h3 class="text-16px text-[#7f1d1d] font-700">危险操作</h3>
        <p class="mt-8px text-14px text-[#991b1b] leading-24px">
          删除后将退出当前产品对象上下文，并返回产品入口页。删除时必须输入当前产品名称
          <strong>{{ productName || '--' }}</strong>
          进行二次确认。
        </p>
      </div>
      <ElButton
        v-auth="{ code: 'project:product:delete', source: 'object' }"
        type="danger"
        plain
        @click="emit('delete')"
      >
        删除产品
      </ElButton>
    </div>
  </ElCard>
</template>

<style scoped>
.setting-danger-zone {
  border: 1px solid rgb(254 202 202 / 96%);
  background:
    radial-gradient(circle at top right, rgb(254 226 226 / 96%), transparent 35%),
    linear-gradient(180deg, rgb(255 255 255 / 98%), rgb(254 242 242 / 96%));
}

.setting-danger-zone__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
</style>
