<template>
	<view>
		<view class="goods-cover">
			<swiper class="swiper" circular indicator-dots indicator-active-color="#8b64fd">
				<swiper-item v-for="(item, index) in cover" :key="index">
					<view class="swiper-item">
						<image class="swiper-cover" :src="item" mode="aspectFill" />
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="info">
			<view class="info-item">
				<label>锚定商品</label>
				{{info.name}}
			</view>
			<view class="info-item">
				<label>商品规格</label>
				{{info.skusUnit}}
			</view>
			<view class="info-item">
				<label>提供企业</label>
				{{info.companyName}}
			</view>
			<view class="info-item">
				<label>企业诚信</label>
				{{info.integrity}}
			</view>
			<view class="info-item">
				<label>权证销量</label>
				{{info.sales}}
			</view>
			<view class="info-item">
				<label>发布时间</label>
				{{info.createdAt}}
			</view>
		</view>
	</view>
</template>

<script>
	import { goods } from '@/apis/interfaces/goods'
	export default {
		data() {
			return {
				cover: [],
				info : {}
			};
		},
		created() {
			goods(this.$Route.query.id).then(res => {
				console.log(res)
				this.cover = res.pictures
				this.info  = {
					name		: res.name,
					companyName	: res.company.name,
					createdAt	: res.created_at,
					sales		: res.sales,
					integrity	: res.company.integrity,
					skusUnit	: res.skus[0].unit
				}
			}).catch(err => {
				uni.showToast({
					title: err.message,
					icon : 'none'
				})
			})
		}
	}
</script>

<style lang="scss">
	// 数权
	.goods-cover{
		width: 100%;
		padding-top: 100%;
		position: relative;
		background: #f5f5f5;
		.swiper{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			.swiper-item{
				height: 100%;
				width: 100%;
			}
			.swiper-cover{
				@extend .swiper-item;
			}
		}
	}
	// 锚定商品详情
	.info{
		background: white;
		padding: $padding;
		.info-item{
			padding-left: 200rpx;
			height: 70rpx;
			line-height: 70rpx;
			position: relative;
			text-align: right;
			font-size: $title-size-m;
			@extend .nowrap;
			label{
				position: absolute;
				left: 0;
				top: 0;
				width: 200rpx;
				text-align: left;
				color: $text-gray;
			}
		}
	}
</style>
