aida_front/src/views/HomeMain.vue

<template>
    <div class="homeMain_max">
		<div class="leftBox" :class="{leftHide:leftShow}">
			<div class="left">
				<div class="title">
					<span>AiDA</span>
					<svg @click="()=>leftShow=!leftShow" class="leftShowOrHide" xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" fill="currentColor" viewBox="0 0 24 24" data-v-1c7326d6=""><path fill-rule="evenodd" d="M6 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2V5H6Zm4 0v14h8a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-8ZM3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6Z" clip-rule="evenodd" data-v-1c7326d6=""></path></svg>
				</div>
				<div class="newObj marginT2" @click="newProject">
					<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 25 24"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12.5 5v14m-7-7h14"></path></svg>
					<p>New Project</p>
				</div>
				<div class="navList marginT2">
					<div class="tools list" v-for="item in openTypeList" :class="{active:openType == item.value}">
						
						<div class="titleBox" @click="setOpenType(item.value,item.list)">
							<div class="left">
								<i :class="['fi',item.icon]"></i>
								<span>{{item.label}}</span>
							</div>
							<div class="right">
								<i class="fi fi-br-angle-small-down"></i>
							</div>
						</div>
						<div class="detailBox" v-show="openType">
							<div class="detail" v-if="item.value != 'history' && item.value != 'cloud'" v-show="openType == item.value">
								<div class="detailItem" v-for="childItem in item.list" @click="setRouter(item,childItem)" :class="{active:openTypeChild == childItem.value}">
									<i v-show="childItem.icon" :class="['fi',childItem.icon]"></i>
									<div class="text">
										<span>{{ childItem.label }}</span>
									</div>
								</div>
							</div>
							<div class="detail" v-else-if="item.value == 'history'">
								<div class="detailItem history" v-for="childItem,index in item.list" @click="setHistory(item,childItem)" :class="{active:openTypeChild == childItem.id}">
									<div class="text" style="width: 100%;">
										<span :title="childItem.name" v-show="!childItem.editName">{{ childItem.name }}</span>
										<textarea v-model="historyData.historyTextarea" v-show="childItem.editName" @click.stop></textarea>
									</div>
									<div class="type">{{ childItem.process.replace(/_/g, ' ').toLowerCase().replace(/\b\w/g, char => char.toUpperCase()) }}</div>
									<div class="time">{{ childItem.updateTime.replace('T', ' ') }}</div>
									<div class="btn">
										<i class="fi fi-br-menu-dots-vertical" v-show="!childItem.editName" @click.stop="editHistory(childItem,index,$event,item.list)"></i>
										<i class="fi fi-br-check" v-show="childItem.editName" @click.stop="accomplishHistory(childItem,index,$event)"></i>
										<div class="operation" v-show="historyData.selectHistoryIndex == index">
											<div class="item" @click.stop="editName(childItem)">
												<i class="fi fi-rr-edit"></i>
												<span>Rename</span>
											</div>
											<div class="item" v-if="childItem.process == 'SINGLE_DESIGN' || childItem.process == 'SERIES_DESIGN'" @click.stop="setting(childItem)">
												<i class="fi fi-rr-settings-sliders"></i>
												<span>Setting</span>
											</div>
											<div class="item" v-if="bathGenerationList.indexOf(childItem.process)>-1" @click.stop="bathGeneration(childItem)">
												<i class="fi fi-rr-settings-sliders"></i>
												<span>Batch Generation</span>
											</div>
											<div class="item" @click.stop="deleteItem(childItem)">
												<i class="icon iconfont icon-shanchu operate_icon"></i>
												<span>Delete</span>
											</div>
										</div>
									</div>
								</div>
								<div v-show="!historyData.isNoData" class="material_content_list_loding">
									<span class="historyPage_loading" v-show="!historyData.isShowLoading"></span>
									<span v-show="historyData.isShowLoading">
										<a-spin size="large" />
									</span>
								</div>
								<img v-show="historyData.isNoData && historyData.isNull" src="@/assets/images/homePage/null_img.png">
							</div>
						</div>
					</div>
				</div>
				<div class="navListBottom">
					<div class="tools marginT2 list" :class="{active:$route.name == 'cloud'}" @click="()=>$router.push('/home/cloud')">
						<div class="titleBox" style="margin-bottom: 0;">
							<div class="left">
								<i class="fi fi-rr-cloud-upload-alt"></i>
								<span>Batch Generation</span>
							</div>
						</div>
					</div>
					<div class="tools list language" :class="{active:isLanguage}">
						<div class="titleBox" @click="()=>isLanguage = !isLanguage">
							<div class="left">
								<i class="fi fi-br-globe"></i>
								<span>Language</span>
							</div>
							<div class="right">
								<i class="fi fi-br-angle-small-down"></i>
							</div>
						</div>
						<div class="detailBox">
							<div class="detail" v-show="isLanguage">
								<div class="detailItem" v-for="item in language" :class="{active:locale == item.value}" @click="setLocale(item.value)">
									<svg v-show="locale == item.value" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" class="dark-icon sidebar-lang-icon" width="20" height="20"><path stroke="#52525b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.167" d="M11.667 3.5 5.25 9.917 2.334 7"></path></svg>
									<span>{{ item.name }}</span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="homeMain_right_content">
					<div
						class="button_second credits hideChecked"
					>
						{{$t('Header.Credits')}}:&nbsp;
						<span :title="credits">
							<div class="credits_item" v-for="item in String(credits)" :style="{'transform': 'translateY('+item*-100+'%)'}">
								<div v-for="numItem in 10">{{ numItem-1 }}</div>
							</div>
						</span>
						<i @click="getCredits" class="fi fi-br-refresh" :class="[activeCredits?'active':'']"></i>
						<i @click="UpgradePlan" title="Purchase" class="fi fi-rr-shop"></i>
					</div>
				</div>
				<div v-if="userDetail.systemUser == 0 || userDetail.systemUser == 3" @click="openUpgradeToPro" class="gallery_btn gallery_btn_radius" style="width: 100%;">Upgrade to Pro</div>
			</div>
		</div>
		<div class="rightBox">
			<div class="right">
				<div class="user">
					<div class="left" v-show="leftShow">
						<svg @click="()=>leftShow=!leftShow" class="leftShowOrHide" xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" fill="currentColor" viewBox="0 0 24 24" data-v-1c7326d6=""><path fill-rule="evenodd" d="M6 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2V5H6Zm4 0v14h8a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-8ZM3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6Z" clip-rule="evenodd" data-v-1c7326d6=""></path></svg>
						<div class="newObj marginT2" @click="newProject">
							<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 25 24"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12.5 5v14m-7-7h14"></path></svg>
							<p>New Project</p>
						</div>
					</div>
					<div class="trialApproval">
						<div class="message_iconItem">
							<a-badge :count="messageNum">
								<i class="fi fi-rr-envelope" @click="openMessage"></i>
							</a-badge>
						</div>
						<div class="message_iconItem">
							<a-badge :count="messageType?.newPosted">
								<!-- <i class="fi fi-rr-envelope" @click="openMessage"></i> -->
								<i class="fi fi-rr-bell" @click.stop="openNewPosted"></i>
							</a-badge>
								<div class="message_iconItem_value select_block" v-show="isNewPosted" style="width: 40rem">
								<newPosted ref="newPosted"></newPosted>
								</div>
						</div>
					</div>
					<div class="homeMain_user">
						<div class="homeMain_user_icon" @click="openAccount">
							<img :src="userDetail.avatar" alt="">
						</div>
						<div class="homeMain_user_detail">
							<div class="homeMain_user_icon" @click="openAccount">
								<img :src="userDetail.avatar" alt="">
							</div>
							<div v-if="userDetail.systemUser == 3" class="username">{{$t('Header.hello')}}@{{ $t('isTest.userName') }}</div>
							<div v-else class="username">{{$t('Header.hello')}}@{{ userDetail.userName }}</div>
							<div class="homeMain_user_detail_attention">
								<div class="attention_item">
								<!-- 点击事件就用下面的div -->
									<div>{{ userDetail?.followeeCount }}</div>
									<span>{{$t('account.Follow')}}</span>
								</div>
								<div class="attention_item">
									<div>{{ userDetail?.followerCount }}</div>
									<span>{{$t('account.Fans')}}</span>
								</div>
							</div>
							<div class="homeMain_subscribe">
								<div>
									<span class="font">Status</span>
									<span v-if="userDetail.timeData.isExpiration" class="stateSucsess font">Valid <i class="fi fi-ss-check-circle"></i></span>
									<span v-else class="stateError font">Expire <i class="fi fi-ss-check-circle"></i></span>
									<span class="time">{{ userDetail.timeData.text }}</span>
								</div>
							</div>
							<div class="homeMain_select">
								<!-- <div class="select_item_box" @click.stop="isLanguage = !isLanguage">
									<div class="select_item">
										<span class="icon iconfont icon-yuyan"></span>
										<span class="select_item_des">{{$t('Header.language')}}</span>
										<span class="icon iconfont icon-xiala" :class="{'active': isLanguage}"></span>
									</div>
									<ul class="select_list" :class="{'active': isLanguage}" @click.stop="">
										<li class="select_item" v-for="item in language"  @click="setLocale(item.value)">
											<span class="select_item_des">{{ item.name }}</span>
										</li>
									</ul>
								</div> -->
								<div class="select_item" @click="orderForm()">
									
									<i class="fi fi-rs-notebook"></i>
									<span class="select_item_des">{{$t('Header.ViewOrders')}}</span>
								</div>
								<router-link class="select_item" v-if="userDetail.systemList.indexOf(3) >= 0"  :to="`/administrator`">
									<span class="icon iconfont icon-yonghu"></span>
									<span class="select_item_des">Administrator</span>
								</router-link>
								<router-link class="select_item" :to="`/Affiliate`" v-if="userDetail.systemList.indexOf(2) >= 0">
									<span class="icon iconfont icon-yonghu"></span>
									<span class="select_item_des">Affiliate</span>
								</router-link>
								<div class="select_item" @click="getTutorial()">
									<span class="fi fi-rr-book-user"></span>
									<span class="select_item_des">{{$t('Header.Tutorial')}}</span>
								</div>
								<div class="select_item_long"></div>
								<div class="select_item" @click="logout()">
									<span class="icon iconfont icon-tuichu"></span>
									<span class="select_item_des">{{$t('Header.logOff')}}</span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="userSystem" v-if="userDetail.systemList.indexOf(1) == -1">
					You can use these features only after becoming a regular user~
				</div>
				<div class="router" v-else-if="!getLangIsShowMark">
					<home ref="home" @setTask="setTask"></home>
				</div>
			</div>
		</div>

		<payOrder ref="payOrder"></payOrder>
		<UpgradePlan ref="UpgradePlan"></UpgradePlan>
		<TaskPage ref="TaskPage"></TaskPage>
		
		<div class="mark_loading" v-show="getLangIsShowMark">
			<a-spin size="large" />
		</div>
		<!-- <RobotAssist v-if="!getLangIsShowMark"></RobotAssist> -->
		<scaleVideo ref="scaleVideo"></scaleVideo>
		<!-- 进行续订 -->
		<renew ref="renew"></renew>
		<projectSetting ref="projectSetting" @getHistory="settingGetHistory"></projectSetting>
    </div>
