<script setup lang="ts">
import { onMounted, onUnmounted, reactive, toRefs } from "vue";
import HeaderTitle from '@/components/HeaderTitle.vue'
import FooterNavigation from '@/components/FooterNavigation.vue'
import { useRouter, useRoute } from 'vue-router'
import GenerateLoading from '@/views/asistant/components/GenerateLoading.vue'
import { useGenerateStore } from '@/stores'
import { generateTryOnEffect, setTryOnEffectFavorite, cancelTryOnEffectFavorite } from '@/api/workshop'
const router = useRouter()
//const props = defineProps({
//})
const emit = defineEmits(['view-type'])
let data = reactive({
	modelList: 
	[

	],
	isLoading: false,
})

const generateStore = useGenerateStore()

// const setSelectedModelId = (item)=>{
// 	data.selectedModelId = item.id;
// }


const onContinue = ()=>{
	router.push('uploadFace')
}

const changeModel = ()=>{
	router.push('selectModel')
}

const startGenerate = ()=>{
	data.isLoading = true;
	let value = {
		customerId:1 || generateStore.customerId,
		visitRecordId:1 || generateStore.visitRecordId,
		styleId:1 || generateStore.style.id,
		// customerPhotoId:null,
		// modelPhotoId:null,
		// prompt:null,
		// originalTryOnId:null,
		isRegenerated:0,
	}
	generateTryOnEffect(value).then((res:any)=>{
		data.isLoading = false;
		generateStore.originalTryOn.isLike = false
		generateStore.originalTryOn.id = res.tryOnId
		generateStore.originalTryOn.tryOnUrl = res.tryOnUrl
		generateStore.useStyleGenerate()//生成后需要对选择衣服页面设置不可选中样式
		generateStore.setIsGenerate(false)

		generateStore.clearCustomizeInfo()
	}).catch((error)=>{
		console.log(error)
		if(error === false){
			return
		}
		data.isLoading = false;
		if(generateStore.originalTryOn.id){
			router.back()
		}
	})
}

const setLike = ()=>{
	let tryOnId = generateStore.originalTryOn.id
	if(generateStore.originalTryOn.isLike){
		cancelTryOnEffectFavorite(tryOnId).then(()=>{
			generateStore.originalTryOn.isLike = false
		})
	}else{
		setTryOnEffectFavorite(tryOnId).then(()=>{
			generateStore.originalTryOn.isLike = true
		})
	}
}

onMounted(() => {
	emit('view-type', 1)
	if (generateStore.isGenerate) {
		startGenerate()
	}
})
onUnmounted(()=>{
})
defineExpose({})
const { isLoading } = toRefs(data);
</script>
<template>
	<header-title style-type="2" />
	<div class="product" v-if="!isLoading">
		<div class="text">
			<div class="title">
				Go with this Look?
			</div>
		</div>
		<div class="selectContent">
			<div class="history">
				<div class="icon"><SvgIcon name="history" size="35" /></div>
				<div class="label">History</div>
				<div class="icon"><SvgIcon name="xialajiantou" size="29" /></div>
			</div>
			<div class="modelBox">
				<div></div>
				<div class="model">
					<img :src="generateStore.originalTryOn.tryOnUrl" />
					<div class="operation">
						<div @click="setLike"><SvgIcon :name="`love_${generateStore.originalTryOn.isLike ? '1' : '0'}`" size="35" /></div>
						<div @click="startGenerate"><SvgIcon name="reload" size="35" /></div>
						<!-- <div><SvgIcon name="download" size="35" /></div> -->
					</div>
				</div>
			</div>
			<div class="again">
				<!-- <div @click="changeModel">Change Model</div> -->
				<div @click="onContinue" style="margin-left: auto;">Continue</div>
			</div>
		</div>
	</div>
	<footer-navigation is-placeholder v-if="!isLoading"/>
	<div class="loading-container" v-if="isLoading">
		<GenerateLoading title="Generating Results..." />
	</div>
</template>
<style lang="less" scoped>
	.product{
		width: 100%;
		// height: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
		> .text{
			text-align: center;
			width: 100%;
			margin-top: 4.3rem;
			> .title{
				font-family: satoshiBold;
				font-weight: 700;
				font-size: 9.6rem;
				line-height: 124%;
			}
		}
		> .selectContent{
			flex: 1;
			overflow-y: auto;
			padding: 0 14.1rem;
			margin-top: 4.8rem;
			> .history{
				width: 30.2rem;
				height: 6.52rem;
				border-radius: 0.91rem;
				border: 0.24rem solid #000;
				display: flex;
				align-items: center;
				> .icon {
					margin: 0 1.8rem;
				}
				> .label {
					flex: 1;
					font-family: satoshiRegular;
					font-size: 2.97rem;
					color: #000;
				}
			}
			> .modelBox{
				margin-top: 2.5rem;
				> .model{
					border: 2px solid #D9D9D9;
					height: 110rem;
					position: relative;
					width: 100%;
					> img{
						width: 100%;
						height: 100%;
						object-fit: contain;
					}
					> .operation{
						position: absolute;
						display: flex;
						bottom: 2rem;
						right: 0rem;
						> div {
							margin-right: 1.5rem;
							width: 6.2rem;
							height: 6.2rem;
							border-radius: 1rem;
							border: 0.2rem solid #000;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}
			}
			> .again{
				margin-top: 4.4rem;
				font-family: satoshiMedium;
				line-height: 10.4rem;
				color: #fff;
				font-size: 4.2rem;
				display: flex;
				justify-content: center;
				> div{
					width: 36rem;
					border-radius: 15px;
					background-color: #000;
					text-align: center;
					margin-right: 3.9rem;
					justify-content: center;
					&:last-child{
						margin-right: 0;
					}
				}
			}
		}
	}
	.loading-container{
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
	}
</style>