<template>
	<view class="main-container">
		<view class="top-view">
			<message-show :key="index" :message="info" :msgid="index"></message-show>
		</view>
		<view class="content-view">
			<view class="chattypes-view">
				<view class="chattype" v-for="(item, index) in chatTypes" :class="{active : item.type === chatType, hot: item.hot}" 
				:key="index" @click="changetype(item, index)">
					{{ item.name }}
				</view>
			</view>
			<view class="aidesc-view">
				<view class="chatDesc" v-if="chatDesc">
					<p class="p0">{{ chatDesc.mainTitle }}</p>
					<p class="p3" v-for="(item, index) in chatDesc.skills" :key="10+index"> - {{ item }}</p>
					<p class="p1">{{ chatDesc.subtitle }}</p>
					<view class="p3" v-for="(item, i) in chatDesc.qestions" :key="i" @click="handleGotoChat(item)"> - {{ item }} 
						<span class="iconfont icon-goto"></span> 
					</view>
					
				</view>
				<view class="empty" v-else>
					敬请期待！
				</view>
			</view>
		</view>
		
		<view class="chat-enter">
			<view class="chat-desc" v-if="chatType === CHAT_TYPE.NORMAL">
				恭喜！您获得免费提问机会
			</view>
			<view class="chat-desc" v-else>
				单个问题消耗{{settings[chatDesc.times]}}点算力
			</view>
			<template v-if="!finishPhone">
				<button class="start-btn" type="primary" plain="true" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">开始提问</button>
			</template>
			<template v-else> 
				<button v-if="chatType !== CHAT_TYPE.DRAW" class="start-btn" plain="true" @click="gotoChat">开始提问</button>
				<!-- <button v-if="chatType === CHAT_TYPE.SCENE" class="start-btn" type="primary" plain="true" @click="gotoChat">敬请期待</button> -->
				<button v-if="chatType === CHAT_TYPE.DRAW" class="start-btn" plain="true" @click="gotoDraw">开始绘图</button>
			</template>
		</view>
	</view>
</template>

