<template>
	<div>
		<div class="assembly-link">
			<slot>
				<el-input
					@change="onChange"
					v-model="value.name"
					readonly
					:disabled="true"
					placeholder="跳转页面"
					class="le-url"
				>
					<template #prepend v-if="prepend">{{ typeName }}</template>
					<template #append>
						<el-button type="primary" @click="onTap"> 选择 </el-button>
					</template>
				</el-input>
			</slot>
		</div>
		<cl-dialog title="选择页面链接" height="550px" v-model="visible">
			<el-tabs stretch v-model="activeName" @tab-click="handleClick">
				<el-tab-pane label="平台页面" name="index">
					<div class="index-box" v-for="(item, index) in data.index" :key="index">
						<div class="index-title">
							{{ item.name }}
						</div>
						<div class="index-menu">
							<el-button
								v-for="(but, b) in item.children"
								:key="b"
								@click="onTapIndex(but)"
								plain
							>
								{{ but.name }}
							</el-button>
						</div>
					</div>
				</el-tab-pane>
				<el-tab-pane label="商品分类" name="goodsType">
					<div class="goods-type">
						<div
							class="item"
							v-for="(item, index) in data.goodsType"
							:key="index"
							@click="onTapGoodsType(item)"
						>
							<el-image
								style="width: 100%; max-width: 100%; border-radius: 6px"
								:src="item.pic"
								fit="cover"
							/>
							<div class="name">{{ item.name }}</div>
						</div>
					</div>
				</el-tab-pane>
				<el-tab-pane label="商品详情" name="goodsDetails">
					<assembly-goods @change="onTapGoodsDetails" />
				</el-tab-pane>
				<el-tab-pane label="小程序" name="applet">
					<el-alert
						title="填写需要跳转的小程序信息 如果没有，请找到对方管理员咨询"
						type="warning"
						:closable="false"
					/>
					<el-row class="mt-20">
						<el-col :span="8"></el-col>
						<el-col :span="8">
							<el-form label-position="top" :model="data.applet" :label-width="120">
								<el-form-item
									label="小程序名称"
									prop="name"
									:rules="[{ required: true, message: '小程序名称必填' }]"
								>
									<el-input v-model="data.applet.name" />
								</el-form-item>
								<el-form-item
									label="appid"
									prop="appid"
									:rules="[{ required: true, message: 'appid必填' }]"
								>
									<el-input v-model="data.applet.appid" />
								</el-form-item>
								<el-form-item
									label="小程序页面"
									prop="page"
									:rules="[{ required: true, message: '小程序页面必填' }]"
								>
									<el-input v-model="data.applet.page" />
								</el-form-item>
							</el-form>
						</el-col>
						<el-col :span="8"></el-col>
					</el-row>
					<div class="center mt-20">
						<el-button
							color="#626aef"
							type="success"
							@click="applet"
							style="width: 200px"
							>确定</el-button
						>
					</div>
				</el-tab-pane>
				<el-tab-pane label="web/H5" name="web">
					<el-alert
						title="网页链接的域名必须在小程序的白名单内"
						type="warning"
						:closable="false"
					/>
					<el-row class="mt-20">
						<el-col :span="8"></el-col>
						<el-col :span="8">
							<el-form label-position="top" :model="data.web" :label-width="120">
								<el-form-item
									label="网页名称"
									prop="name"
									:rules="[{ required: true, message: '网页名称必填' }]"
								>
									<el-input v-model="data.web.name" />
								</el-form-item>
								<el-form-item
									label="网页链接"
									prop="page"
									:rules="[{ required: true, message: '网页链接必填' }]"
								>
									<el-input v-model="data.web.page" />
								</el-form-item>
							</el-form>
						</el-col>
						<el-col :span="8"></el-col>
					</el-row>

					<div class="center mt-20">
						<el-button
							color="#626aef"
							type="success"
							@click="webH5"
							style="width: 200px"
							>确定</el-button
						>
					</div>
				</el-tab-pane>
				<el-tab-pane label="自定义页面" name="fixtures">
					<assembly-fixtures @change="onTapFixtures" />
				</el-tab-pane>
			</el-tabs>
		</cl-dialog>
	</div>
</template>
<script lang="ts" name="assembly-link" setup>
import { ref, reactive,watch, nextTick, computed, type PropType } from "vue";
import { ElMessage } from "element-plus";
import { useCool } from "/@/cool";
import { Form } from "../../types/form";

const { service } = useCool();
const props = defineProps({
	modelValue: {
		type: Object as PropType<Form.Link>,
		default: function () {
			return {
				page: "",
				appid: "",
				type: "",
				name: ""
			};
		}
	},
	prepend: {
		type: Boolean,
		default: true
	}
});
const emit = defineEmits(["update:modelValue"]);

