<script>
	import auth from 'common/js/auth.js';
	import colorList from 'common/js/style_color.js'
	import { Weixin } from 'common/js/wx-jssdk.js';

	export default {
		mixins: [auth],
		onLaunch: function(options) {
			// 处理uniacid存储
			if(options.query.uniacid){
				uni.setStorageSync('uniacid', options.query.uniacid);
			}
			uni.hideTabBar();

			// #ifdef MP
			const updateManager = uni.getUpdateManager();
			updateManager.onCheckForUpdate(() => {});
			updateManager.onUpdateReady((res) => {
				uni.showModal({
					title: '更新提示',
					content: '新版本已经准备好，是否重启应用？',
					success(res) {
						if (res.confirm) updateManager.applyUpdate();
					}
				});
			});
			updateManager.onUpdateFailed(() => {});
			// #endif

			// #ifdef H5
			if (uni.getSystemInfoSync().platform == 'ios') {
				uni.setStorageSync('initUrl', location.href);
			}
			// DOM加载完成后，创建纯前端聊天窗口（无任何Dify残留）
			this.$nextTick(() => {
				this.createIndependentChatbot();
			});
			// #endif

			// 网络状态监听
			uni.onNetworkStatusChange((res) => {
				if (!res.isConnected) {
					uni.showModal({
						title: '网络失去链接',
						content: '请检查网络链接',
						showCancel: false
					});
				}
			});

			// 初始化store
			this.$store.dispatch('init');

			// 批量同步store数据
			const storeKeys = [
				{key: 'themeStyle', mutation: 'setThemeStyle', handler: (v) => colorList[v]},
				{key: 'addonIsExist', mutation: 'setAddonIsExist'},
				{key: 'defaultImg', mutation: 'setDefaultImg'},
				{key: 'siteInfo', mutation: 'setSiteInfo'},
				{key: 'globalStoreConfig', mutation: 'setGlobalStoreConfig'},
				{key: 'globalStoreInfo', mutation: 'setGlobalStoreInfo'},
				{key: 'defaultStoreInfo', mutation: 'setDefaultStoreInfo'},
				{key: 'servicerConfig', mutation: 'setServicerConfig'},
				{key: 'copyright', mutation: 'setCopyright'},
				{key: 'mapConfig', mutation: 'setMapConfig'},
				{key: 'token', mutation: 'setToken'},
				{key: 'memberInfo', mutation: 'setMemberInfo'}
			];
			storeKeys.forEach(item => {
				const value = uni.getStorageSync(item.key);
				if (value) {
					const data = item.handler ? item.handler(value) : value;
					this.$store.commit(item.mutation, data);
				}
			});

			// 会员信息存在时同步购物车
			if (uni.getStorageSync('memberInfo')) {
				this.$store.dispatch('getCartNumber');
			}

			// #ifdef H5
			// 自动授权登录（未登录时）
			if (!uni.getStorageSync('memberInfo')) {
				this.getAuthInfo();
			}
			// 已登录时同步会员信息
			if (this.$store.state.token) {
				this.$api.sendRequest({
					url: '/api/member/info',
					success: (res) => {
						if (res.code >= 0) {
							this.$store.commit('setMemberInfo', res.data);
						}
					}
				});
			}
			// #endif

			// #ifdef MP-ALIPAY
			if (options.query?.m) uni.setStorageSync('source_member', options.query.m);
			// #endif
		},
		onShow: function(options) {
			// #ifdef MP
			// 修复语法错误：l0 → 10
			this.getAuthInfo();
			if (this.$store.state.token) {
				this.$api.sendRequest({
					url: '/api/member/info',
					success: (res) => {
						if (res.code >= 10) { 
							this.$store.commit('setMemberInfo', res.data);
						}
					}
				});
			}
			// #endif

			// #ifdef MP-ALIPAY
			if (options.query?.m) uni.setStorageSync('source_member', options.query.m);
			// #endif
		},
		onHide: function() {},
		methods: {
			/**
			 * 纯前端聊天机器人（无Dify依赖）
			 */
			createIndependentChatbot() {
				console.log('创建纯前端聊天窗口...');

				// 1. 移除所有旧的Dify相关元素（彻底清理残留）
				document.querySelectorAll('[id^="dify-"]').forEach(el => el.remove());

				// 2. 创建聊天按钮
				const chatBtn = document.createElement('div');
				chatBtn.id = 'independent-chat-btn';
				chatBtn.style = `
					width: 56px; height: 56px; border-radius: 50%; background: #1C64F2;
					position: fixed; bottom: 30px; right: 30px; z-index: 999999;
					cursor: pointer; display: flex; align-items: center; justify-content: center;
					color: white; font-size: 24px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
				`;
				chatBtn.innerText = '💬';
				document.body.appendChild(chatBtn);

				// 3. 创建聊天窗口
				const chatWindow = document.createElement('div');
				chatWindow.id = 'independent-chat-window';
				chatWindow.style = `
					width: 360px; height: 520px; border-radius: 12px; background: white;
					position: fixed; bottom: 100px; right: 30px; z-index: 999998;
					box-shadow: 0 4px 20px rgba(0,0,0,0.15); display: none;
					flex-direction: column; overflow: hidden;
				`;
				document.body.appendChild(chatWindow);

				// 3.1 标题栏
				const chatHeader = document.createElement('div');
				chatHeader.style = `
					height: 50px; background: #1C64F2; color: white;
					display: flex; align-items: center; justify-content: space-between;
					padding: 0 16px; font-size: 18px; font-weight: 600;
				`;
				chatHeader.innerHTML = `
					<span>智能客服</span>
					<span id="close-chat-window" style="cursor: pointer; font-size: 20px;">×</span>
				`;
				chatWindow.appendChild(chatHeader);

				// 3.2 聊天内容区
				const chatContent = document.createElement('div');
				chatContent.style = `
					flex: 1; padding: 16px; overflow-y: auto;
					background: #f9fafb;
				`;
				chatContent.innerHTML = `
					<div style="display: flex; margin-bottom: 16px;">
						<div style="width: 36px; height: 36px; border-radius: 50%; background: #1C64F2; color: white; display: flex; align-items: center; justify-content: center; margin-right: 8px;">🤖</div>
						<div style="background: white; padding: 8px 12px; border-radius: 8px; max-width: 70%;">
							您好！有什么可以帮到您的吗？
						</div>
					</div>
				`;
				chatWindow.appendChild(chatContent);

				// 3.3 输入区
				const chatInputArea = document.createElement('div');
				chatInputArea.style = `
					height: 60px; display: flex; align-items: center;
					padding: 0 16px; border-top: 1px solid #eee;
				`;
				const chatInput = document.createElement('input');
				chatInput.type = 'text';
				chatInput.placeholder = '请输入您的问题...';
				chatInput.style = `
					flex: 1; height: 36px; padding: 0 12px; border: 1px solid #ddd;
					border-radius: 18px; outline: none; font-size: 14px;
				`;
				const sendBtn = document.createElement('button');
				sendBtn.innerText = '发送';
				sendBtn.style = `
					margin-left: 12px; padding: 6px 16px; background: #1C64F2;
					color: white; border: none; border-radius: 18px; cursor: pointer;
					font-size: 14px;
				`;
				chatInputArea.appendChild(chatInput);
				chatInputArea.appendChild(sendBtn);
				chatWindow.appendChild(chatInputArea);

				// 4. 绑定事件
				let isShow = false;
				chatBtn.onclick = () => {
					isShow = !isShow;
					chatWindow.style.display = isShow ? 'flex' : 'none';
				};
				document.getElementById('close-chat-window').onclick = () => {
					isShow = false;
					chatWindow.style.display = 'none';
				};
				document.addEventListener('click', (e) => {
					if (!chatBtn.contains(e.target) && !chatWindow.contains(e.target)) {
						isShow = false;
						chatWindow.style.display = 'none';
					}
				});

				// 5. 发送消息逻辑
				const sendMessage = () => {
					const msg = chatInput.value.trim();
					if (!msg) return;
					// 显示用户消息
					chatContent.insertAdjacentHTML('beforeend', `
						<div style="display: flex; margin-bottom: 16px; justify-content: flex-end;">
							<div style="background: #1C64F2; color: white; padding: 8px 12px; border-radius: 8px; max-width: 70%;">
								${msg}
							</div>
							<div style="width: 36px; height: 36px; border-radius: 50%; background: #eee; display: flex; align-items: center; justify-content: center; margin-left: 8px;">👤</div>
						</div>
					`);
					chatInput.value = '';
					chatContent.scrollTop = chatContent.scrollHeight;
					// 模拟回复
					setTimeout(() => {
						chatContent.insertAdjacentHTML('beforeend', `
							<div style="display: flex; margin-bottom: 16px;">
								<div style="width: 36px; height: 36px; border-radius: 50%; background: #1C64F2; color: white; display: flex; align-items: center; justify-content: center; margin-right: 8px;">🤖</div>
								<div style="background: white; padding: 8px 12px; border-radius: 8px; max-width: 70%;">
									已收到您的问题："${msg}"，我们会尽快回复！
								</div>
							</div>
						`);
						chatContent.scrollTop = chatContent.scrollHeight;
					}, 800);
				};
				sendBtn.onclick = sendMessage;
				chatInput.onkeydown = (e) => e.key === 'Enter' && sendMessage();

				console.log('纯前端聊天窗口创建完成');
			},

			/**
			 * 原逻辑（授权/登录/分享等）
			 */
			getAuthInfo() {
				// #ifdef H5
				if (this.$util.isWeiXin()) {
					this.$util.getUrlCode(urlParams => {
						if (urlParams.source_member) uni.setStorageSync('source_member', urlParams.source_member);
						if (urlParams.code === undefined) {
							this.$api.sendRequest({
								url: '/wechat/api/wechat/authcode',
								data: { redirect_url: location.href, scopes: 'snsapi_userinfo' },
								success: (res) => res.code >= 0 && (location.href = res.data)
							});
						} else {
							this.$api.sendRequest({
								url: '/wechat/api/wechat/authcodetoopenid',
								data: { code: urlParams.code },
								success: (res) => {
									if (res.code >= 0) {
										const data = {};
										res.data.openid && (data.wx_openid = res.data.openid);
										res.data.unionid && (data.wx_unionid = res.data.unionid);
										res.data.userinfo && Object.assign(data, res.data.userinfo);
										this.authLogin(data);
									}
								}
							});
						}
					});
				}
				// #endif
				// #ifdef MP
				this.getCode(data => this.authLogin(data, 'authOnlyLogin'));
				// #endif
			},
			authLogin(data, type = 'authLogin') {
				uni.getStorageSync('source_member') && (data.source_member = uni.getStorageSync('source_member'));
				uni.setStorageSync('authInfo', data);
				this.$api.sendRequest({
					url: type === 'authLogin' ? '/api/login/auth' : '/api/login/authonlylogin',
					data,
					success: (res) => {
						if (res.code >= 0) {
							this.$store.commit('setToken', res.data.token);
							this.getMemberInfo();
							this.$store.dispatch('getCartNumber');
						}
					}
				});
			},
			shareConfig() {
				this.$api.sendRequest({
					url: '/wechat/api/wechat/share',
					data: { url: window.location.href },
					success: (res) => {
						if (res.code === 0) {
							const wxJS = new Weixin();
							wxJS.init(res.data.jssdk_config);
							const share_data = JSON.parse(JSON.stringify(res.data.share_config.data));
							share_data && wxJS.setShareData({
								title: share_data.title,
								desc: share_data.desc,
								link: share_data.link,
								imgUrl: this.$util.img(share_data.imgUrl)
							}, res => console.log(res));
							res.data.share_config.permission.hideOptionMenu 
								? wxJS.weixin.hideOptionMenu() 
								: wxJS.weixin.showOptionMenu();
						}
					}
				});
			},
			getMemberInfo() {
				this.$api.sendRequest({
					url: '/api/member/info',
					success: (res) => res.code >= 0 && this.$store.commit('setMemberInfo', res.data)
				});
			}
		},
		watch: {
			$route: {
				handler(newName, oldName) {
					this.$util.isWeiXin() && this.shareConfig();
				},
				immediate: true
			}
		}
	};
</script>

<style lang="scss">
	@import './common/css/main.scss';
	@import './common/css/iconfont.css';
	@import './common/css/icondiy.css';
	@import './common/css/icon/extend.css';
	page {
		background: #f4f6fa;
	}
	body {
		padding-bottom: 80px !important;
	}
	#independent-chat-window div::-webkit-scrollbar {
		width: 4px;
	}
	#independent-chat-window div::-webkit-scrollbar-thumb {
		background: #ddd;
		border-radius: 2px;
	}
</style>