lanecarford_front/src/views/Workshop/selectStyle.vue

<script setup lang="ts">
import { onMounted, onUnmounted, reactive, toRefs, computed, onActivated } from "vue";
import SelectItem from "@/components/selectStyle/selectItem.vue";
import HeaderTitle from '@/components/HeaderTitle.vue'
import FooterNavigation from '@/components/FooterNavigation.vue'
import { useRouter } from 'vue-router'
import { useGenerateStore, useUserInfoStore } from '@/stores'
import { showToast } from 'vant';
import { generateRequestOutfit, getRequestOutfit } from '@/api/workshop'
import { FlowType } from '@/types/enum'

const router = useRouter()

//const props = defineProps({
//})
const emit = defineEmits([
	'view-type'
])
const generateStore = useGenerateStore()
const userInfoStore = useUserInfoStore()
let data = reactive({
	select:computed(()=>generateStore.style),
	styleList:computed(()=>generateStore.styleList),
})

let getGenerateTime = null as any

const selectItem = (item)=>{
	if(!item.id || item.status != 'SUCCEEDED'){
		return
	}
	generateStore.selectStyle(item)
}

const updateStyle = ({item,index})=>{
	generateStore.updateStyle(item)
	data.styleList[index] = {}
	requestOutfit({num:1,index})
}

const toProduct = ()=>{
	if(!generateStore.style.id){
		showToast({ message: 'Please select a style.' });
		return
	}
	if(generateStore.style.id != generateStore.style.oldId){
		generateStore.setIsGenerate(true)
	}
	const query = router.currentRoute.value.query
	if(query?.flowType == FlowType.MAIN){
		router.push({ path: 'product', query: {...query} })
	}else{
		router.push({ path: 'creation', query: {...query} })
	}
}

const requestOutfit = ({num,index})=>{
	let value = {
		"customerId": generateStore.customerId,
		"checkInId": generateStore.visitRecordId,
		"stylist": userInfoStore.state.generateParams.stylist,
		"gender": userInfoStore.state.generateParams.sex,
		"sessionId": generateStore.sessionId,
		num,
	}
	generateRequestOutfit(value).then((rv)=>{
		let rvIndex = 0
		data.styleList.forEach((item,styleIndex)=>{
			if(styleIndex < index)return
			item.taskId = rv[rvIndex]
			rvIndex++
		})
		getRequestOutfitList(rv)
	})
}

const getRequestOutfitList = (generateList)=>{
	let value = {requestIDs:generateList.join(',')}
	getRequestOutfit(value).then((rv:any)=>{
		let pendingList = []
		rv.forEach((item)=>{
			if(['RUNNING','PENDING'].includes(item.status))pendingList.push(item.requestId)
			let index = data.styleList.findIndex((styleItem)=>styleItem.taskId == item.requestId)
			if(index != -1){
				data.styleList[index].id = item.id
				data.styleList[index].path = item.path
				data.styleList[index].status = item.status
			}
		})

		if(pendingList.length > 0){
			getGenerateTime = setTimeout(()=>{
				getRequestOutfitList(pendingList)
			},3000)
		}
	})
}

onMounted(()=>{
	// generateStore.clearProductData()
	emit('view-type', 1)
	// if(!data.styleList[0]?.id)getRequestOutfitList(0)
	if(getGenerateTime)clearTimeout(getGenerateTime)
	if(!data.styleList[0]?.taskId){
		requestOutfit({num:4,index:0})
	}else if(data.styleList.filter((item)=>item?.status != 'SUCCEEDED').length > 0){
		let generateList = data.styleList.map((item)=>item.taskId)
		getRequestOutfitList(generateList)
	}
})
onUnmounted(()=>{
	if(getGenerateTime)clearTimeout(getGenerateTime)
})
defineExpose({})
const { styleList, select } = toRefs(data);
</script>
<template>
	<div class="selectStyle">
		<div class="text">
			<div class="title">
				What’s your Style?
			</div>
			<div class="info">
				Select the outfit that matches you the most.
			</div>
		</div>
		<div class="selectContent flex-1">
			<SelectItem :selectList="styleList" v-model:select="select" @selectItem="selectItem" @updateStyle="updateStyle" />
		</div>
		<div class="footer">
			<button class="flex flex-center" @click.stop="toProduct">Continue</button>
		</div>
	</div>
	<!-- <div class="footer placeholder"></div> -->
</template>
<style lang="less" scoped>
	.header-title {
		// --header-title-background: #f6f6f6;
	}
	.selectStyle{
		width: 100%;
		flex: 1;
		// height: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
		background-color: #f6f6f6;
		overflow: hidden;
		> .text{
			text-align: center;
			width: 100%;
			margin-top: 3rem;
			margin-bottom: 4.9rem;
			> .title{
				font-family: satoshiBold;
				font-weight: 700;
				font-size: 9.6rem;
				line-height: 124%;
				color: #000;
			}
			> .info{
				font-size: 4rem;
				font-weight: 400;
				line-height: 124%;
				margin-top: 1.3rem;
				color: rgba(0, 0, 0, 0.6);
			}
		}
		.selectContent{
			padding: 0 4rem;
			overflow: auto;
		}
	}
	.footer {
		// position: fixed;
		// margin-top: 4.4rem;
		// padding: 4rem 4rem 0 0;
		margin-top: auto;
		margin-bottom: 5.6rem;
		margin-right: 4rem;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		// position: absolute;
		// right: 4rem;
		// bottom: 4rem;
		height: 6.7rem;
		// background-color: #f6f6f6;
		&.placeholder{
			position: relative;
		}
		> button {
			// margin-right: 5rem;
			border-radius: .7rem;
			border: 3px solid #000;
			background-color: #000;
			text-align: center;
			color: #fff;
			font-family: satoshiMedium;
			font-size: 3.6rem;
			width: 24.6rem;
			height: 6.7rem;
			box-sizing: border-box;
			line-height: 6.7rem;
		}
	}
</style>