const value = ref(props.modelValue);
watch(
	() => props.modelValue,
	async (newValue) => {
		value.value = newValue;
	}
);
const typeName = computed(() => {
	const names = {
		index: "平台",
		goodsType: "分类",
		goodsDetails: "商品",
		web: "网页",
		applet: "小程序",
		fixtures: "自定义",
		default: "页面"
	};

	const type = value.value.type || "default";
	return names[type] || names.default;
});

function onChange() {
	emit("update:modelValue", value.value);
}

const visible = ref(false);
const activeName = ref(value.value.type || "index");

function onTap() {
	visible.value = true;
	// 根据 modelValue 的 type 赋值给 data.applet 或 data.web
	if (value.value.type === "applet") {
		data.applet = {
			name: value.value.name,
			appid: value.value.appid,
			page: value.value.page
		};
	} else if (value.value.type === "web") {
		data.web = {
			page: value.value.page,
			name: value.value.name
		};
	}
	nextTick().then(() => {
		getData();
	});
}

function open() {
	onTap();
}

function handleClick() {
	nextTick().then(() => {
		getData();
	});
}

const data = reactive<any>({
	index: [],
	goodsType: [],
	applet: {
		name: "",
		appid: "",
		page: ""
	},
	web: {
		page: "",
		name: ""
	}
});

const selectedPage = ref({
	name: "",
	page: "",
	appid: "",
	id: 0
});

function setSelectedPage(item: any) {
	selectedPage.value = { ...item };
}

function submitPage(type: string) {
	const { name, page, appid } = selectedPage.value;

	if (name === "") {
		ElMessage.error(`请选择${typeName.value}`);
		return;
	}

	value.value = {
		name,
		type,
		page: page || value.value.page,
		appid: appid || value.value.appid
	};
	onChange();
	visible.value = false;
}

const applet = () => {
	const { name, appid, page } = data.applet;

	if (name === "" || appid === "" || page === "") {
		ElMessage.error("请填写小程序信息");
		return;
	}

	value.value = {
		...data.applet,
		type: "applet"
	};
	onChange();
	visible.value = false;
};

const webH5 = () => {
	const { name, page } = data.web;

	if (name === "" || page === "") {
		ElMessage.error("请填写网页信息");
		return;
	}
	if (!page.startsWith("http")) {
		ElMessage.error("请填写带https的网页链接");
		return;
	}
	value.value = {
		...data.web,
		type: "web"
	};
	onChange();
	visible.value = false;
};

function onTapIndex(item: { page: string; name: string }) {
	setSelectedPage(item);
	submitPage("index");
}

function onTapGoodsType(item: { name: string; id: number }) {
	setSelectedPage({ ...item, page: `/pages/goods/list?typeId=${item.id}` });
	submitPage("goodsType");
}

function onTapGoodsDetails(item: any) {
	setSelectedPage({ name: item.title, id: item.id, page: `/pages/goods/detail?id=${item.id}` });
	submitPage("goodsDetails");
}

function onTapFixtures(item: any) {
	setSelectedPage({
		name: item.name,
		id: item.id,
		page: `/uni_modules/cool-fixtures/pages/detail?id=${item.id}`
	});
	submitPage("fixtures");
}

function getData() {
	switch (activeName.value) {
		case "index":
			service.fixtures.mould.getPlatformPages().then((res: any) => {
				data.index = res;
			});
			break;
		case "goodsType":
			service.goods.type.list({ status: 1 }).then((res: any) => {
				data.goodsType = res;
			});
			break;
		default:
			break;
	}
}
defineExpose({ open });
</script>

<style lang="scss" scoped>
.assembly-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.le-url {
	width: 100%;
	:deep(.el-input-group__append) {
		width: 118px;
		background: #623ceb;
		border: 1px solid #623ceb;
		text-align: center;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
		box-sizing: border-box;
	}
}
.index-box {
	margin-bottom: 20px;
	.index-title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 10px;
	}
	.index-menu {
		display: grid;
		grid-template-columns: repeat(8, 1fr);
		gap: 10px;
	}
}
.goods-type {
	display: grid;
	grid-template-columns: repeat(8, 1fr);

	gap: 10px;

	.item {
		background-color: #f6f7fa;
		border-radius: 10px;
		box-sizing: border-box;
		cursor: pointer;
		padding: 6px;
		.name {
			text-align: center;
			padding: 6px;
		}
	}
}
.mt-20 {
	margin-top: 20px;
}

.center {
	display: flex;
	justify-content: center;
	align-items: center;
}

@media (max-width: 1600px) {
	.goods-type {
		grid-template-columns: repeat(4, 1fr) !important;
	}
	.index-menu {
		grid-template-columns: repeat(4, 1fr) !important;
	}
}
</style>
