<template>
	<el-dialog
		:title="type === 'Edit' ? '修改IP' : '添加IP'"
		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">
			<el-form-item label="" prop="ipType">
				<el-radio-group v-model="state.ruleForm.ipType">
					<el-radio :value="1">白名单</el-radio>
					<el-radio :value="2">黑名单</el-radio>
				</el-radio-group>
			</el-form-item>
			<div class="custom-style">
				<el-segmented v-model="state.ruleForm.sourceTypeText" :options="[t('marketingConfig.grouping'), t('marketingConfig.ip')]" size="default">
					<template #default="scope">
						<div style="min-width: 50px; line-height: 32px">
							{{ scope.item }}
							<el-icon v-if="scope.item === t('marketingConfig.ip')" size="12" style="vertical-align: middle">
								<el-tooltip effect="light" content="输入127.0.0.1/24格式代表网段" placement="top">
									<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
										<path
											d="M7 14C8.93298 14 10.683 13.2165 11.9497 11.9497C13.2165 10.683 14 8.93298 14 7C14 5.06702 13.2165 3.31702 11.9497 2.05025C10.683 0.783503 8.93298 0 7 0C5.06702 0 3.31702 0.783503 2.05025 2.05025C0.783503 3.31702 0 5.06702 0 7C0 8.93298 0.783503 10.683 2.05025 11.9497C3.31702 13.2165 5.06702 14 7 14Z"
											fill="#1B4D88"
											fill-opacity="0.4"
										/>
										<path
											fill-rule="evenodd"
											clip-rule="evenodd"
											d="M6.99957 1.94434C7.5365 1.94434 7.97179 2.37962 7.97179 2.91656C7.97179 3.4535 7.5365 3.88878 6.99957 3.88878C6.46263 3.88878 6.02734 3.4535 6.02734 2.91656C6.02734 2.37962 6.46263 1.94434 6.99957 1.94434Z"
											fill="white"
										/>
										<path
											d="M6.99957 1.94434C7.5365 1.94434 7.97179 2.37962 7.97179 2.91656C7.97179 3.4535 7.5365 3.88878 6.99957 3.88878C6.46263 3.88878 6.02734 3.4535 6.02734 2.91656C6.02734 2.37962 6.46263 1.94434 6.99957 1.94434ZM6.99957 2.33322C6.6774 2.33322 6.41623 2.5944 6.41623 2.91656C6.41623 3.23872 6.6774 3.49989 6.99957 3.49989C7.32173 3.49989 7.5829 3.23872 7.5829 2.91656C7.5829 2.5944 7.32173 2.33322 6.99957 2.33322Z"
											fill="white"
										/>
										<path d="M7.19477 10.8888V5.44434H6.80588H6.41699" fill="white" />
										<path
											d="M6.41645 10.8887V6.22206C5.98689 6.22206 5.63867 5.87384 5.63867 5.44428C5.63867 5.01473 5.98689 4.6665 6.41645 4.6665H7.19423L7.27398 4.6703C7.66608 4.71023 7.97201 5.04164 7.97201 5.44428V10.8887C7.97201 11.3183 7.70354 11.3447 7.27398 11.3447C6.84443 11.3447 6.41645 11.3183 6.41645 10.8887Z"
											fill="white"
										/>
										<path
											d="M8.55566 10C8.98522 10 9.33344 10.3482 9.33344 10.7778C9.33344 11.2073 8.98522 11.5556 8.55566 11.5556H5.83344C5.40389 11.5556 5.05566 11.2073 5.05566 10.7778C5.05566 10.3482 5.40389 10 5.83344 10H8.55566Z"
											fill="white"
										/>
									</svg>
								</el-tooltip>
							</el-icon>
						</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="ip" v-else>
				<el-input v-model="state.ruleForm.ip" type="text" :placeholder="t('marketingConfig.ipTip')"></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 { saveIpList } from '/@/api/marketing/config';
import { useMessage } from '/@/hooks/message';
import { parseIpRange } from '/@/utils/ipUpdate';
import { rule } from '/@/utils/validate';

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

// 定义变量内容
const loading = ref(false);
const type = ref('add'); // 'add' or 'edit'
const menuDialogFormRef = ref();

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

const props = defineProps({
	open: {
		type: Boolean,
		default: false,
	},
	selectData: {
		type: Array,
		default: () => [],
	},
});
// // 表单校验规则
const dataRules = reactive({
	groupId: [{ required: true, message: '分组不能为空', trigger: 'blur' }],
	ip: [
		{ required: rule.ip, message: 'IP不能为空', trigger: 'blur' },
		{ validator: rule.ip, trigger: 'blur' },
	],
});
const onCancel = () => {
	emit('update:open', false);
};
// 保存数据
const onSubmit = async () => {
	const lis = parseIpRange(state.ruleForm.ip);
	state.ruleForm.startIp = lis.start;
	state.ruleForm.endIp = lis.end;
	if (lis.end !== '') {
		state.ruleForm.ipMode = 2;
	}

	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('ip');
		} catch {
			return;
		}
	}

	try {
		loading.value = true;
		await saveIpList(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 = {
				ipType: 1, // 1: 白名单, 2: 黑名单
				sourceType: 1,
				sourceTypeText: t('marketingConfig.grouping'),
				groupId: '',
				ipMode: 1,
				startIp: '',
				endIp: '',
				ip: '',
			};
		}
	}
);
</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>