<template>
	<view class="container">
		<Head @backto="backto()" title="藏品详情"></Head>
		<view class="zuopingxx">
			<image :src="details.collectiondetails.avatar"></image>
			<view class="zuozexinxi">
				<image :src="collection.artist.avatar"></image>
				<view>{{collection.artist.name}}</view>
				<view>{{details.collectiondetails.name}}</view>
			</view>
			<view class="faxinxx">
				<view>
					<view>发行份数</view>
					<view>{{details.collectiondetails.number}}</view>
				</view>
				<view>
					<view>首发价格</view>
					<view>{{details.collectiondetails.first_price}}</view>
				</view>
				<view>
					<view>发行时间</view>
					<view>{{details.collectiondetails.issue_date}}</view>
				</view>
			</view>
			<view class="faxinbh">
				<view>
					<view>编号</view>
					<view v-if="workerid.no">#{{workerid.no}}</view>
					<view v-else>#{{details.collectiondetails.no}}</view>
				</view>
				<view>
					<view>收集途径</view>
					<view>{{details.collectiondetails.collection_way}}</view>
				</view>
				<view>
					<view>获得日期</view>
					<view>{{details.collectiondetails.get_date}}</view>
				</view>
			</view>
		</view>
		<view class="heydz">
			<view>
				<view>合约地址</view>
				<view>{{hydz}}</view>
			</view>
			<view>
				<view>通行证ID</view>
				<view>{{txzid}}</view>
			</view>
			<view>
				<view>哈希值</view>
				<view>{{hashCode||'铸造中'}}</view>
			</view>
		</view>
		<view class="fuwenben">
			<rich-text :nodes="details.describe"></rich-text>
		</view>
		
	</view>
</template>

<script>
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		worksdetail,
		orderplace
	} from '@/api/api.js'
	import {
		reactive,
		ref,
		toRefs
	} from "vue"
	import Head from "../../components/head.vue"
	export default {
		components:{
			Head
		},
		props:['hydz','txzid','hashCode'],
		setup(props) {
			let txzxx=reactive({
				hydz:'',
				txzid:'',
				hashCode:''
			})
			txzxx.hydz=props.hydz
			txzxx.txzid=props.txzid
			txzxx.hashCode=props.hashCode
			// console.log(txzxx,'txzxx');
			let collection = reactive({
				artist: {},
				buy:false,
				number:true
			});
			let details = reactive({
				collectiondetails: {},
				describe:''
			})
			let workerid = reactive({
				id: "",
				no:'',
			})
			onLoad((options) => {
				// 如果拥有did 则存在本地
				if(options.did){
					uni.setStorageSync("id",options.did)
				}
				
				workerid.id = options.id;
				
				options.no?workerid.no=options.no:workerid.no="";
				// workerid.no=
				worksdetail({
					id: options.id
				}).then((res) => {
					console.log(res);
					collection.artist = res.data.artist;
					details.collectiondetails = res.data;
					details.describe=res.data.describe
					
					// 时间 发行时间是否到达
					console.log(new Date(details.collectiondetails.start_time).getTime());
					
					uni.getSystemInfo({
						success: function (res) {
							console.log(res)
							if(res.osName=="ios"){
								if(new Date().getTime()>new Date(details.collectiondetails.start_time.replace(/-/g,'/').replace(/T/g,' ')).getTime()){
									collection.buy=true;
									console.log(collection.buy);
								}
							}else{
								if(new Date().getTime()>new Date(details.collectiondetails.start_time).getTime()){
									collection.buy=true;
									console.log(collection.buy);
								}
							}
						}
					});
					
					
					// 发行的数量
					if(details.collectiondetails.number<=0){
						collection.number=false
					}
					
				})
			})
			
			function backto (){
				uni.reLaunch({
					url:'../user/user'
				})
			}

			function comepay() {
				orderplace({
					works_id: workerid.id
				}).then((res) => {
					console.log(res);
					if (res.code == 202) {
						uni.showToast({
							duration: 1000,
							title: `${res.msg}`,
							icon: "error"
						})
					} else {
						uni.showToast({
							duration: 1500,
							title: "抢购成功",
							icon: "success"
						})
						uni.navigateTo({
							url: `../payorder/payorder?id=${res.data.order_id}&wokerid=${workerid.id}`
						})
					}
				})

			}
			
			function comepay1(){
				// uni.showToast({
				// 	duration:1500,
				// 	title:"不能购买",
				// 	icon:"error"
				// })
			}
			return {
				txzxx,
				...toRefs(txzxx),
				collection,
				details,
				comepay,
				workerid,
				backto,
				comepay1
			}
		}
	}
