<template>
    <div class="start">
		<div class="createProject" v-if="!selectObject?.type">
			<div v-if="state == 1" class="createProjectBtn">
				<div @click="createProject" class="gallery_btn gallery_btn_radius">New Project</div>
				<div @click="getHistoryProject" class="gallery_btn white gallery_btn_radius">Resume Project</div>
			</div>
			<div v-else-if="state == 2" class="selectProjectBtn">
				<div style="width: 100%; margin: 2rem; display:flex;align-items: center;">
					<i @click="()=>state = 1" style="font-size:3rem; display:flex; cursor: pointer;margin-right:2rem" class="fi fi-rr-arrow-small-left"></i>Please choose your workflow</div>
				<div class="porjectBox">
					<div class="selectProjectBtn_title" v-for="item in opjectList" :key="item.value" @click="selectProject(item)">{{item.title}}</div>
				</div>
			</div>
		</div>
		<workflow v-if="selectObject?.type" ref="workflow" @goHome="()=>state = 1" :workflowType="selectObject.type" :httpWorkflowType="selectObject.httpType"></workflow>
		<div class="mark_loading" v-show="isShowMark">
			<a-spin size="large" />
		</div>
		<affiche ref="affiche"></affiche>
		<div class="userSystem" v-if="userDetail.systemList.indexOf(1) == -1">
			You can use these features only after becoming a regular user~
		</div>
    </div>
</template>
<script lang="ts">
import { defineComponent,computed,onMounted,nextTick,onBeforeUnmount,toRefs, reactive,watch} from 'vue'
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { useStore } from "vuex";
import {useRoute} from 'vue-router'
import { useI18n } from 'vue-i18n'
import workflow from './workflow/index.vue'
// import workspace from './model/workspace.vue'
import { Https } from "@/tool/https";
import router from '@/router';
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
import {projectList} from '@/tool/listData'
import affiche from "@/component/HomePage/affiche.vue";

