<template>
	<el-dialog
		:title="sign === 'domain' ? '修改域名集合' : '修改ip集合'"
		width="600"
		v-model="visible"
		:close-on-click-modal="false"
		:destroy-on-close="true"
		draggable
	>
		<el-form ref="menuDialogFormRef" :model="state.ruleForm" :rules="dataRules" label-width="90px" :hide-required-asterisk="true" v-loading="loading">
			<el-form-item label="名称" prop="groupName">
				<el-input class="!w-[300px]" v-model="state.ruleForm.groupName" placeholder="请输入名称"></el-input>
			</el-form-item>
			<el-form-item
				v-for="(item, index) in state.ruleForm.list"
				:key="item.id || index"
				:prop="'list.' + index + '.val'"
				:rules="sign === 'domain' ? dataRules.domain : dataRules.ip"
			>
				<template #label>
					<div v-if="index === 0" class="flex items-center">
						<el-tooltip v-if="sign === 'ip'" effect="light" content="输入127.0.0.1/24格式代表网段" placement="top">
							<el-icon>
								<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-icon>
						</el-tooltip>
						&nbsp;{{ sign === 'domain' ? '域名集合' : 'ip集合' }}
					</div>
				</template>
				<!-- <div v-for="(item, index) in state.ruleForm.list" :key="item.index" class="flex items-center mb-2 text-sm font-normal justify-start w-full"> -->
				<el-input class="!w-[300px] mr-10" v-model="item.val" clearable @blur="item.modify = true" :placeholder="inputTip"></el-input>
				<div class="config-actions w-[50px] flex items-center justify-between">
					<svg
						v-if="index === state.ruleForm.list.length - 1"
						@click="onAddItem"
						style="cursor: pointer"
						width="24"
						height="24"
						viewBox="0 0 24 24"
						fill="none"
						xmlns="http://www.w3.org/2000/svg"
					>
						<path
							d="M19.5 3H4.5C3.67157 3 3 3.67157 3 4.5V19.5C3 20.3284 3.67157 21 4.5 21H19.5C20.3284 21 21 20.3284 21 19.5V4.5C21 3.67157 20.3284 3 19.5 3Z"
							stroke="#646464"
							stroke-linejoin="round"
						/>
						<path d="M12 8V16" stroke="#646464" stroke-linecap="round" stroke-linejoin="round" />
						<path d="M8 12H16" stroke="#646464" stroke-linecap="round" stroke-linejoin="round" />
					</svg>
					<svg
						v-if="state.ruleForm.list.length > 1"
						style="cursor: pointer"
						@click="onClickDelete(item, index)"
						width="24"
						height="24"
						viewBox="0 0 24 24"
						fill="none"
						xmlns="http://www.w3.org/2000/svg"
					>
						<path
							d="M19.5 3H4.5C3.67157 3 3 3.67157 3 4.5V19.5C3 20.3284 3.67157 21 4.5 21H19.5C20.3284 21 21 20.3284 21 19.5V4.5C21 3.67157 20.3284 3 19.5 3Z"
							stroke="#646464"
							stroke-linejoin="round"
						/>
						<path d="M8 12H16" stroke="#646464" stroke-linecap="round" stroke-linejoin="round" />
					</svg>
					<!-- </div> -->
				</div>
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="visible = false">{{ 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 { saveDomains, saveIps } from '/@/api/marketing/config';
import { useMessage } from '/@/hooks/message';
import { rule } from '/@/utils/validate';
import { parseIpRange } from '/@/utils/ipUpdate';

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

const inputTip = computed(() => {
  if (sign.value === 'domain') {
    return '请输入域名';
  } else {
    return t('marketingConfig.inputIPTip');
  }
});
// 定义变量内容
const visible = ref(false);
const loading = ref(false);
const sign = ref('domain');
const menuDialogFormRef = ref();
// 定义需要的数据
const state = reactive({
	ruleForm: {
		list: [],
		delList: [], //删除的ip或者域名的id
	},
});

//删除的id存入delList中
const onClickDelete = (item, index) => {
	if (item.id) {
		state.ruleForm.delList.push(item.id);
	}
	state.ruleForm.list.splice(index, 1);
};
const onAddItem = () => {
	state.ruleForm.list.push({ val: '' });
};

// // 表单校验规则
const dataRules = computed(() => ({
	ip: [
		{ required: rule.ip, message: 'IP不能为空', trigger: 'blur' },
		{ validator: rule.ip, trigger: 'blur' },
	],
	domain: [
		{ required: true, message: '域名不能为空', trigger: 'blur' },
		{ validator: rule.domain, trigger: 'blur' },
	],
}));

// 打开弹窗
const openDialog = async (type, row) => {
	visible.value = true;
	sign.value = type;
	resetForm();
	console.log();
	row = JSON.parse(JSON.stringify(row || {}));
	state.ruleForm = {
		...row,
		list: row.list.length > 0 ? row.list.map((e) => ({ ...e, val: e.value, modify: false })) : [{ val: '' }],
		delList: [],
	};
};
const resetForm = () => {
	menuDialogFormRef.value?.resetFields();
	state.ruleForm.delList = [];
};

// 保存数据
const onSubmit = async () => {
	const valid = await menuDialogFormRef.value.validate().catch(() => {});
	if (!valid) return false;
	if (sign.value === 'ip') {
		state.ruleForm.ips = state.ruleForm.list.map((item) => {
			const { start, end } = parseIpRange(item.val);

			return {
				...item,
				ipMode: end === '' ? 1 : 2,
				startIp: start,
				endIp: end,
			};
		});
	} else {
		state.ruleForm.domains = state.ruleForm.list.map((item) => ({
			...item,
			domain: item.val,
		}));
	}
	try {
		loading.value = true;
		if (sign.value === 'ip') {
			await saveIps(state.ruleForm);
		} else {
			await saveDomains(state.ruleForm);
		}
		useMessage().success(t(state.ruleForm.id ? 'common.editSuccessText' : 'common.addSuccessText'));
		visible.value = false;
		emit('onsuccess');
	} catch (err) {
		useMessage().error(err.msg);
	} finally {
		loading.value = false;
	}
};

// 暴露变量 只有暴漏出来的变量 父组件才能使用
defineExpose({
	openDialog,
});
</script>
<style scoped>
.apps-loadmore.el-select-dropdown .el-scrollbar__wrap {
	height: 330px !important;
}
</style>