<template>
	<view class="imgDetail">
		<image class="main-img" :src="detailMsg.imgUrl" mode=""></image>
		<view class="toolbar">
			<view class="toolbar-box">
				<text>热门</text>
			</view>
			<view class="toolbar-box">
				<text>下载</text>
				<text>下载{{detailMsg.downloadNum}}</text>
			</view>
			<view class="toolbar-box">
				<text>喜欢</text>
				<text>喜欢{{detailMsg.greatNum}}</text>
			</view>
			<view class="toolbar-box">
				<text>收藏</text>
				<text>收藏{{detailMsg.collectionNum}}</text>
			</view>
			<view class="toolbar-box">
				<text>分享</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		detailsTiktokImg
	} from '@/api/creator.js'
	export default {
		data() {
			return {
				detailMsg: {}
			}
		},
		created() {
			uni.getStorage({
				key: 'detailId',
				success: res => {
					this.getImgDetail(res.data)
				}
			})
		},
		methods: {
			async getImgDetail(id) {
				const res = await detailsTiktokImg(id)
				if (res.data.code === 200) {
					this.detailMsg = res.data.data
					console.log('图片详情', this.detailMsg)
				} else {
					uni.showToast({
						title: '请输入艺术家代号',
						icon: 'error'
					})
				}
			}
		}
	}
</script>

<style lang="less">
	.imgDetail {
		height: 100vh;
		width: 100vw;
		overflow: hidden;
		position: relative;
		.main-img {
			width: 100%;
			height:100%;
		}
		.toolbar{
			width: 60px;
			height: 360px;
			background-color: rgba(255,255,255,0.2);
			position: absolute;
			bottom: 76px;
			right: 10px;
			border-radius: 60px;
			.toolbar-box{
				height: 60px;
				text{
					display: block;
					text-align: center;
					line-height: 30px;
					font-size: 12px;
				}
			}
		}
	}
</style>
