<script lang="ts" setup>
/**
 * @Name: DownloadError.vue
 * @Description: 指导价格导入失败弹窗
 * ElMessage(
 * @Author: xinyan
 */

import { Close, Finished, Warning } from '@element-plus/icons-vue';
import { useResponse } from '/@/utils/useResponse';
import * as api from '/@/views/product-manage/product-list/api';
import { ElMessage } from 'element-plus';

const showError = defineModel({ default: false });
const btnLoading = ref(false);

const props = defineProps({
	errorMsg: {
		type: Object,
		required: true,
	},
});

const { errorMsg } = props;
const firstThreeEntries = errorMsg.slice(0, 3);
const emit = defineEmits(['refresh']);

async function alarm() {
	try {
		const res = await useResponse(api.alarmMessage, { alarm_sku: errorMsg }, btnLoading);
		if (res && res.code == 2000) {
			showError.value = false;
			ElMessage.success('同步成功');
			emit('refresh');
		}
	} catch (error) {
		console.log(error);
		ElMessage.error('同步失败');
	} finally {
		showError.value = false;
	}
}

function cancelDialog() {
	showError.value = false;
}
</script>

<template>
	<el-dialog ref="noticeDialog" v-model="showError" :close-on-click-modal="false" :close-on-press-escape="false" class="notice-dialog" width="35%">
		<template #title>
			<div class="title">
				<el-icon style="color: orange">
					<Warning />
				</el-icon>
				<span class="pl-2">导入失败 {{ errorMsg.length }} 条</span>
			</div>
		</template>
		<div>
			<div v-for="(error, index) in firstThreeEntries" :key="index" class="error-message">
				{{ index + 1 }}. SKU: {{ error.sku }} 在 {{ error.country_code }} 地区不存在
			</div>
		</div>
		<div v-if="errorMsg.length > 3" class="error-message">...</div>
		<template #footer>
			<el-divider style="margin: 12px 0 20px 0"></el-divider>
			<el-button :icon="Close" @click="cancelDialog">取 消</el-button>
			<el-button :icon="Finished" :loading="btnLoading" type="primary" @click="alarm()">同步至群消息</el-button>
		</template>
	</el-dialog>
</template>

<style scoped>
.error-message {
	font-size: 14px;
	font-weight: 500;
	color: #666;
	padding-bottom: 10px;
}

.title {
	font-size: 18px;
	font-weight: 500;
	color: #666;
	display: flex;
	align-items: center;
}
</style>