<script setup lang="ts">
import { onMounted, onUnmounted, reactive, ref, 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, addTryOnEffectComment  } from '@/api/workshop'
const router = useRouter()
//const props = defineProps({
//})
const emit = defineEmits(['view-type'])
let data = reactive({
	modelList: 
	[

	],
	isLoading: false,
})

const generateStore = useGenerateStore()

const vanDialogShow = ref(false)
const feedbackForm = ref({
	text:'',
	state:1,//是否提交状态
})

// 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:generateStore.customerId,
		visitRecordId:generateStore.visitRecordId,
		styleId:generateStore.styleId,
		// 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
		})
	}
}

const feedback = ()=>{
	vanDialogShow.value = true
}

const closeFeedback = ()=>{
	vanDialogShow.value = false
	feedbackForm.value.text = ''
	feedbackForm.value.state = 1
}

const handleSubmit = ()=>{
	if(feedbackForm.value.state == 1){
		let value = {
			tryOnEffectsId:generateStore.originalTryOnIdNoRein,
			visitRecordId:generateStore.visitRecordId,
			customerId:generateStore.customerId,
			suggestion:feedbackForm.value.text,
		}
		addTryOnEffectComment(value).then(()=>{
			feedbackForm.value.state = 2
		})
	}else{
		closeFeedback()
	}
	
}

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="feedback"><SvgIcon name="pen" size="40" /></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"/>
	<van-dialog v-model:show="vanDialogShow" :show-confirm-button="false" width="52.8rem">
		<div class="feedback">
			<div class="feedbackClose" @click="closeFeedback"><SvgIcon name="close" size="40" /></div>
			<div class="succeedIcon" v-if="feedbackForm.state == 2">
				<img src="@/assets/images/workshop/succeed.png" />
			</div>
			<div class="content" state='1' v-if="feedbackForm.state == 1">
				<div class="title">User Feedback</div>
				<div class="info">Do you have any suggestions<br /> for this outfit? </div>
			</div>
			<div class="content" state='2' v-else>
				<div class="title">Congratulation!</div>
				<div class="info">Your feedback will be very<br /> helpful to us.</div>
			</div>
			<div class="feedbackForm" v-if="feedbackForm.state == 1">
				<textarea v-model="feedbackForm.text" placeholder="Please enter your feedback" />
			</div>
			<div class="submit" @click="handleSubmit">
				Confirm
			</div>
		</div>
	</van-dialog>
	<div class="loading-container" v-if="isLoading">
		<GenerateLoading title="Generating Results..." />
	</div>
	<footer-navigation is-placeholder/>
</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: .2rem solid #D9D9D9;
					// height: 110rem;
					aspect-ratio: 2 / 3;
					position: relative;
					width: 93%;
					margin: 0 auto;
					> img{
						width: 100%;
						height: 100%;
						object-fit: contain;
						display: block;
					}
					> .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;
							background-color: #fff;
						}
					}
				}
			}
			> .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;
		padding-top: 36.6rem;
	}
	.feedback{
		position: relative;
		border-radius: 3rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		> .succeedIcon{
			width: 12.8rem;
			height: 12.8rem;
			margin-top: 11.6rem;
			> img{
				width: 100%;
				height: 100%;
				object-fit: contain;
				display: block;
			}
		}
		> .feedbackClose{
			position: absolute;
			top: 3.5rem;
			right: 3rem;
		}
		> .content{
			padding-top: 5.8rem;
			text-align: center;
			margin-bottom: 3.7rem;
			&.content[data-state='2']{
				margin-top: 5.2rem;
				margin-bottom: 5.8rem;
			}
			> .title{
				font-family: satoshiBold;
				font-size: 4rem;
				font-weight: 700;
				line-height: 2rem;
				margin-bottom: 1.8rem;
			}
			> .info{
				font-size: 3.2rem;
				line-height: 4.4rem;
				font-weight: 400;
			}
		}
		> .feedbackForm{
			margin-bottom: 5.1rem;
			> textarea{
				width: 43.1rem;
				height: 29.4rem;
				border-radius: 2.7rem;
				background: linear-gradient(0deg, #FFFFFF, #FFFFFF),
				linear-gradient(0deg, #F4F4F4, #F4F4F4);
				border: .274rem solid;
				border-image-source: radial-gradient(80.79% 50% at 50% 50%, #EFAC85 0%, rgba(255, 255, 255, 0) 100%),
				radial-gradient(99.56% 93.08% at 99.56% 93.08%, #E6E6E6 0%, #443E37 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
				linear-gradient(120.09deg, #B3B3B3 0%, rgba(255, 255, 255, 0) 35.41%);
				box-shadow: 0px 1.1rem 1rem 0px #0000001A;
				padding: 2.4rem 2.1rem;
			}
		}
		> .submit{
			width: 26.8rem;
			line-height: 6.4rem;
			border-radius: 1.5rem;
			background-color: #000;
			color: #fff;
			border: 1.54px solid #000000;
			font-size: 3.2rem;
			text-align: center;
			font-weight: 500;
			margin: 0 auto 3.6rem;
		}
	}
</style>