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 { useRouter } from 'vue-router'
import { useGenerateStore, useUserInfoStore } from '@/stores'
import { showNotify } from 'vant';
import { generateRequestOutfit, getRequestOutfit } from '@/api/workshop'
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),
})

const selectItem = (item)=>{
	if((item.id == data.select?.oldId) || !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 && !generateStore.style.oldId){
		showNotify({ message: 'Please select a style.', type:'warning', color:'#fff', background:'#ff976a' });
		return
	}
	if(generateStore.style.id){
		generateStore.setIsGenerate(true)
	}
	router.push({ path: 'product' })
}

const requestOutfit = ({num,index})=>{
	let value = {
		"customerId": generateStore.customerId,
		"checkInId": generateStore.visitRecordId,
		"stylist": "mini",
		"gender": userInfoStore.state.generateParams.sex,
		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)
			console.log(index,data.styleList,rv)
			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){
			setTimeout(()=>{
				getRequestOutfitList(pendingList)
			},3000)
		}
	})
}

onMounted(()=>{
	// generateStore.clearProductData()
	emit('view-type', 1)
	// if(!data.styleList[0]?.id)getRequestOutfitList(0)
	if(!data.styleList[0]?.id)requestOutfit({num:4,index:0})
})
onUnmounted(()=>{
})
defineExpose({})
const { styleList, select } = toRefs(data);
</script>
<template>
	<header-title style-type="2" />
	<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">
			<SelectItem :selectList="styleList" v-model:select="select" @selectItem="selectItem" @updateStyle="updateStyle" />
		</div>
	</div>
	<div class="footer placeholder"></div>
	<div class="footer">
		<button @click.stop="toProduct">Continue</button>
	</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: 3.4rem;
			margin-bottom: 7.2rem;
			> .title{
				font-family: satoshiBold;
				font-weight: 700;
				font-size: 9.6rem;
				line-height: 124%;
			}
			> .info{
				font-size: 4rem;
				font-weight: 400;
				line-height: 124%;
				margin-top: 1.3rem;
			}
		}
		.selectContent{
			padding: 0 3.5rem;
			flex: 1;
			overflow: auto;
		}
	}
	.footer {
		position: fixed;
		width: 100%;
		bottom: 0;
		left: 0;
		height: 11.2rem;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		background-color: #f6f6f6;
		&.placeholder{
			position: relative;
		}
		> button {
			width: 24.6rem;
			height: 5.9rem;
			border-radius: 0.7rem;
			box-sizing: content-box;
			border: 0.3rem solid #000;
			background-color: #000;
			font-family: satoshiBold;
			font-weight: 700;
			font-size: 3.6rem;
			color: #fff;
			margin-right: 5rem;
			&:active {
				opacity: 0.7;
			}
		}
	}
</style>