</script>

<style lang="scss">
	.heydz{
		width: 686upx;
		// height: 1258upx;
		background: #23262F;
		border-radius: 32upx;
		margin: auto;
		display: flex;
		flex-direction: column;
		// align-items: center;
		padding: 30upx;
		margin-top: 50upx;
		margin-bottom: 30upx;
		box-sizing: border-box;
		color: #ffffff;
		>view{
			display: flex;
			// align-items: center;
			margin-bottom: 20upx;
			&:nth-last-child(1){
				margin-bottom: 0;
			}
			>view:nth-of-type(1){
				width: 150upx;
			}
			>view:nth-of-type(2){
				width: 470upx;
				word-wrap:break-word;
			}
		}
	}
	.container{
		position: relative;
	}
	.zuopingxx {
		width: 686upx;
		// height: 1258upx;
		background: #23262F;
		border-radius: 32upx;
		margin: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 24upx;
		box-sizing: border-box;
		padding-top: 150rpx;

		>image {
			width: 640rpx;
			height: 640rpx;
			border-radius: 24upx;
		}

		.zuozexinxi {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: -49upx;

			>image {
				width: 98upx;
				height: 98upx;
				border-radius: 50%;
			}

			>view {
				color: #ffffff;

				&:nth-of-type(1) {
					font-size: 28upx;
					font-weight: 500;
					margin-top: 20upx;
					margin-bottom: 28upx;
				}

				&:nth-of-type(2) {
					font-size: 32upx;
					font-weight: bold;
				}
			}
		}

		.faxinxx {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 34upx;
			font-size: 28upx;
			font-weight: 400;
			margin-top: 80upx;
			color: #FFFFFF;
			width: 642upx;
			height: 146upx;
			border-radius: 10upx;
			opacity: 1;
			border: 1upx solid #8D8C9F;
			box-sizing: border-box;

			>view {
				display: flex;
				flex-direction: column;
				align-items: center;
				min-width: 152upx;

				>view:nth-of-type(1) {
					margin-bottom: 15upx;
				}
			}
		}

		.faxinbh {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28upx;
			font-weight: 400;
			margin-top: 80upx;
			color: #FFFFFF;
			width: 642upx;
			height: 146upx;
			padding: 34upx;
			border-radius: 10upx;
			opacity: 1;
			box-sizing: border-box;

			>view {
				display: flex;
				flex-direction: column;
				align-items: center;
				min-width: 152upx;

				>view:nth-of-type(1) {
					margin-bottom: 15upx;
				}
			}
		}
	}

	.fuwenben {
		width: 686upx;
		// height: 1064upx;
		margin: auto;
		box-sizing: border-box;
		margin-top: 40upx;
		margin-bottom: 140upx;
		// padding-bottom: 150upx;
		>image {
			width: 686upx;
			height: 1064upx;
		}
	}

	.qianggou {
		width: 668upx;
		height: 84upx;
		background: #3772FF;
		border-radius: 12upx;
		font-size: 28upx;
		font-weight: 500;
		color: #FFFFFF;
		position: fixed;
		bottom: 30upx;
		left: 50%;
		transform: translate(-50%);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.active{
		background-color: #8D8C9F;
	}

	page {
		// padding-top: 20upx;
	}
</style>
