<script setup lang="ts">
	import { ref, reactive, onMounted, computed } from 'vue'
	import MyList from '@/components/myList.vue'
	import { DownloadImages } from '@/utils/tools'
	import {
		getTryOnEffectFavoriteList,
		getTryOnEffectStyleList,
		setTryOnEffectFavorite,
		cancelTryOnEffectFavorite
	} from '@/api/workshop'

	import { useRouter } from 'vue-router'
	const router = useRouter()
	const emit = defineEmits(['view-type'])
	const query = computed(() => router.currentRoute.value.query)
	const visitRecordId = computed(() => query.value.visitRecordId)
	import { useGenerateStore } from '@/stores'
	const generateStore = useGenerateStore()

	onMounted(() => {
		emit('view-type', 1)
	})
	const list = reactive([])
	const loading = ref(false)
	const finish = ref(false)
	const selectCount = computed(() => list.filter((v) => v.selected).length)
	const maxSelectCount = 10
	const isChooseSave = ref(false) //是否选择保存模式

	const onLoad = () => {
		loading.value = true
		const http = visitRecordId.value ? getTryOnEffectFavoriteList : getTryOnEffectStyleList
		const id = visitRecordId.value || generateStore.visitRecordId
		http(id)
			.then((data) => {
				data?.forEach((v) => {
					const obj = {
						tryOnId: v.tryOnId,
						tryOnUrl: v.tryOnUrl,
						styleUrl: v.styleUrl,
						isFavorite: !!v.isFavorite,
						isRegenerated: !!v.isRegenerated,

						selected: list.length < maxSelectCount,
						loading: false,
						downloaded: false
					}
					list.push(obj)
				})
				loading.value = false
				finish.value = true
			})
			.catch((err) => {
				console.error(err)
				loading.value = false
				finish.value = false
			})
	}
	const onItem = (v) => {
		isChooseSave.value ? onSelectItem(v) : onDetailsItem(v)
	}
	// 详情页
	const onDetailsItem = (v) => {
		if (v.isRegenerated) return
		router.push({ query: { ...query.value, styleUrl: v.styleUrl } })
	}
	// 喜欢
	const isLoveLoading = ref(false)
	const onLoveItem = (v) => {
		if (isLoveLoading.value) return
		const http = v.isFavorite ? cancelTryOnEffectFavorite : setTryOnEffectFavorite
		isLoveLoading.value = true
		v.isFavorite = !v.isFavorite
		http(v.tryOnId)
			.then(() => {
				isLoveLoading.value = false
			})
			.catch((err) => {
				console.error(err)
				isLoveLoading.value = false
			})
	}
	const onDownloadItem = (v) => {
		// console.log('保存', v)
		if (v.loading) return
		v.loading = true
		v.selected = false
		const obj = {
			url: v.tryOnUrl,
			name: v.tryOnUrl.split('/').pop()
		}
		DownloadImages([obj], null, null, () => {
			v.loading = false
			v.downloaded = true
		})
	}
	const onSelectItem = (v) => {
		if (selectCount.value >= maxSelectCount && !v.selected) return
		v.selected = !v.selected
	}
	const onChooseSave = () => {
		isChooseSave.value = true
	}
	const onBackChooseSave = () => {
		isChooseSave.value = false
	}
	// 下载选中项
	const onConfirm = () => {
		const downloadList = []
		if (selectCount.value > 0) {
			list.forEach((v, i) => {
				if (v.selected) {
					v.selected = false
					v.loading = true
					downloadList.push({
						index: i,
						url: v.tryOnUrl,
						name: v.tryOnUrl.split('/').pop()
					})
				}
			})
		}
		if (selectCount.value < maxSelectCount) {
			list.forEach((v) => {
				if (!v.selected && !v.downloaded && !v.loading && selectCount.value < maxSelectCount)
					v.selected = true
			})
		}
		if (downloadList.length > 0) {
			DownloadImages(
				downloadList,
				(count, total, item) => {
					list[item.index].loading = false
					list[item.index].downloaded = true
					console.log('下载成功', count, total, item)
				},
				(count, total, item) => {
					list[item.index].loading = false
					console.log('下载失败', count, total, item)
				},
				(successCount, errCount) => {
					console.log('下载完成', successCount, errCount)
				}
			)
		}
	}
	const onContinue = () => {
		router.push({ name: 'end' })
	}
</script>