export default defineComponent({
    components:{
		workflow,affiche
    },
    setup(props,{emit}) {
        const store = useStore();
		const route = useRoute()
		const {t} = useI18n()
		const data = reactive({
			state:1,//状态 1:创建项目 2:选择项目
			selectObject:computed(()=>store.state.Workspace.probjects) as any,//选择的项目
			userDetail:computed(()=>{
				return store.state.UserHabit.userDetail
			}),
			opjectList:[
				{
					title:'Series Design',
					value:'seriesDesign',
					httpValue:'SERIES_DESIGN',
				},{
					title:'Single Product Design',
					value:'singleProductDesign',
					httpValue:'SINGLE_DESIGN',
				},{
					title:'Sketch Design',
					value:'sketchDesign',
					httpValue:'SKETCH_COLLAGE_PROCESS',
				},{
					title:'Print Design',
					value:'printDesign',
					httpValue:'PRINT_DESIGN',
				},{
					title:'Product Design',
					value:'productDrawingDesign',
					httpValue:'FINISHED_PRODUCT',
				},{
					title:'3D Pattern Making',
					value:'printingDesign3D',
					httpValue:'THREE_D_PLATE_MAKING',
				},
			],//项目列表
			isShowMark:false,
		})
		const dataDom = reactive({
			affiche:null as any,
			workflow:null as any
		})
		const createProject =()=>{
			data.state = 2
			createData()
		} 
		const createData = ()=>{
			store.commit("clearAllData");
			store.commit("clearAllCollection");
			store.commit("setAllBoardDataChoose",{});
			store.commit("clearShowSketchboard",{});
			store.commit("clearAllCollection");
		}
		const selectProject =(item:any)=>{
			let data = {
				type:item.value,
				httpType:item.httpValue,//项目类型
			}
			store.commit('setProbject',data)
			let list:any = projectList
			store.commit('setProjectList',list[item.value])
		} 
		const getHistoryProject = ()=>{
			router.push('/home/history')
		}
		const getHistory = ()=>{
			let value = {
				id:Number(route.params.id),
			}
			if(!route.params.id)return
			createData()
			Https.axiosPost(Https.httpUrls.selectHistoryProject,value).then((rv: any) => {
				setProjectData(rv)
			})
		}
		// watch(()=>data.opjectList.type,(newVal,oldVal)=>{
		// 	console.log(newVal,oldVal);
			
		    
		// })
		const getWorks = ()=>{
			let data:any = {
				"accountId": 0,
				"collectionId": 0,
				"coverId": 0,
				"createDate": "",
				id:Number(route.params.id),
				"isDeleted": 0,
				"portfolioDes": "",
				"portfolioName": "",
				"portfolioType": "",
				"status": 0,
				"updateDate": "",
				"userLikeGroupId":'' 
			}
			Https.axiosPost(Https.httpUrls.setPorfolioChoose, data).then(
					(rv: any) => {
					setProjectData(rv)
						// this.setPortfolio(rv.portfolioDTO)
						// this.store.commit("setUserGroupId", rv.userGroupId);
						// this.dealHistoryChooseData(rv, type);
					}
				).catch((res)=>{
				});
		}
		const setProjectData = (rv:any)=>{
			let type:any = data.opjectList.find(obj => obj.httpValue === rv.process);
				//取出数组对象某个值
				let storeData = {
					name:rv.name,
					id:rv.id,
					type:type?.value,
					httpType:rv.process,//项目类型
					ageGroup:rv.workspaceVO.ageGroup,
					style:rv.workspaceVO.style,
					styleId:rv.workspaceVO.styleId,
					styleName:rv.workspaceVO.styleName,
					sex:rv.workspaceVO.sex,
					systemDesignerPercentage:rv.workspaceVO.systemDesignerPercentage,
					position:{
						label:rv.workspaceVO.positionEnum.value,
						value:rv.workspaceVO.positionEnum.name
					},
					positionList:[],
					publishData:{
						id:rv.portfolioDTO.id?rv.portfolioDTO.id:'',
						portfolioDes:rv.portfolioDTO.portfolioDes?rv.portfolioDTO.portfolioDes:'',
						portfolioName:rv.portfolioDTO.portfolioName?rv.portfolioDTO.portfolioName:'',
						tagsDTO:rv.portfolioDTO.tagsDTO?rv.portfolioDTO.tagsDTO:[],
					},
					model:{}
				}
				let model:any = {}
				let position = []
				if(data.selectObject.sex == "Female"){
				// if(rv.workspaceVO.sex == "Female"){
					model = {
						id:rv.workspaceVO.mannequinFemaleId,
						type:rv.workspaceVO.mannequinFemaleType,
						url:rv.workspaceVO.femalePresignedUrl,
					}
					position = store.state.UserHabit.FemalePosition
				}else{
					model = {
						id:rv.workspaceVO.mannequinMaleId,
						type:rv.workspaceVO.mannequinMaleType,
						url:rv.workspaceVO.malePresignedUrl,
					}
					position = store.state.UserHabit.MalePosition
				}
				storeData.model = model
				data.selectObject.positionList = position
				storeData.positionList = position
				store.commit('setProbject',storeData)
				let list:any = projectList
				store.commit('setProjectList',list[type.value])
				nextTick(()=>{
					dataDom.workflow.isUpdataPorject = true
				})
		}
		onMounted(async ()=>{
			let test:any = getCookie('isTest')
			let isTest =JSON.parse(test)
			//判断账号剩余时间是否太短
			let isModalOne = JSON.parse(sessionStorage.getItem("isTimeOne") as any)
			// if(!data.userDetail.isBeginner || data.userDetail.systemUser == 0)return
			if(!isModalOne){//判断是否是试用用户
			// if(!isTest && !isModalOne){//判断是否是试用用户
				await new Promise(async (resolve) => {
					if(isTest){
						// openGuide()
						resolve('')
					}else{
						await Https.axiosPost(Https.httpUrls.getExpiredTime,{}).then((rv: any) => {
							if (rv) {
								let dateNow = Date.now()
								let date:any =  new Date(dateNow)
								let rvDate:any = 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);
								}else{
									// openGuide()
								}
								resolve('')
							}else{
								// openGuide()
								resolve('')
							}
						})
					}
				})
			}else if(!isModalOne && isTest){
			}else{
				// openGuide()
			}
			if(route.params.type == 'Works'){
				getWorks()
			}else{
				getHistory()
			}
		})
		onBeforeUnmount(()=>{
		    // data.selectObject = null
			// store.commit('createProbject')
		})
        return{
			...toRefs(dataDom),
			...toRefs(data),
			createProject,
			selectProject,
			getHistoryProject,
        }
    },

	provide() {
		return {
		}
	},
		
})
</script>
<style lang="less" scoped>
	.start{
		width: 100%;
		height: 100%;
		overflow: hidden;
		position: relative;
		.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;
		}
		> .createProject{
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			> .createProjectBtn,> .selectProjectBtn{
				display: flex;
			}
			> .createProjectBtn{
				> div{
					margin: 1rem;
					width: 19rem;
				}
			}
			> .selectProjectBtn{
				flex-direction: column;
				> .porjectBox{
					display: flex;
					> .selectProjectBtn_title{
						padding: 2rem;
						width: 21rem;
						height: 26rem;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 2rem;
						border: 1px solid #000;
						text-align: center;
						background: #f6f6f6;
						color: #000;
						transition: all .3s;
						font-size: 2rem;
						font-weight: 600;
						margin: 0 2rem;
						&:hover{
							background: #000;
							color: #fff;
						}
					}
				}
			}
		}
	}
</style>