</template>
<script >
import { defineComponent, createVNode, ref,toRefs, reactive, computed, onMounted, nextTick, watch, provide } from "vue";
import { isEmail } from "@/tool/util";
import { setCookie, getCookie, WriteCookie,clonAllCookie } from "@/tool/cookie";
import payOrder from "@/component/Pay/payOrder.vue";
import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
import renew from "@/component/HomePage/renew.vue";
// import Habit from "@/component/Detail/habit.vue";
import TaskPage from "@/component/HomePage/TaskPage.vue";
import UpgradePlan from "@/component/HomePage/UpgradePlan.vue";
import { Https } from "@/tool/https";
import { Modal, message } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import RobotAssist from "@/component/HomePage/RobotAssist.vue";
import scaleVideo from "@/component/HomePage/scaleVideo.vue";
import newPosted from "@/component/HomePage/newPosted.vue";
import { useStore } from "vuex";
import { setLang } from "@/tool/guide";
import  showViewVideo from "@/tool/mount";
import { useI18n } from "vue-i18n";
import { gsap, TweenMax,TweenLite } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import MyWs from "@/tool/webSocket";
import MyEvent from "@/tool/myEvents";
import { useRouter,useRoute } from 'vue-router'
import {openTypeList} from "@/tool/listData.js";
import home from "@/component/home/index.vue";
import projectSetting from '@/component/home/newProject/setting.vue'
export default defineComponent({
    components: {
        VerificationCodeInput,
		renew,
		// Habit,
		RobotAssist,
		scaleVideo,
		newPosted,
		UpgradePlan,
		payOrder,
		TaskPage,
		home,
		projectSetting,
    },
	setup(){
        const store = useStore();
		const {t} = useI18n()
		const {locale} = useI18n()
		const route = useRoute()
		const router = useRouter()
		const homeMainData = reactive({
			leftShow:false,
			openType:'',
			openTypeChild:'',
			isLanguage:false,
			openTypeList:openTypeList(t),
			projectSetting:null,
			historyData:{
				isNoData:false,
				isShowLoading:false,
				isNull:false,
				searchCollectionName:'',
				historyTextarea:'',
				historyList:[],
				selectHistoryIndex:-1,
				page:1,
				size:10,
			},
			bathGenerationList:["poseTransfer","SERIES_DESIGN","toProduct","relight"]
		})
		const historyData = reactive({
			
		})
		watch(() => route.query,
			(query, oldQuery) => {
				nextTick(()=>{
					const key = Object.keys(query)?.[0]
					if(key){
						if(query.id){
							homeMainData.openType = 'history'
							homeMainData.openTypeChild = query.id
						}else{
							homeMainData.openType = Object.keys(query)[0]
							homeMainData.openTypeChild = query[Object.keys(query)[0]]
						}
					}else{
						homeMainData.openType = ''
						homeMainData.openTypeChild = ''
					}
				})
			},
			{ immediate: true } // 立即触发一次以处理初始参数
		);
		let userDetail= computed(()=>{
			return store.state.UserHabit.userDetail
		})
		let isMurmur = ref()
		let credits = computed(()=>{
			return store.state.UserHabit.credits.value
		})
		
		let activeCredits = ref(false)
		let getLangIsShowMark = ref(true)
		let messageNum = computed(()=>{
			return store.state.UserHabit.messageSystem.messageNum
		})
		let messageType = computed(()=>{
			return store.state.UserHabit.messageSystem.messageType
		})
		let stateList = reactive({
			isNewPosted:false,
			isLanguage:false,
		})
		let newPosted = ref(null)

		let getUnreadCount = ()=>{
			Https.axiosGet(Https.httpUrls.getUnreadCount).then((rv)=>{
				if(rv){
					store.commit('setMessageSystem',[rv])
				}
			})
		}
		MyWs.close()
		// MyWs.linkWs("wss://"+MyWs.messageUrl,'message')
		MyWs.linkWs("wss://"+MyWs.messageUrl,'message')
		let getWsMessage = (data)=>{
			let userInfo = ['followeeCount','followerCount']
			let obj = {}
			let isObj = false
			data.forEach(element => {
				const keys = Object.keys(element)[0]
				if(userInfo.indexOf(keys) > 0){
					obj[keys] = element[keys]
					isObj = true
				}
			});
			if(isObj)store.commit('upUserDetail',obj)

			store.commit('setMessageSystem',data)
		}
		MyEvent.add('getMessage',getWsMessage)
		let openNewPosted = ()=>{
			stateList.isNewPosted = !stateList.isNewPosted
			newPosted.value.init()
			document.addEventListener(
                "click",
                closeShowOperateContent,
                false
            );
		}
		 //点击下拉图标出现操作
		let changeLanguage=() =>{
			stateList.isLanguage = !stateList.isLanguage;
            document.addEventListener(
                "click",
                closeShowOperateContent,
                false
            );
		}

        //关闭下拉图标
        let closeShowOperateContent=() =>{
			stateList.isLanguage = false
			stateList.isNewPosted = false
            document.removeEventListener("click", closeShowOperateContent);
        }
		let renew = ref(null)
		const openUpgradeToPro = ()=>{
			renew.value.init()
		}
		onMounted(async ()=>{
			let test = getCookie('isTest')
			let isTest =JSON.parse(test)
			//判断账号剩余时间是否太短
			let isModalOne = JSON.parse(sessionStorage.getItem("isTimeOne"))
			if(!isModalOne){//判断是否是试用用户
				await new Promise(async (resolve) => {
					if(isTest){
						resolve('')
					}else{
						await Https.axiosPost(Https.httpUrls.getExpiredTime,{}).then((rv) => {
							if (rv) {
								let dateNow = Date.now()
								let date =  new Date(dateNow)
								let rvDate = new Date(rv);
								let diffInMilliseconds = Math.abs(date - rvDate); // 获取时间差的毫秒数
								let days = Math.floor(diffInMilliseconds / (24 * 60 * 60 * 1000)); // 计算天数
								let hours = Math.floor((diffInMilliseconds % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000)); // 计算小时数
								let minutes = Math.floor((diffInMilliseconds % (60 * 60 * 1000)) / (60 * 1000)); // 计算分钟数
								if(days < 5){
									setTimeout(() => {
										let text = {
											str:`${t('HomeView.jsContent4',{days:days,hours:hours})}<a href="https://code-create.com.hk/aida" target="_blank">${t('HomeView.jsContent8')}</a>`,
											title:`${t('HomeView.jsContent7')}`,
										}
										dataDom.affiche.init(text)
									}, 500);
								}
								resolve('')
							}else{
								resolve('')
							}
						})
					}
				})
			}
			getUnreadCount()
			nextTick(()=>{
				setPorfolioDom()
			})
		})
		const setOpenType = (type,list)=>{
			if(homeMainData.openType == type){
				homeMainData.openType = ''
			}else {
				homeMainData.openType = type
				if(type == 'history'){
					if(list.length == 0){
						
					}
				}
			}
		}
		let setPorfolioDom = ()=>{
			homeMainData.historyData.isShowLoading = false
			homeMainData.historyData.isNoData = false
			let imgParent = document.querySelector('.homeMain_max .detail .material_content_list_loding .historyPage_loading')
			new IntersectionObserver(
				(entries, observer) => {
					// 如果不是相交，则直接返回
					if (!entries[0].intersectionRatio) return;
					getHistory()
					homeMainData.historyData.page += 1
				},
			).observe(imgParent);
		}
		const setRouter = (item,childItem)=>{
			let itemRouter = item.router 
			if(childItem.router)itemRouter = itemRouter + '?' + childItem.router
			router.push(itemRouter)
		}
		const setHistory = (item,childItem)=>{
				// router.push(`/home/tools?tools=toProduct&id=${childItem.id}`)
			if(childItem.process == 'SERIES_DESIGN' || childItem.process == "SINGLE_DESIGN"){
				router.push(`/home?history=${childItem.id}`)
			}else{
				let processList = {
					toProduct:'TO_PRODUCT_IMAGE',
					relight:'RELIGHT',
					poseTransfer:'POSE_TRANSFER',
					deReconstruction:'DE_RECONSTRUCTION',
					patternMaking3D:'THREE_D_PLATE_MAKING',
					canvasUpload:'CANVAS',
				}
				let process = ''
				for (const key in processList) {
					if(processList[key] == childItem.process){
						process = key	
						break
					}
				}
				router.push(`/home/tools?tools=${process}&id=${childItem.id}`)
			}
			// router.push(`/home?history=${childItem.id}`)
		}
		const settingGetHistory = ()=>{
			homeMainData.historyData.page = 1
			homeMainData.openTypeList.history.list = []
			homeMainData.historyData.isShowLoading = false
			homeMainData.historyData.isNoData = false
		}
		provide('settingGetHistory',settingGetHistory)
		const getHistory = ()=>{
			if(homeMainData.historyData.isShowLoading && !homeMainData.historyData.isNoData)return
			homeMainData.historyData.isShowLoading = true
			let data = {
                page:homeMainData.historyData.page,
                size:homeMainData.historyData.size,
				projectName:homeMainData.historyData.searchCollectionName,
				asc:0,
				process:'',
                // startDate:startDate,
                // endDate:endDate,
				// intersection:1,
            }
            Https.axiosPost( Https.httpUrls.historyProject, data).then(
			// Https.axiosPost( Https.httpUrls.queryUserGroup, data).then(
                (rv) => {
					if(data.page == 1 && rv.content.length == 0){
						homeMainData.historyData.isNull = true
					}else{
						homeMainData.historyData.isNull = false
					}
					if (rv.content.length > 0) {
							homeMainData.historyData.isNull = false
							homeMainData.openTypeList.history.list.push(...rv.content)
					} else {
						homeMainData.historyData.isNoData = true
					}
					homeMainData.historyData.isShowLoading = false
                }
            ).catch(res=>{
				homeMainData.historyData.isShowMark = false
				if(data.page == 1){
					homeMainData.historyData.isNull = true
				}
				homeMainData.historyData.isNoData = true
			});
		}
		const editHistory = (item,index,el,list)=>{
			if(homeMainData.historyData.selectHistoryIndex == -1){
				let top = el.target.parentNode.parentNode.getBoundingClientRect().top
				let parentTop = el.target.parentNode.parentNode.parentNode.offsetTop
				let parentHeight = el.target.parentNode.parentNode.parentNode.offsetHeight
				let operation = el.target.parentNode.querySelector('.operation')
				homeMainData.historyData.selectHistoryIndex = index
				//判断弹窗是加载按钮上面还是下面
				if(list.length == 1){
					operation.classList.add('activeLeft')
					return
				}
				if((parentTop+parentHeight)/2 < top){//加在按钮上面
					operation.classList.add('active')
				}else{
					operation.classList.remove('active')
				}
			}else{
				homeMainData.historyData.selectHistoryIndex = -1
			}
			let operationCli = ()=>{
				homeMainData.historyData.selectHistoryIndex = -1
				document.removeEventListener("click", operationCli);
			}
			document.addEventListener("click",operationCli,);
		}
		const editName = (item)=>{
			homeMainData.historyData.selectHistoryIndex = -1
			homeMainData.openTypeList.history.list.forEach((item)=>{
				item.editName = false
			})
			item.editName = true
			homeMainData.historyData.historyTextarea = item.name 
		}
		const deleteItem = (item)=>{
			Https.axiosPost(Https.httpUrls.projectDetail,{},{params:{projectId:item.id}}).then(
				(rv) => {
					homeMainData.historyData.selectHistoryIndex = -1
					settingGetHistory()
					if(homeMainData.openTypeChild == item.id){
						router.push('/home')
					}
				}
			);
		}
		const setting = (item)=>{
			homeMainData.projectSetting.init(item)
		}
		const accomplishHistory = (item)=>{
			let data = {
                name:homeMainData.historyData.historyTextarea,//library名字
				id :item.id,//history id
			}
			Https.axiosPost(Https.httpUrls.projectSaveOrUpdate, data).then(
				(rv) => {
					item.name = homeMainData.historyData.historyTextarea 
					item.editName = false
					homeMainData.historyData.historyTextarea = ''
				}
			).catch((res)=>{
			});
			
		}
		const newProject = ()=>{
			router.push('/home')
		}
		const bathGeneration = (item)=>{
			homeMainData.openType = ''
			homeMainData.historyData.selectHistoryIndex = -1
			router.push(`/home/cloud?type=creation&id=${item.id}&name=${item.name}`)
		}
		return {
			store,
			userDetail,
			t,
			...toRefs(homeMainData),
			...toRefs(historyData),
			locale,
			isMurmur,
			credits,
			activeCredits,
			getLangIsShowMark,
			messageNum,
			messageType,
			...toRefs(stateList),
			newPosted,
			openNewPosted,
			changeLanguage,
			closeShowOperateContent,
			renew,
			openUpgradeToPro,
			setOpenType,
			setRouter,
			setHistory,
			editHistory,
			settingGetHistory,
			editName,
			deleteItem,
			setting,
			accomplishHistory,
			newProject,
			bathGeneration,
		}
	},
    data() {
        return {
            email: "",
            emailCode: ["", "", "", "", "", ""], //邮箱验证码
            time: 60, //60秒倒计时
            timer: 0,
            timerOperate: null,
            numTime: 30,
            timerSec: null,
            modalWarning: null,

			language:[
				{name:'English',value:'ENGLISH'},
				{name:'中文',value:'CHINESE_SIMPLIFIED'},
				// {name:'한국인',value:'KOREAN'},
				// {name:'にほんご',value:'JAPANESE'},
				// {name:'Русский',value:'RUSSIAN'},
				// {name:'Français',value:'FRENCH'},
				// {name:'แบบไทย',value:'THAI'},
				// {name:'Tiếng Việt',value:'VIETNAMESE'},
				// {name:'Italiano',value:'ITALIAN'},       
			],
        };
    },
	directives:{
	},
    async mounted() {
		await new Promise((resolve, reject) => {
			this.store.dispatch('getLangType').then(()=>{
				this.getLangIsShowMark = false
				resolve()
			}).catch(()=>{
				this.getLangIsShowMark = false
				reject()
			})
		})

        let isMurmur = getCookie('isMurmur')//获取是否是试用用户
        this.isMurmur =JSON.parse(isMurmur)
        if (this.userDetail.userId && this.userDetail.userId > -1) {
            this.accountIsLogin();
        } else {
            this.$router.replace("/");
        }
		if(!this.isMurmur){
			this.operateClick();
			document.addEventListener("click", this.operateClick);
		}
		this.getCredits()
		this.getLang('')
		//语言适配
		

		let tl1 = gsap.timeline({ paused: true });
		let userDetailMax = document.querySelector('.homeMain_max .homeMain_user')
		let userDetail = document.querySelector('.homeMain_max .homeMain_user_detail')
		// let anmiation = TweenMax.to(userDetailMax,1, {'margin-top':'30px',opacity:1})
		// anmiation.stop()
		let state
		tl1
		.to(userDetail,.3, {opacity:1,display:'flex'})
		// .to(userDetailIcon,.3, {'left':'16rem',y:'25%',x:'-50%',scale:1.5,opacity:1},'-=.3')
		let overTime
		let outTime
		userDetailMax.addEventListener('mouseenter',(event)=>{
			if(state && !outTime)return
			clearTimeout(overTime)
			clearTimeout(outTime)
			overTime = setTimeout(() => {
				state = true
				this.isLanguage = false
				tl1.play()
			}, 500);
		})
		userDetailMax.addEventListener('mouseleave',(event)=>{
			if(overTime){
				clearTimeout(overTime)
			}
			if(!state)return
			clearTimeout(outTime)
			outTime = setTimeout(() => {
				state = false
				tl1.reverse()
			}, 500);
		})
		let orderId = sessionStorage.getItem('orderId');//进入首页后是否打开订单列表查询到订单
		if(orderId){
			let payOrder = this.$refs.payOrder
			payOrder.init(orderId)
		}
    },
    methods: {
		setTask(data){
			this.openTask(data)
		},
       
        turnToPage(name) {
            let noRefresh = name === "home" ? true : false;
            this.$router.push({ name: name, params: { noRefresh: noRefresh } });
        },
		UpgradePlan(){//购买积分
			let UpgradePlan = this.$refs.UpgradePlan
			UpgradePlan.init()
		},
		Assignment(){//任务
			// let num = 123+this.credits
			// this.store.commit('setCredits',num)
		},
		getCredits(){//刷新当前积分
			if(!this.activeCredits){
				this.activeCredits = true
				this.store.dispatch('getCredits').then((rv)=>{
					setTimeout(()=>{
						this.activeCredits = false
					},300)
				})
			}else{
				this.activeCredits = false
			}
			
			
		},
       

    

		//查看订单
		orderForm(){
			let payOrder = this.$refs.payOrder
			payOrder.init()
		},
		//教程
		getTutorial(){
			let url = 'https://code-create.com.hk/wp-content/uploads/2025/02/aida_3.0-Manual-2_5-CN.pdf'
			if(this.locale == 'ENGLISH'){
				url = 'https://code-create.com.hk/wp-content/uploads/2025/02/aida_3.0-Manual-2_5-EN.pdf'
				showViewVideo({url:'https://code-create.com.hk/wp-content/uploads/2025/02/AiDA-demo-video_2_5_EN.mp4'})
			}else{
				showViewVideo({url:'https://code-create.com.hk/wp-content/uploads/2025/02/AiDA-demo-video_2_5_CN.mp4'})
			}
			//打开视频
			const a = document.createElement('a');
			a.href = url;
			a.target = '_blank';
			a.download = 'aida_3.0-Manual.pptx'; // 下载的文件名
			document.body.appendChild(a);
			a.click();
		},
        //登出
        async logout() {
            let data = {
                userId: this.userDetail.userId,
            };
			await Https.axiosPost(Https.httpUrls.accountLogout, data).then((rv) => {
				// WriteCookie("token");
			});
			this.$router.replace("/");
			this.store.commit('createDetail')
			this.store.commit('createProbject')

			// WriteCookie("token");
			clonAllCookie()
			// window.location.reload()
            
        },
        //判断是否登录
        accountIsLogin() {
            let data = {
                userId: this.userDetail.userId,
            };
            Https.axiosPost(Https.httpUrls.accountIsLogin, data).then((rv) => {
                if (!rv) {
                    this.$router.replace("/");
                }
            });
        },

        //点击重置判断是否长时间五操作
        operateClick() {
            if (this.timer) {
                clearTimeout(this.timer);
            }
            let _this = this;
            let timeNum = 1000 * 60 * 120;
            this.timer = setTimeout(() => {
                this.modalWarning = Modal.warning({
                    title: () =>
						this.t('Header.jsContent3',{numTime:_this.numTime}),
                    icon: createVNode(ExclamationCircleOutlined),
                    okText: "Ok",
					centered:true,
                    onOk() {
                        _this.numTime = 30;
                        clearInterval(_this.timerSec);
                    },
                });
                _this.numCounter();
            }, timeNum);
        },

        numCounter() {
            this.timerSec = setInterval(() => {
                if (this.numTime > 0) {
                    this.numTime = this.numTime - 1;
                } else {
                    clearTimeout(this.timer);
                    clearInterval(this.timerSec);
                    this.logout();
                    this.modalWarning.destroy();
                }
            }, 1000);
        },
		//获取当前语言
		getLang(v){
			let data
			Https.axiosPost(Https.httpUrls.getUserLanguage, data).then(
                (rv) => {
                    if (rv) {
						this.locale = rv
						setLang(rv)
                    }
                }
            );
		},
		setLang(v){
			
			Https.axiosGet(Https.httpUrls.changeUserLanguage,{params:{language:v}}).then((rv) => {
				if (rv) {
					if (rv) {
                        let token = rv;
                        setCookie("token", token);
						this.getLang('')
						// if(this.$router.currentRoute._value.path == '/home'){
						// 	this.$router.push("/home")
						// }else{
						// 	this.$router.push("/home")
						// }
						this.store.commit('clearAllData')
						// window.location.reload()
						window.location.href = '/home';
                    }
				}
			})
		},
		
		setLocale(v){
			this.setLang(v)
		},
		openTask(data){
			let taskPage = this.$refs.TaskPage
			taskPage.init(data)
		},
		openAccount(){
			this.$router.push("/home/account")
		},
		openMessage(){
			this.$router.push("/home/account/accountMessage")
		},
    },
});
</script>

