<script setup lang="ts">
	import { ref, reactive, onMounted, computed } from 'vue'
	import { useRouter } from 'vue-router'
	import { DownloadImages } from '@/utils/tools'
	const router = useRouter()
	const query = computed(() => router.currentRoute.value.query)
	const styleUrl = computed(() => query.value.styleUrl)
		
	onMounted(() => {})
	const loading = ref(false)
	const onDownload = () => {
		DownloadImages([{
			url: styleUrl.value,
			name: 'lane-crawford.png'
		}])
	}
	const onEdit = () => {
		console.log('edit')
	}
	
</script>

<template>
	<div class="creation-details">
		<div class="title">Lane Crawford</div>
		<p class="tip">Business Casual Suits</p>
		<div class="image"><img :src="styleUrl" /></div>
		<div class="btns">
			<div class="icon" @click="onDownload"><SvgIcon name="download" size="33" /></div>
			<button @click="onEdit">Edit</button>
		</div>
	</div>
</template>

<style scoped lang="less">
	.creation-details {
		width: 100%;
		flex: 1;
		overflow-y: auto;
		background-color: #f3f3f3;
		border-radius: 1rem;
		color: #000;
		display: flex;
		flex-direction: column;
		padding: 0 16.3rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		> .title {
			font-family: satoshiBold;
			font-size: 9.6rem;
			line-height: 124%;
			margin-top: 12rem;
		}
		> .tip {
			margin-top: 2rem;
			font-family: satoshiRegular;
			font-size: 4rem;
			line-height: 124%;
			color: rgba(0, 0, 0, 0.6);
		}
		> .image {
			margin-top: 13.7rem;
			width: 100%;
			height: 73.5rem;
			border: 0.1rem solid #acacac;
			background-color: #fff;
			> img {
				width: 100%;
				height: 100%;
				object-fit: contain;
			}
		}
		> .btns {
			margin-top: 4.4rem;
			margin-left: auto;
			display: flex;
			align-items: center;
			> * {
				margin-left: 1.7rem;
			}
			> .icon {
				width: 7rem;
				height: 7rem;
				border-radius: 50%;
				background-color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			> button {
				box-sizing: content-box;
				font-family: satoshiBold;
				// margin: 0 1.8rem;
				border: none;
				width: 14.6rem;
				height: 7rem;
				border-radius: 7rem;
				background: #000;
				font-size: 2.75rem;
				color: #fff;
				&:active {
					opacity: 0.7;
				}
			}
		}
	}
</style>
