<template>
	<el-dialog :title="'添加域名'" width="600" v-model="props.open" :close-on-click-modal="false" :destroy-on-close="true" @close="onCancel" draggable>
		<el-form ref="menuDialogFormRef" :rules="dataRules" :model="state.ruleForm" v-loading="loading">
			<div class="custom-style">
				<el-segmented v-model="state.ruleForm.sourceTypeText" :options="[t('marketingConfig.grouping'), t('marketingConfig.domain')]" size="default">
					<template #default="scope">
						<div style="min-width: 50px; line-height: 32px">
							{{ scope.item }}
						</div>
					</template>
				</el-segmented>
			</div>
			<el-form-item label="" prop="groupId" v-if="state.ruleForm.sourceTypeText === t('marketingConfig.grouping')">
				<el-select v-model="state.ruleForm.groupId" @change="state.ruleForm.groupName" :placeholder="t('marketingConfig.groupingTip')">
					<el-option v-for="item in selectData" :key="item.id" :label="item.groupName" :value="item.id" />
				</el-select>
			</el-form-item>
			<el-form-item label="" prop="domain" v-else>
				<el-input v-model="state.ruleForm.domain" type="text" :placeholder="t('marketingConfig.domainTip')"></el-input>
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="onCancel">{{ t('common.cancelButtonText') }}</el-button>
				<el-button type="primary" @click="onSubmit" :disabled="loading">{{ t('common.confirmButtonText') }}</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup name="systemMenuDialog">
import { useI18n } from 'vue-i18n';
import { addDomains } from '/@/api/marketing/config';
import { useMessage } from '/@/hooks/message';
import { rule } from '/@/utils/validate';

// 定义子组件向父组件传值/事件
const emit = defineEmits(['update:open', 'onsuccess']);
const { t } = useI18n();

// 定义变量内容
const loading = ref(false);
const menuDialogFormRef = ref();

// 定义需要的数据
const state = reactive({
	ruleForm: {
		ipType: 1, // 1: 白名单, 2: 黑名单
		sourceType: 1,
		sourceTypeText: t('marketingConfig.grouping'),
		groupId: '',
		groupName: '',
		domain: '',
	},
});

const props = defineProps({
	open: {
		type: Boolean,
		default: false,
	},
	selectData: {
		type: Array,
		default: () => [],
	},
});
//  表单校验规则
const dataRules = reactive({
	groupId: [{ required: true, message: '分组不能为空', trigger: 'blur' }],
	domain: [
		{ required: true, message: '域名不能为空', trigger: 'blur' },
		{ validator: rule.domain, trigger: 'blur' },
	],
});
const onCancel = () => {
	emit('update:open', false);
};
// 保存数据
const onSubmit = async () => {
	state.ruleForm.sourceType = state.ruleForm.sourceTypeText === t('marketingConfig.grouping') ? 1 : 2;
	if (state.ruleForm.sourceType == 1 ) {
		try {
			await menuDialogFormRef.value.validateField('groupId');
		} catch {
			return;
		}
	} else if (state.ruleForm.sourceType == 2 ) {
		try {
			await menuDialogFormRef.value.validateField('domain');
		} catch {
			return;
		}
	}

	try {
		loading.value = true;
		await addDomains(state.ruleForm);
		useMessage().success(t(state.ruleForm.id ? 'common.editSuccessText' : 'common.addSuccessText'));
		emit('onsuccess');
		onCancel();
	} catch (err) {
		useMessage().error(err.msg);
	} finally {
		loading.value = false;
	}
};
watch(
	() => props.open,
	(val) => {
		if (val) {
			state.ruleForm = {
				sourceType: 1,
				sourceTypeText: t('marketingConfig.grouping'),
				groupId: '',
				groupName: '',
				domain: '',
			};
		}
	}
);
</script>
<style lang="scss">
.apps-loadmore.el-select-dropdown .el-scrollbar__wrap {
	height: 330px !important;
}

.custom-style {
	margin-top: 14px;

	.el-segmented__item {
		border-right: 1px solid rgba(230, 230, 230, 1);
		min-width: 72px;
		flex: unset;
	}

	.el-segmented {
		border: 1px solid rgba(230, 230, 230, 1);
		border-bottom: unset;
		--el-segmented-bg-color: #ffffff;
		--el-segmented-item-hover-bg-color: rgba(22, 122, 240, 0.1);
		--el-segmented-item-selected-color: rgba(22, 122, 240, 1);
		--el-segmented-item-hover-color: rgba(22, 122, 240, 1);
		--el-segmented-item-selected-bg-color: rgba(22, 122, 240, 0.1);
		--el-border-radius-base: 4px 4px 0 0;
		--el-segmented-padding: 0;
	}
}
</style>