<style lang="less" scoped>
.homeMain_max{
	position: relative;
	display: flex;
	height: 100%;
	box-sizing: border-box;
	> .leftBox{
		height: 100%;
		background: #f5f5f5;
		overflow: hidden;
		width: 26rem;
		transition: width .3s;
		&.leftHide{
			width: 0;
		}
		> .left{
			width: 26rem;
			height: 100%;
			padding: 2rem;
			display: flex;
			flex-direction: column;
			.marginT2{
				margin-top: 2rem;
			}
			.list{
				display: flex;
				flex-direction: column;
				// padding: 1.2rem;
				max-height: 5rem;
				border-radius: 2rem;
				> .titleBox{
					padding: 1.2rem;
					display: flex;
					font-size: 1.4rem;
					cursor: pointer;
					justify-content: space-between;
					align-items: center;
					font-weight: 600;
					i{
						display: flex;
					}
					> .left{
						display: flex;
						align-items: center;
						> i{
							margin-right: .8rem;
						}
						> span{
							line-height: 2.4rem;
							color: #52525b;
							transition: all .3s;
						}
					}
					> .right{
						> i{
							transition: all .3s;
						}
					}
					&:hover{
						> .left{
							> span{
								color: #000;
							}
						}
					}
				}
				> .detailBox{
					overflow: auto;
					scrollbar-width: none;
					flex: 1;
					> .detail{
						position: relative;
						height: 100%;
						> img{
							width: 100%;
						}
						> .detailItem{
							cursor: pointer;
							padding: 1.2rem 1.1rem 1.2rem 2.2rem;
							font-size: 1.4rem;
							font-weight: 400;
							margin-bottom: .4rem;
							border-radius: .8rem;
							display: flex;
							align-items: center;
							flex-wrap: wrap;
							> .time{
								font-size: 1.2rem;
								opacity: .5;
							}
							> i{
								margin-right: .8rem;
								display: flex;
							}
							> .text{
								> span{
								//只在一行显示
									
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
							}
							&.active{
								background: #f5f5f5;
							}
							&:hover{
								background: #f5f5f5;
							}
							&.history{
								background: #f5f5f5;
								&:hover{
									background: #fdfdfd;
								}
								&.active{
									background: #fdfdfd;
								}
								> .text{
									> span{
										width: 100%;
										font-weight: 600;
										line-height: 2rem;
										font-size: 1.8rem;
										display: inline-block;
									}
									> textarea{
										resize: none;
										border: none;
										background: rgba(0, 0, 0, 0);
										font-weight: 600;
										line-height: 2rem;
										height: 4rem;
										width: 100%;
										font-size: 1.8rem;
									}
								}
								
								> .type{
									border: 1px solid #0000000d;
									padding: .4rem .8rem;
									border-radius: .8rem;
									color: #71717a;
									font-size: 1.4rem;
									max-width: 70%;
									white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;
								}
								> .btn{
									border: 1px solid #0000000d;
									border-radius: .8rem;
									margin-left: auto;
									position: relative;
									> i{
										width: 3rem;
										height: 3rem;
										display: flex;
										align-items: center;
										justify-content: center;
									}
									> .fi-br-check{
										border-radius: 50%;
										background: #38c793;
										color: #fff;
										width: 2rem;
										height: 2rem;
									}
									> .operation{
										position: absolute;
										right: 0;
										top: 3rem;
										background: #e4e4e7;
										border: 1px solid #d4d4d8;
										border-radius: 1rem;
										z-index: 7;
										padding: .8rem;
										box-shadow: 0 0 3.2rem -.8rem #1a1b1e33;
										position: absolute;
										&.active{
											top: auto;
											bottom: 3rem;
										}
										&.activeLeft{
											bottom: 0;
											right: 3rem;
										}
										> .item{
											padding: .8rem;
											color: #52525b;
											display: flex;
											border-radius: .8rem;
											cursor: pointer;
											align-items: center;
											> i{
												font-size: 1.6rem;
												display: flex;
											}
											> span{
												margin-left: .5rem;
												white-space: nowrap;
											}
											&:hover{
												background: #efeff1;
											}
										}
									}
								}
								
							}
						}
						> .detailItem:last-child{
							margin-bottom: 0;
						}
						> .material_content_list_loding{
							text-align: center;
							height: 50px;
							.page_loading{
								display: block;
								width: 50px;
								height: 50px;
								margin: 0 auto;
							}
							img{
								height: calc(10rem*1.2);
							}
						}
					}
				}
				&.active{
					padding: 1.2rem;
					overflow: hidden;
					max-height: 100%;
					background: #00000008;
					> .titleBox{
						padding: 0;
						margin-bottom: 1.6rem;
						> .right{
							> i{
								transform: rotate(180deg);
							}
						}
					}
				}
				&.language{
					> .titleBox{
						padding: .8rem;
						background: #00000000;
						height: 5rem;
						> .left{
							> i{
								margin-right: 2rem;
							}
						}
					}
					> .detailBox{
						> .detail{
							> .detailItem{
								padding: .8rem;
								> svg{
									margin-right: 2.5rem;
									width: 2rem;
									height: 2rem;
								}
								> span{
									color: #111a18;
									opacity: .5;
									margin-left: 4.5rem;
									font-weight: 600;
								}
								&.active{
									> span{
										color: #52525b;
										opacity: 1;
										margin-left: 0px;
									}
								}
							}
						}
					}
				}
			}
			> .title{
				display: flex;
				padding: .4rem;
				align-items: center;
				justify-content: space-between;
				> span{
					font-size: 2rem;
					font-weight: 600;
				}
				> svg{
					cursor: pointer;
				}
			}
			
			> .navList{
				height: 100%;
				overflow: hidden;
				display: flex;
				flex-direction: column;
			}
			> .navListBottom{
				display: flex;
				flex-direction: column;
			}
			> .homeMain_right_content {
				top: 0;
				left: 0;
				display: flex;
				align-items: center;
				width: 100%;
				.homeMain_icon {
					font-size: 3.6rem;
					position: relative;
					top: 0.3rem;
				}
				
				.username {
					font-size: 1.6rem;
					color: #1a1a1a;
					margin: 0 0.8rem;
					font-weight: 900;
					span{
						margin: .7rem;
					}
				}
				.credits{
					font-size: 1.6rem;
					color: #1a1a1a;
					font-weight: 900;
					width: auto;
					padding: 0 1.6rem;
					cursor: auto;
					display: flex;
					line-height: 6rem;
					height: 6rem;
					box-sizing: content-box;
					border-radius: 4rem;
					span{
						width: 5rem;
						display: inline-block;
						overflow: hidden;
						display: flex;
						margin-right: .9rem;
						.credits_item{
							transition: .3s all;
							// height: 4rem;
							height: 100%;
							// height: 3.2rem;
							div{
								height: 100%;
								display: flex;
								align-items: center;
								justify-content: center;
							}
						}
					}
					i{
						height: 100%;
						border-left: .1rem solid ;
						padding-left: 1.3rem;
						margin-left: 1.5rem;
						font-size: 1.6rem;
						cursor: pointer;
						display: flex;
						align-items: center;
					}
					
					.fi-br-refresh{
						margin-left: 0;
						border-left: none;
						padding-left: 0;
						&.active{
							transition: all .3s;
							transform: rotate(360deg);
						}
					}
				}
				
			}
			> .gallery_btn{
				margin-top: 1.2rem;
			}
			
		}
	}
	.newObj{
		border-radius: 1.2rem;
		padding: 1.6rem 1.2rem;
		border: 1px solid #0003;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		> svg{
			margin-right: .4rem;
			width: 2.4rem;
			height: 2.4rem;
		}
		> p{
			font-size: 1.6rem;
			font-weight: 600;
			margin: 0;
		}
	}
	> .rightBox{
		flex: 1;
		overflow: hidden;
		> .right{
			display: flex;
			width: 100%;
			height: 100%;
			flex-direction: column;
			position: relative;
			> .user{
				margin-bottom: 1rem;
				display: flex;
				justify-content: flex-end;
				padding: 2rem 2rem 1.2rem;
				align-items: center;
				> .left{
					display: flex;
					align-items: center;
					margin-right: auto;
					> .newObj{
						background: #f5f5f5;
						padding: 1.2rem;
					}
					> svg{
						margin-right: 2rem;
						cursor: pointer;
					}
				}
				> .trialApproval{
					display: flex;
					margin-right: 1rem;
					align-items: center;
					> .message_iconItem{
						position: relative;
						cursor: pointer;
						i{
							width: 3rem;
							height: 3rem;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}	
				.homeMain_user{
					height: 6rem;
					width: 6rem;
					// margin-left: auto;

					position: relative;
					.homeMain_user_icon{
						height: 6rem;
						width: 6rem;
						position: relative;
						transform-origin: top;
						overflow: hidden;
						z-index: 2;
						left: 0;
						border-radius: 50%;
						cursor: pointer;
						background: #fff;
						img{
							width: 100%;
							height: 100%;
							object-fit: contain;
						}
						// transition: all .3s;
					}
					.homeMain_user_detail{
						z-index: 999;
						position: absolute;
						top: calc(100% + .5rem);
						background: #fff;
						width: 32rem;
						height: auto;
						opacity: 0;
						right: 0px;
						display: none;
						// box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
						text-align: center;
						flex-direction: column;
						align-items: center;
						padding: 1.2rem 2rem;
						border: 2px solid #000;
						border-radius: 2rem;
						.username,.homeMain_user_detail_attention,.homeMain_subscribe{
							margin-bottom: 2rem;
						}
						.homeMain_user_icon{
							position: relative;
						}
						.homeMain_subscribe{
							padding: 2rem;
							background: #f3f3f6;
							border-radius: 1.4rem;
							cursor: pointer;
							width: 100%;
							> div{
								display: flex;
								margin-bottom: 2rem;
							}
							> div:last-child{
								margin-bottom: 0;
							}
							.font{
								font-size: 1.6rem;
								font-weight: 600;
								margin-right: 1rem;
							}
							.stateSucsess{
								color: #3ab45c;
							}
							.stateError{
								color: #b43a3a;
							}
							.time{
								font-size: 1.4rem;
								font-weight: 400;
								margin-left: auto;
							}
						}
						.homeMain_select{
							width: 100%;
							.select_item {
								padding: 0 1rem;
								border-radius: .8rem;
								line-height: 4rem;
								color: #4d4d4d;
								display: flex;
								align-items: center;
								cursor: pointer;
								user-select: none;
								width: 100%;
								flex-wrap: wrap;
								&:hover {
									background: #f3f3f6;
								}

								.iconfont ,.fi-rr-book-user {
									// font-size: 1.4rem;
								}

								.select_item_des {
									font-size: 1.6rem;
									margin-left: 1rem;
									font-weight: 500;
								}
							}
							.select_item_long{
								border-bottom: 1px solid #eceaea;
								margin: 2rem 0;
							}
							.icon-xiala{
								margin-left: auto;
								&.active{
									transform: rotate(180deg);
								}
							}
							.select_list{
								height: 0;
								overflow: hidden;
								transition: all .3s;
								width: 100%;
								margin: 0;
								> li{
									padding-left: 2.5rem;
								}
								&.active{
									height: auto;
								}
							}
						}
						.homeMain_user_detail_attention{
							width: 100%;
							display: flex;
							justify-content: space-between;
							padding-left: 3.5rem;
							padding-right: 3.5rem;
							.attention_item{
								display: flex;
								flex-direction: column;
								align-items: center;
							}
							.attention_item_active{
								cursor: pointer;
							}
							.attention_item_active:hover{
								color: #39215b;
								span{
									color: #39215b;
								}
							}
							div{
								font-size: 1.6rem;
								font-weight: 600;
							}
							span{
								font-size: 1.4rem;
								color: #949eae;
							}
						}
					}
					
				}
			}
			> .router{
				flex: 1;
				overflow: hidden;
				padding: 0 6rem;
				padding-bottom: 2rem;
			}
			> .userSystem{
				top: 0;
				left: 0;
				position: absolute;
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, 0.4);
				z-index:2;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-weight: 600;
				font-size: 4rem;
			}
		}
	}
}
.select_block {
	z-index: 1050;
	position: absolute;
	right: 0rem;
	top: 4rem;
	width: 13.5rem;
	background: #ffffff;
	box-shadow: 0px 0.4rem 0.4rem 0px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	border: 1px solid #000000;
	height: auto;
	padding: 2rem;
    border-radius: 2rem;
	// &.select_list{
	// 	top: 56%;
	// 	left: 100%;
	// 	// transform: translateX(5%);
	// }
	.homeMain_select{
		width: 100%;
		.select_item {
			height: 4.1rem;
			color: #4d4d4d;
			display: flex;
			align-items: center;
			cursor: pointer;
			user-select: none;
			width: 100%;
			&:hover {
				background: #f7f7f7;
			}

			.iconfont ,.fi-rr-book-user {
				// font-size: 1.4rem;
			}

			.select_item_des {
				font-size: 1.6rem;
				margin-left: 1rem;
				font-weight: 500;
			}
		}
	}
	
}
.modal_component {
    .skip_content {
        width: 6rem;
        height: 3rem;
        line-height: 2.8rem;
        border: 0.1rem solid #000;
        font-size: 1.4rem;
        color: #000;
        position: absolute;
        top: 1.8rem;
        right: 1.8rem;
        cursor: pointer;
    }

    .bind_email_content {
        padding: 4.8rem 9.2rem 6rem;

        .bind_email_tip {
            font-size: 1.8rem;
            color: #a5b0c2;
            line-height: 1.9rem;
            text-align: center;
        }
        .bind_email {
            margin-top: 2rem;
            font-size: 2.2rem;
            font-weight: 400;
            color: #030303;
            text-align: center;
        }

        .bind_email_form_content {
            .bind_email_form_title {
                font-size: 2.2rem;
                font-weight: bold;
                color: #030303;
                line-height: 2.4rem;
            }

            .bind_email_form_input {
                width: 100%;
                height: 4.6rem;
                margin-top: 1rem;
                border: 0.1rem solid #b4bed7;
                padding-left: 2.1rem;
                line-height: 4.6rem;
                font-size: 1.8rem;
                box-sizing: border-box;

                &::placeholder {
                    color: #a5b0c2;
                }
            }
        }

        .bind_email_submit_button {
            height: 4.6rem;
            line-height: 4.6rem;
            background: #000;
            font-size: 1.6rem;
            font-weight: 500;
            color: #ffffff;
            width: 12.8rem;
            text-align: center;
            cursor: pointer;
            margin: 3rem auto 0;
        }

        .icon--shangyibu {
            font-size: 2.5rem;
            font-weight: bold;
            color: #030303;
        }

        .email_last_step_content {
            margin-left: 1rem;
            font-size: 2.2rem;
            font-family: PingFang SC;
            font-weight: bold;
            color: #030303;
        }

        .tip_content {
            font-size: 1.3rem;
            font-weight: bold;
            color: #000;
            cursor: pointer;
        }

        .email_last_step_des {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 2.5rem;
            margin-bottom: 1.5rem;

            .sent_email_content {
                font-size: 1.8rem;
                font-weight: bold;
                color: #a5b0c2;
            }
        }
    }
}
</style>