<template>
	<div class="url-config">
		<div class="content">
			<div class="toolbar">
				<div class="tool-item" @click="editVariables">编辑变量</div>
				<div class="tool-item" @click="editEnvironments">编辑环境</div>
			</div>
			<div class="list-item" v-for="item in urls">
				<div class="item-main" @click="item.isOpen = !item.isOpen">
					<div class="keywords">{{ item.keywords }}</div>
					<div class="description">{{ item.description }}</div>
					<a-icon class="icon" :type="item.isOpen ? 'down' : 'left'" />
				</div>
				<CollapseTransition>
					<div class="item-content" v-if="item.env.length" v-show="item.isOpen">
						<div class="env-item" v-for="(each, index) in item.env">
							<div class="name">{{ each.name }}</div>
							<a-input class="value"
							         :default-value="each.value"
							         v-model="each.value"
							         :title="each.value"
							         @pressEnter="blurInput(item)"
							></a-input>
							<a-icon v-show="index" @click="deleteItemEnv(item, index)" class="remove" type="stop" />
						</div>
						<div class="env-item add-env-var" v-if="item.env.length <= environments.length">
							<div class="ant-dropdown-title" @mouseenter="item.isNewHovered = true" @mouseleave="item.isNewHovered = false">
								{{ getUnUsedEnvironments(item)[item.selected] }}
								<a-icon type="down" />
								<transition name="slide-fade">
									<div class="dropdown-list" v-show="item.isNewHovered">
										<div v-for="(each, index) in getUnUsedEnvironments(item)"
										     @click="item.selected = index"
										>
											{{ each }}
										</div>
									</div>
								</transition>
							</div>
							<div class="value" @click="addEnvVar(item)">点此添加环境配置</div>
						</div>
					</div>
				</CollapseTransition>
			</div>
		</div>
	</div>
</template>

<script>
import CollapseTransition from "@/components/Animations/CollapseTransition/CollapseTransition";
import {update} from "@/util/click-outside";
export default {
	name: "UrlConfig",
	components: {
		CollapseTransition,
	},
	data: function () {
		return {
			explain: '这是变量定义时的默认值,他仍然可能在打包时产生变化,而非此处显示的值.',
			urls: [],
			variables: [],
			environments: []
		}
	},
	mounted() {
		this.fetchData();
		this.bus.$on('updateUrlConfig', this.fetchData);
	},
	methods: {
		fetchData() {
			// const data = [
			// 	{
			// 		keywords: 'api', description: '全局后端接口', default: 'localHost:8080',
			// 		env: [
			// 			{name: 'serve', value: 'localHost:8080'},
			// 			{name: 'build-dev', value: 'localHost:8080', isDefault: true},
			// 			{name: 'build', value: 'localHost:8080', isDefault: true},
			// 		]
			// 	},
			// ];
			this.axios({
			    url: window.api + '/api/GetUrlConfig',
			    method: 'post',
			}).then(data => {
			    data = data.data;
			    console.log(data);
				this.variables = data.variables;
			    this.environments = data.environments;
				this.urls = data.data.map(item => {
					return {
						...item,
						isOpen: false,
						selected: 0,
						isNewHovered: false
					}
				});
			});
		},
		blurInput(item) {
			this.$el.querySelectorAll('input').forEach(item => item.blur());
			this.saveConfigFile(item);
		},
		// 修改变量
		editVariables() {
			this.$popup({
				render: () => import('@/components/Tooltips/EditVariables'),
				props: {
					renderData: this.variables,
				},
				blur: true,    // 弹窗背景虚化
				outline: null,
				trackMouse: false,  // 弹窗是否追随鼠标位置
				zIndex: 1000,       // 层级
			})
		},
		editEnvironments() {
			this.$popup({
				render: () => import('@/components/Tooltips/EditEnvironments'),
				props: {
					renderData: this.environments
				},
				blur: true,    // 弹窗背景虚化
				outline: null,
				trackMouse: false,  // 弹窗是否追随鼠标位置
				zIndex: 1000,       // 层级
			})
		},
		getUnUsedEnvironments(item) {
			const already = item.env.map(each => each.name);
			return this.environments.filter(each => !already.includes(each.name)).map(each => each.name);
		},
		addEnvVar(item) {
			item.env.push({
				name: this.getUnUsedEnvironments(item)[item.selected],
				value: '\'\''
			});
			this.saveConfigFile(item);
			this.$forceUpdate();
		},
		saveConfigFile(item) {
			this.axios({
			    url: window.api + '/api/SetUrlConfigVarEnvs',
			    method: 'post',
				data: {
			    	data: item
				}
			}).then(data => {
			    data = data.data;
			    console.log(data);
			});
		},
		deleteItemEnv(item, index) {
			item.env.splice(index, 1);
			this.saveConfigFile(item);
		}
	},
}
</script>

<style scoped lang="scss">
.slide-fade-enter-active {
	transition: all .3s ease;
}
.slide-fade-leave-active {
	transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to {
	transform: translateY(-10px);
	opacity: 0;
}
.url-config {
	background-color: #282C34;
	width: 1000px;
	height: 800px;
	padding: 50px;
	.content {
		height: 100%;
		.toolbar {
			width: 100%;
			height: 40px;
			display: flex;
			gap: 10px;
			margin-bottom: 10px;
			border-bottom: 1px solid black(0.5);
			.tool-item {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0 10px;
				&:hover {
					cursor: pointer;
					background-color: white(0.2);
				}
			}
		}
		.list-item {
			margin-bottom: 5px;
			.item-main {
				display: grid;
				grid-template-columns: 160px auto 1fr;
				align-items: center;
				width: 100%;
				height: 40px;
				gap: 30px;
				background-color: rgba(90,90,90,0.5);
				margin-bottom: 5px;
				padding: 0 20px;
				transition: background-color .4s;
				&:hover {
					background-color: white(0.2);
				}
				.keywords {
					font-size: 14px;
					color: white;
				}
				.description {
					color: white(0.45);
				}
				.icon {
					justify-self: flex-end;
				}
			}
			.env-item {
				height: 40px;
				width: 100%;
				padding: 0 40px;
				display: grid;
				grid-template-columns: 150px 360px 1fr;
				align-items: center;
				background-color: black(0.25);
				gap: 20px;
				.name {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.value {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					border-color: transparent;
					background-color:transparent;
				}
				.remove {
					cursor: pointer;
					justify-self: flex-end;
					transition: color .3s;
					font-size: 18px;
					&:hover {
						color: red;
					}
				}
				&:nth-child(2n) {
					background-color: white(0.05);
				}
				.question {
					margin-left: 10px;
				}
			}
		}
	}
	.add-env-var {
		position: relative;
		.value {
			cursor: pointer;
			color: #1890ff;
		}
	}
	.ant-dropdown-title {
		cursor: pointer;
		color: #1890ff;
		height: 100%;
		display: flex;
		align-items: center;
		&:hover .dropdown-list, .dropdown-list:hover {
			display: block;
		}
	}
	.dropdown-list {
		display: none;
		position: absolute;
		left: 30px;
		top: 100%;
		background-color:#282C34;
		min-width: 120px;
		padding: 10px 0;
		div {
			padding: 5px 15px;
			color: white(0.75);
			&:hover{
				background-color: white(0.1);
			}
		}
	}
}
</style>