<template>
	<div class="creation-list">
		<div class="title">Your Creation</div>
		<div class="list">
			<my-list v-model:loading="loading" v-model:finish="finish" @load="onLoad">
				<div class="item" v-for="(v, i) in list" :key="i" @click="onItem(v)">
					<img v-lazy="v.tryOnUrl" />
					<div class="corner">
						<div class="ai" v-if="v.isRegenerated">Gen-AI</div>
						<div class="tryon" v-else>Try-on</div>
					</div>
					<div class="icons">
						<div @click.stop="onLoveItem(v)">
							<SvgIcon :name="`love_${v.isFavorite ? '1' : '0'}`" size="27" />
						</div>
						<div @click.stop="onDownloadItem(v)">
							<SvgIcon name="download" size="27" v-show="!v.loading" />
							<van-loading color="#000" size="3rem" v-show="v.loading" />
						</div>
					</div>
					<div class="icon-selected" v-show="isChooseSave && v.selected">
						<SvgIcon name="modelSelected" size="50" />
					</div>
					<div class="download-state" v-show="isChooseSave && v.loading">Downloading...</div>
					<div class="download-state" v-show="isChooseSave && v.downloaded">Downloaded</div>
				</div>
			</my-list>
		</div>
		<div class="btns" v-show="!visitRecordId">
			<template v-if="!isChooseSave">
				<button @click="onChooseSave">Choose to Save</button>
				<button @click="onContinue">Continue</button>
			</template>
			<template v-else>
				<button @click="onBackChooseSave">Back</button>
				<button @click="onConfirm">Confirm ({{ selectCount }}/{{ maxSelectCount }})</button>
			</template>
		</div>
	</div>
</template>

<style scoped lang="less">
	.creation-list {
		width: 100%;
		flex: 1;
		overflow: hidden;
		background-color: #e3e3e3;
		border-radius: 1rem;
		position: relative;
		color: #000;
		display: flex;
		flex-direction: column;
		> .title {
			font-family: satoshiRegular;
			font-size: 9rem;
			text-align: center;
			line-height: 124%;
			font-weight: 500;
			margin: 7.2rem 0;
		}
		> .list {
			flex: 1;
			margin: 0 3.8rem;
			overflow: hidden;
			--border-radius: 2rem;
			> .my-list {
				padding: 0 6rem;
				--my-list-footer-margin: 0 0 2rem;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				// justify-content: space-around;
				.item {
					width: 47%;
					height: 52.9rem;
					// overflow: hidden;
					border-radius: var(--border-radius);
					background-color: #fff;
					margin-bottom: 4rem;
					border: 0.1rem solid #000;
					position: relative;
					> img {
						width: 100%;
						height: 100%;
						object-fit: contain;
						border-radius: var(--border-radius);
					}
					> .corner {
						position: absolute;
						top: 0;
						right: 0;
						> div {
							display: flex;
							align-items: center;
							justify-content: center;
							width: 12.6rem;
							height: 3.6rem;
							font-family: satoshiBold;
							font-size: 1.6rem;
							border-bottom-left-radius: 1.6rem;
							border-top-right-radius: var(--border-radius);

							background-color: #000;
							color: #fff;
						}
						> .ai {
							color: #646464;
							background: linear-gradient(
									137.95deg,
									#7a96ac 2.28%,
									#eaeff3 19.8%,
									#c2d4e1 32.94%,
									#ffffff 50.16%,
									#d4dee5 62.15%,
									#abbdc8 78.69%,
									#bccad7 95.24%
								),
								linear-gradient(0deg, rgba(230, 219, 219, 0.5), rgba(230, 219, 219, 0.5));
						}
					}
					> .icons {
						position: absolute;
						bottom: 0;
						right: 1.7rem;
						display: flex;
						align-items: center;
						flex-direction: column;
						> div {
							margin-bottom: 2.2rem;
							width: 5rem;
							height: 5rem;
							border-radius: 1rem;
							border: 0.2rem solid #000;
							--svg-icon-color: #000;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
					> .icon-selected {
						position: absolute;
						bottom: -2rem;
						right: -2rem;
						width: 5rem;
						height: 5rem;
					}
					> .download-state {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: rgba(0, 0, 0, 0.5);
						border-radius: var(--border-radius);
						color: #fff;
						font-size: 4rem;
					}
				}
			}
		}
		> .btns {
			margin: 9rem 0;
			display: flex;
			justify-content: center;

			> button {
				box-sizing: content-box;
				font-family: satoshiRegular;
				width: 35rem;
				height: 8rem;
				border-radius: 1.3rem;
				border: none;
				background: #000;
				font-weight: 400;
				font-size: 4.2rem;
				margin: 0 3.25rem;
				color: #fff;
				&:active {
					opacity: 0.7;
				}
			}
		}
	}
</style>
