<template>
	<view class="body">
		<view class="item">
			<view class="itempic" :style="{backgroundImage:`url(${form.background})`}">
			</view>
			<image class="iamges" :src="form.headPhoto" mode=""></image>
			<view class="text">
				{{form.artistName}}
			</view>
			<view class="textname">
				{{form.artistIntroduction}}
			</view>
			<!-- <view class="text-content">
				Here is an introduction. Here is introduction. Here is
			</view> -->
			<view class="bar">
				<view class="item-bar">
					<view class="txst">
						{{form.numberWorks||0}}
					</view>
					<view class="txstb">
						Items
					</view>
				</view>
				<view class="item-bar">
					<view class="txst">
						{{form.purchaseQuantity||0}}
					</view>
					<view class="txstb">
						Owners
					</view>
				</view>
				<view class="item-bar">
					<view class="txst">
						{{form.numberFans||0}}
					</view>
					<view class="txstb">
						Fans
					</view>
				</view>
			</view>
			<view class="content">
				<view class="itema" v-for="item in form.wjCollectionVOS" :key="item.id" @click="detail(item.id)">
					<view class="itempic" :style="{backgroundImage:`url(${item.thumbnail})`}">
						<view class="left-cover">
							<image v-if="!item.whetherLike" @click.stop="like(item.id)" src="../../static/heat.png" mode=""></image>
							<image v-if="item.whetherLike" @click.stop="unlike(item.id)" src="../../static/278.png" mode=""></image>
							<view class="number">
								{{item.likeNumInt}}
							</view>
						</view>
					</view>
					<view class="text">
						{{item.collectionName}}
					</view>
					<view class="textname">
						{{item.artistName}} #{{item.issueNumber}}
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
					 form:{},
					 id:"",
			}
		},
		onLoad(option) {
			if(option.id){
				this.id=option.id
				this.creatorInformation(option.id);
			}
		
		},
		methods: {
              //查询创作者的信息
			  async creatorInformation(id){
				  const res = await this.$myRequest({
				  	url: '/api/foreignAuth/creatorInformation?id='+id,
				  	header: {
				  		token: uni.getStorageSync("token"),
				  		Authorization: uni.getStorageSync("Authorization"),
				  	},
				  })
				  if(res.data.code==200){
				  	this.form = res.data.data
				  } 
			  },
			  //点赞
			  async like(id){
			  	const res = await this.$myRequest({
			  		url: '/api/foreignAuth/giveLike?id='+id,
			  		header: {
			  			token: uni.getStorageSync("token"),
			  			Authorization: uni.getStorageSync("Authorization"),
			  		},
			  	})
			  	if(res.data.code==200){
			  		uni.showToast({
			  			title: res.data.msg
			  		})
			  		this.creatorInformation(this.id);
			  	}else{
					uni.showToast({
						title: "点赞成功"
					})
				}
			  },
			  //取消点赞
			  async unlike(id){
			  	const res = await this.$myRequest({
			  		url: '/api/foreignAuth/donPraise?id='+id,
			  		header: {
			  			token: uni.getStorageSync("token"),
			  			Authorization: uni.getStorageSync("Authorization"),
			  		},
			  	})
			  	if(res.data.code==200){
			  		uni.showToast({
			  			title: "取消点赞成功"
			  		})
			  		this.creatorInformation(this.id);
			  	}else{
					uni.showToast({
						title: res.data.msg
					})
				}
			  },
			 //跳转详情页
			 detail(id){
			 	uni.navigateTo({
			 		url:"./workshow?id="+id
			 	})
			 },
		}
	}
</script>

<style lang="scss">
	.body {
		padding-top: 0rpx;
		display: flex;
		flex-direction: column;
		background-color: #000000;
		font-family: Arial-Regular;
        min-height: 1340rpx;
		.item {
			color: #FFFFFF;
			width: 100%;
			image {
				margin-left: 40rpx;
				margin-top: -70rpx;
				width: 164rpx;
				height: 164rpx;
				border-radius: 82rpx;
				
			}
			.iamges{
				border: 2px solid #FFFFFF;
			}

			.itempic {
				width: 100%;
				height: 454rpx;
				background-repeat: no-repeat;
				background-size: cover;
				overflow: hidden;

				.left-cover {
					margin-top: 36rpx;
					width: 118rpx;
					height: 48rpx;
					background:rgba(0,0,0,0.5);
					border-radius: 8rpx;
					display: flex;
					justify-content: center;
					font-size: 28rpx;
					align-items: center;
					margin-left: 36rpx;
				}
			}

			.text {
				font-size: 32rpx;
				margin-left: 226rpx;
				margin-top: -80rpx;
			}

			.textname {
				width: 678rpx;
				height: 152rpx;
				margin-top: 90rpx;
				font-size: 32rpx;
				margin-left: 36rpx;
				margin-bottom: 140rpx;
			}

			.text-content {
				width: 678rpx;
				height: 152rpx;
				margin-top: 90rpx;
				font-size: 32rpx;
				margin-left: 36rpx;
			}

			.bar {
				display: flex;
				align-items: center;
				width: 678rpx;
				height: 166rpx;
				margin-left: 36rpx;
				font-size: 24rpx;
				margin-bottom: 24rpx;
				background-color: #1C1C1C;
				border-radius: 16rpx;

				.item-bar {
					display: flex;
					flex-direction: column;
					align-items: center;
					height: 96rpx;
					width: 250rpx;
					border-right: 2rpx solid #545454;
					color: #FFFFFF;
					font-size: 36rpx;

					.txst {
						font-weight: bold;
					}

					.txstb {
						font-size: 28rpx;
					}
				}

				.item-bar:nth-child(3) {
					border-right: 2rpx solid #1C1C1C;
				}

			}
			.content {
				display: flex;
				margin-top: 48rpx;
				flex-wrap: wrap;
			
				.itema {
					color: #FFFFFF;
					background-color: #1C1C1C;
					width: 324rpx;
					height: 446rpx;
					border-radius: 24rpx;
					margin-left: 36rpx;
			        margin-top: 26rpx;
					.itempic {
						width: 324rpx;
						height: 324rpx;
						background-repeat: no-repeat;
						background-size: cover;
						overflow: hidden;
						border-radius:12rpx;
			
						.left-cover {
							margin-top: 18rpx;
							width: 94rpx;
							height: 40rpx;
							background:rgba(0,0,0,0.5);
							border-radius: 8rpx;
							font-size: 24rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							margin-left: 24rpx;
							image {
								width: 24rpx;
								height: 24rpx;
								margin-left: 12rpx;
								margin-top: 0rpx;
							}
								
							.number {
								margin-left: 8rpx;
							}
						}
					}
			
					.text {
						font-size: 28rpx;
						margin-left: 24rpx;
						margin-top: 16rpx;
					}
			
					.textname {
						font-size: 28rpx;
						margin-left: 24rpx;
						margin-top: 16rpx;
						margin-bottom: 0rpx;
						height: 30rpx;
					}
				}
			}
			
		}

		
	}
</style>
