<template>
	<si-dialog v-model="visible" class="si-confirm">
		<template #header>
			<h3>{{ title }}</h3>
		</template>

		<div class="si-confirm__content">
			<span class="si-confirm__icon">
				<i class="bx bx-error-circle"></i>
			</span>
			<p class="si-confirm__message">{{ message }}</p>
		</div>

		<template #footer>
			<si-button @click="confirm('cancel')" variant="border">取消</si-button>
			<si-button @click="confirm('confirm')">确认</si-button>
		</template>
	</si-dialog>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import siDialog from '../siDialog/index.vue'
import siButton from '../siButton/index.vue'

export default defineComponent({
	components: { siDialog, siButton },
	props: {
		title: { type: String, default: '提示' },
		message: { type: String, default: '是否确认操作' },
		callback: { type: Function }
	},
	data() {
		return {
			visible: false
		}
	},
	methods: {
		confirm(action: string) {
			if (this.callback) {
				this.callback(action)
			}
			this.visible = false
		}
	}
})
</script>

<style lang="scss">
.si-confirm {
	.si-confirm__content {
		display: flex;
		align-items: center;
		.si-confirm__icon {
			color: hsl(var(--si-warning));
			margin-right: 5px;
			i {
				font-size: 20px;
			}
		}
		.si-confirm__message {
			flex: 1;
		}
	}
}
</style>