<script>
	import messageShow from '../components/messageshow.vue';
	import request from '@/api/request.js'
	import { wxlogin, shareSuccess, updateUserName, getUserinfo, getPhoneNumber } from '@/api/index.js';
	import { mapState, mapMutations } from 'vuex'
	import { dateFormat, queryToObj } from '@/common/util.js'
	import { curVersion, chatDefaultMsg } from '@/common/config.js'
	import { CHAT_TYPE } from '@/common/enum.js'
	var app = getApp();
	export default {
		data() {
			return {
				CHAT_TYPE,
				index: 1,
				info: chatDefaultMsg,
				code: '',
				chatTypes: [
					{ name: '智能问答', type: CHAT_TYPE.NORMAL, enable: true },
					{ name: '科学问答', type: CHAT_TYPE.SCIENCE, enable: true },
					{ name: '联网版', type: CHAT_TYPE.ONLINE, enable: true, hot: true },
					{ name: '小作文版', type: CHAT_TYPE.WRITER, enable: true },
					{ name: 'AI绘图', type: CHAT_TYPE.DRAW, enable: true, hot: true}
				],
				chatDesc: null,
				chatDescList: [{
					mainTitle: 'AI降临派提供基于最新人工智能技术的问答机器人，可以为您解决如下几类问题：',
					skills : [
						`知乎百度答题，做作业题目`,
						`文案润色、翻译、创意`,
						`写代码、写诗词、写论文 `
					],
					subtitle: `您可以尝试这样提问:`,
					qestions: [
						`请帮我作一首关于月亮的诗?`,
						`如何向心仪的女生表白?`,
						`请帮我做一个市场营销方案。`
					],
					times: 1
				},
				{
					mainTitle: '在基础版的能力上，回答问题更严谨，回答长度也有所增加，更适合用来：',
					skills : [
						`做作业，找答案`,
						`生活常识百科查询`,
						`探讨各领域学术问题 `
					],
					subtitle: `您可以尝试这样提问:`,
					qestions: [
						`锂与稀硫酸反应的化学方程式`,
						`衣服沾上了咖啡渍如何清洗？`,
						`AI技术发展对人类的影响是什么？`
					],
					times: 'scienceSpend'
				},
				{
					mainTitle: '重大突破！在基础版AI智能问答能力的基础上，支持联网检索最新信息，更适合用来：',
					skills : [
						`收集近期特定主题的新闻素材`,
						`结合最新国内外行业数据输出分析`,
						`搜索网络上最新的资讯`
					],
					subtitle: `您可以尝试这样提问:`,
					qestions: [
						`上海楼市的最新变化与未来趋势`,
						`最近A股/港股/基金市场行情总结`,
						`写一篇关于电视剧《狂飙》的影评`
					],
					times: 'onlineSpend'
				},
				{
					mainTitle: '在基础版的能力上，扩展了AI回答的文字长度，并且文字表达更具创意，更适合用来：',
					skills : [
						`活动策划、产品宣传稿、广告创意`,
						`写作文、写儿歌、各类公文写作`,
						`写祝福语、写情书 `
					],
					subtitle: `您可以尝试这样提问:`,
					qestions: [
						`请写一篇产品宣传文案，主要卖点是…`,
						`请以感恩祖国为主题写一篇文章。`,
						`请写一段兔年新春祝福，送给我的朋友`
					],
					times: 'writerSpend'
				}, 
				{
					mainTitle: '您只要输入一句话或者几个关键词，就能让AI快速生成绘画，可以用来：',
					skills : [
						`创作人像、风光等各类题材的图片`,
						`创作水墨画、油画等不同风格的画`,
						`设计创意插图、视觉元素等 `
					],
					subtitle: `您可以尝试这样提问:`,
					qestions: [
						`一个姑娘站在樱花树下的写真`,
						`夏天的瀑布，参考Marc Adamus的作品`,
						`设计一个包含箭头元素的扁平化LOGO`
					],
					times: 'drawSpend'
				}
				]
			};
		},
		computed: {
			...mapState(['userId', 'chatToken', 'version', 'chatType', 'invited', 'settings', 'finishPhone']),
		},
		components: {
			messageShow
		},
		onLoad(option) {
			console.log('main page onLoad option:', option);
			const idex = this.chatTypes.findIndex(m => m.type === this.chatType)
			this.chatDesc = this.chatDescList[idex]
			if (option.uid && option.uid != 'undefined') {
				this.setShareId(option.uid)
			}
			if (option.ctype && option.ctype != 'undefined') {
				this.setChatType(option.ctype)
			}
			// 目前图片分享
			// console.log("uid%3D3%26ctype%3DDRAW");
			// option.scene = "uid%3D3%26ctype%3DDRAW"
			if (option.scene) {
				const scene = queryToObj(decodeURIComponent(option.scene))
				console.log(option.scene, scene);
				scene.uid && this.setShareId(scene.uid)
				scene.ctype && (this.setChatType(scene.ctype))
			}
			
			if (!this.chatToken || curVersion !== this.version) {
				this.$store.dispatch('login').then(rst => {
				})
			} else {
				this.updateUserinfo()
			}
		},
		created() {		 
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket: true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus: ["shareAppMessage", "shareTimeline"]
			})
			// #endif
		},
		mounted() {
		},
		methods: {
			...mapMutations(['setLoginInfo', 'setSessionId', 'setVersion', 'setShareId', 'setChatType', 'setInvited', 'setFinishPhone']),
			changetype(item, index) {
				this.setChatType(item.type)
				this.chatDesc = this.chatDescList[index]
			},
			
			async getPhoneNumber(e) {
				// console.log(e.detail)
				if (e.detail.code) {
					const res = await getPhoneNumber(e.detail.code)
					if (res.code === 0) {
						this.setFinishPhone(true)
						wx.showToast({
							title: `已绑定`,
							icon: 'success',
							duration: 1500
						})
					}
				}
			},
			async updateUserinfo() {
				const res = await getUserinfo()
				if (res.code === 0) {
					this.setLoginInfo(res.data)
				}
			},
			handleGotoChat(str) {
				app.globalData.testQuestion = str
				if (this.chatType === CHAT_TYPE.DRAW) {
					this.gotoDraw() 
				} else {
					this.gotoChat()
				}
			},
			async gotoChat() {
				const item = this.chatTypes.find(m => m.type === this.chatType)
				if (!item.enable) {
					// wx.showToast({
					// 	title: `敬请期待！`,
					// 	icon: 'success',
					// 	duration: 2000
					// })
					return
				}
				
				if (!this.chatToken) {
					this.$store.dispatch('login').then(rst => {
						uni.navigateTo({
						 	url: '/pages/ai/chat/chat'
						});
					})
				} else {
					uni.navigateTo({
						url: '/pages/ai/chat/chat'
					});
				}
			},
			gotoDraw() {
				uni.navigateTo({
					url: '/pages/ai/draw/draw'
				});
			},
			onShareAppMessage: function (obj) {
				setTimeout(() => {
					this.setInvited(1)
				}, 3000)
				let path = `/pages/ai/main/main?uid=${this.userId}`
				let title = '加入AI降临派，与AI真神对话！'
				// 分享配置
				return { title,	path };
			},
			adShareTimes: async function() {
				const that = this
				const rst = await shareSuccess()
				if (rst.code === 0) {
					wx.showToast({
						title: `恭喜您，获得${that.settings.share.addTimes}点算力`,
						icon: 'none',
						duration: 2000
					})
				}
			},
			onShareTimeline() {
				let path = `/pages/ai/main/main?uid=${this.userId}`
				let title = '加入AI降临派，与AI真神对话！'
				return { title,	path }
			}
		}
	}
