<template>
	<NavBar />
	<view class="container">
		<view class="title">
			<PageTitle :title="$t('activity.giftDetails')" />
		</view>
		<Spin v-show="loading" />
		<view class="content" v-if="info">
			<view class="swipperWrapper">
				<swiper class="swiper" style="width: 100%; height: 354upx" circular :indicator-dots="true" indicator-active-color="#fff" :autoplay="false">
					<swiper-item v-for="(item, index) in info.imgs.split(',')" :key="index">
						<view class="swiperItem" style="width: 100%; height: 100%">
							<image :src="item" mode="aspectFill" style="width: 100%; height: 100%"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="goods-name">{{ info.goods_name }}</view>
			<view class="goods-detail" v-html="info.goods_detail"></view>
		</view>
	</view>
	<view class="goods-nav" v-if="info">
		<view style="display: flex; align-items: center">
			<view style="font-size: 32upx; font-weight: 400; margin-right: 20upx">{{ $t('activity.goodsPoint') }}</view>
			<view style="font-size: 36upx; font-weight: 700; color: #29bbe4">{{ info.integral }}</view>
		</view>
		<button v-if="info.stock_num" class="primaryButton" style="max-width: 50%; margin-right: 0; font-size: 32upx; font-weight: 400" @click="goExchange">
			{{ $t('activity.exchange') }}
		</button>
	</view>
</template>

<script>
import { getGoodsInfo } from '@/services/activity/shop';
import { getFilePath } from '@/services/common';
export default {
	data() {
		return {
			id: undefined,
			info: null,
			addr: null,
			loading: false,
			baseUrl: ''
		};
	},
	methods: {
		goExchange() {
			uni.navigateTo({
				url: '/pages/activity/shop/exchange?goods=' + this.id
			});
		}
	},
	created() {
		getFilePath().then((resp) => {
			this.baseUrl = resp.data;
		});
	},
	onLoad(options) {
		const { id } = options;
		this.id = id;
		this.loading = true;
		getGoodsInfo({ id })
			.then((resp) => {
				if (resp.code == 0) {
					this.info = resp.data.info;
					resp.data.info = null;
					this.addr = resp.data;
				}
				this.loading = false;
			})
			.catch(() => {
				this.loading = false;
			});
	}
};
</script>

<style lang="scss" scoped>
@import './goods.scss';
</style>
<style>
.goods-detail {
	width: 100%;
	overflow-y: auto;
	word-wrap: break-word;
}
</style>
