<template>
	<div id="app" v-if="ready">
		<Header></Header>
		<router-view @savefile="savefile" />
		<a-modal v-model="showTooltips" title="Basic Modal" :bodyStyle="{padding: 0}" width="1300px">
			<component :is="popup" :info="info"></component>
		</a-modal>
	</div>
</template>

<script>
import config from './config.json';
import Header from "@/components/Header";
import * as esprima from 'esprima';
import * as esutils from 'esutils';
import esquery from '../util/esquery';
import AstHelper from '../util/AstHelper';
import * as util from 'vue-template-compiler';
window.esprima = esprima;
window.esutils = esutils;
window.AstHelper = AstHelper;
window.esquery = esquery;
const code = `
scss: {
	prependData: \`@import "~@/assets/common/css/variable.scss";\`
}
`;
export default {
	name: 'APP',
	data: function () {
		return {
			ready: false,
			popup: null,
			showTooltips: false,
			info: {}
		}
	},
	components: {
		Header
	},
	mounted() {
		if (window.location.href.includes(config.localHost)) {
			window.api = config.backendNetwork;
		} else {
			window.api = config.backendHost;
		}
		this.bus.$on('readfile', this.readfile);
		this.bus.$on('tooltip', this.renderTooltips);
		this.bus.$on('tips', this.generateTips);
		this.initWs();
		this.banTransform();
	},
	methods: {
		async initWs () {
			await this.$socket.ready;
			this.ready = true;
			this.$socket.on('tips', this.generateTips, this);
			this.CheckIsProjectInit();
		},
		CheckIsProjectInit () {
			this.axios({
				url: window.api + '/api/CheckIsProjectInit',
				method: 'post',
			});
		},
		generateTips(data) {
			console.log(data);
			const config = {
				message: data.title,
				description: data.content,
				duration: ['confirm', 'error'].includes(data.type) ? 0 : 10,
				key: `open_at_${Date.now()}`,
				icon: this.generateTipsIcon(data)
			};
			if (data.type === 'confirm') {
				config.btn = h => {
					return h(
						'a-button',
						{
							props: {
								type: 'primary',
								size: 'small',
							},
							on: {
								click: () => {
									this.$notification.close(config.key);
									this.axios({
										url: window.api + data.api,
										data: data.data,
										method: 'post',
									});
								},
							},
						},
						'确认',
					);
				}
			}
			this.$notification.open(config)
		},
		generateTipsIcon(data) {
			const color = {
				success: '#52c41a',
				confirm: '#faad14',
				error: '#f5222d'
			}
			return function (h) {
				const attrs = {
					type: 'smile',
					style: `color: ${color[data.type]}`
				}
				return h('a-icon', { attrs })
			}
		},
		renderTooltips(options) {
			this.showTooltips = true;
			this.popup = options.component;
			this.info = options.props;
		},
		readfile(options, callback) {
			this.axios({
				url: window.api + '/api/ReadEditorFiles',
				method: 'post',
				data: options,
			}).then(data => {
				if (callback) {
					callback(data.data);
				}
			});
		},
		savefile(options) {
			this.axios({
			    url: window.api + '/api/SaveEditorFiles',
			    method: 'post',
				data: options,
			}).then(data => {
			    console.log(data);
			});
		},
		banTransform() {
			// 阻止浏览器进行缩放
			document.addEventListener('mousewheel', handleTransform, { passive: false })
			function handleTransform(e) {
				if (e.ctrlKey) {
					e.stopPropagation();
					e.preventDefault();
				}
			}
		}
	},
}
</script>

<style lang="less">
@import '~ant-design-vue/dist/antd.less';
@import '~@/assets/antdv.less';
#app {
	font-family: Avenir, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: #AFB1B3;
	height: 100%;
	background: #282C34;
}
</style>