</script>

<style lang="less" scoped>
	.main-container {
		// padding: 40rpx 40rpx 0;
		background-color: @mainBg;
		height: 100%;
		.top-view {
			padding: 0 6rpx;
		}
		.content-view {
			padding: 20rpx 30rpx;
			.chattypes-view {
				display: flex;
				border-radius: 8rpx 8rpx 0 0;
				border: 1px solid @mainColor;
				.chattype {
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 20rpx 0;
					width: 25%;
					box-sizing: border-box;
					color: @mainColor;
					background-color: transparent;
					font-weight: 600;
					position: relative;
					&.active {
						background-color: @mainColor;
						color: #FFF;
					}
					&:not(:last-child) {
						border-right: 1px solid @mainColor;
					}
					&.hot::after{
						content: "Beta";
						color: lighten( @goldColor, 5%);
						font-size: 20rpx;
						transform: scale(0.9);
						font-weight: bold;
						position: absolute;
						z-index: 1;
						right: 4rpx;
						top: 2rpx;
					}
				}
			}

			.aidesc-view {
				color: #FFF;
				// background-color: #444653;
				padding: 20rpx 30rpx;
				// margin-top: 20rpx;
				height: 620rpx;
				font-size: 28rpx;
				border-radius: 0 0 8rpx 8rpx;
				border: 1px solid @mainColor;
				border-top: none;
				.p0 {
					padding: 4rpx 0;
					font-size: 28rpx;
				}
				.p1 {
					padding-top: 20rpx;
				}
				.p3 {
					margin: 8rpx 0;
					padding: 12rpx 8rpx;
					border-radius: 12rpx;
					background-color: #282b31;
					padding-left: 20rpx;
					position: relative;
					.iconfont {
						right: 12rpx;
						top: 16rpx;
						position: absolute;
						color: @mainColor;
					}
					&:active {
						background-color: darken(#282b31, 5%);
					}
				}
				.tips {
					padding-top: 20rpx;
				}
				.empty {
					padding-top: 100rpx;
					text-align: center;
					color: #bbb;
				}
			}
			
		}
		
		.chat-enter {
			position: fixed;
			width: 100%;
			bottom: 40rpx;
			color: #FFF;			
			text-align: center;
			.chat-desc {
				padding-bottom: 20rpx;
			}
			.start-btn {
				border-color: @mainColor;
				background-color: @mainColor;
				color: #FFF;
				width: 320rpx;
				padding: 6rpx 0;
				font-size: 30rpx;
				border-radius: 10rpx;
				&:active {
					background-color: lighten(@mainColor, 5%);
				}
			}
		}
	}
</style>
