<template>
	<view>
		<view class="hm-header-xian"></view>
		<scroll-view scroll-y="true" class="goods">
			<view v-if="detail">
					<swiper :autoplay="autoplay" @change="setCurrent" class="banner-box"
						:duration="duration" :indicator-dots="indicatorDots" :interval="interval" circular="true">
						<swiper-item v-for="(item, index) in detail.image" :key="index">
							<image class="hm-bg-f" mode="scaleToFill" :src="item.url"></image>
						</swiper-item>
					</swiper>
					<view class="number-banner">
						<text>{{currentIndex}}</text>
						<text>/{{detail.image.length}}</text>
					</view>
				<view class="hm-p-20 hm-bg-f">
					<view class="hm-line-1">{{detail.goods_name}}</view>
					<view class="hm-p-t-10">
						<text class="hm-col-error">￥{{goods_price}}</text>
						<text class="hm-m-l-20 hm-col-tips hm-font-zhx" v-if="line_price>0">￥{{line_price}}</text>
						<text class="hm-fr hm-col-tips">销量：{{detail.goods_sales}}</text>
					</view>
				</view>
				<!-- 商品描述 -->
				<view v-if="detail.content!=''" class="hm-p-20 hm-m-t-20 hm-bg-f">
					<view class="hm-p-b-20 hm-border-b">商品详情</view>
					<view class="hm-p-t-20">
						<u-parse :content="detail.content" selectable></u-parse>
					</view>
				</view>
				<view v-else class="hm">
					<img :src="applet.domain + '/addons/food/img/empty/data.png'" />
					<view class="text">暂无商品详情</view>
				</view>
			</view>
			<!-- 技术支持 -->
			<view class="hm">
				{{applet.copyright}} <text class="v">V{{applet.version}}</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	var App = getApp();

	export default {
		data() {
			return {
				goods_id:0,
				applet:{},
				indicatorDots: true, // 是否显示面板指示点
				autoplay: true, // 是否自动切换
				interval: 3000, // 自动切换时间间隔
				duration: 800, // 滑动动画时长
				currentIndex: 1, // 轮播图指针
				detail: {}, // 商品详情信息
				goods_price: 0, // 商品价格
				line_price: 0, // 划线价格
				goods_num: 1, // 商品数量
			};
		},

		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			let _this = this;
			_this.goods_id = options.goods_id; 
			_this.applet = uni.getStorageSync('applet');
			_this.getGoodsDetail();
		},

		/**
		 * 分享当前页面
		 */
		onShareAppMessage: function() {
			// 构建页面参数
			let _this = this;
			return {
				title: _this.detail.goods_name,
				path: "/pages/goods/detail?goods_id=" + _this.goods_id
			};
		},
		methods: {
			/**
			 * 获取商品信息
			 */
			getGoodsDetail() {
				let _this = this;
				App._get('goods/detail', {
					goods_id: _this.goods_id
				}, function(result) {
					// 初始化商品详情数据
					let data = _this.initGoodsDetailData(result.data);
					_this.setData(data);
				});
			},

			/**
			 * 初始化商品详情数据
			 */
			initGoodsDetailData(data) {
				let _this = this;
				// 商品价格/划线价/库存
				data.goods_sku_id = data.detail.spec[0].spec_sku_id;
				data.goods_price = data.detail.spec[0].goods_price;
				data.line_price = data.detail.spec[0].line_price;
				return data;
			},

			/**
			 * 设置轮播图当前指针 数字
			 */
			setCurrent(e) {
				this.setData({
					currentIndex: e.detail.current + 1
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	.goods{
		width: 100%;
		height: 100%;
		.banner-box {
			height: 750rpx;
			border-bottom: 1rpx solid #f3f4f6;
			image{
				width: 100%;
				height: 750rpx;
			}
		}
		.number-banner {
			position: absolute;
			right: 30rpx;
			margin-top: -70rpx;
			padding: 0 18rpx;
			background: rgba(0, 0, 0, 0.3);
			border-radius: 50rpx;
			color: #fff;
			font-size: 32rpx;
			text:last-child {
				color: rgba(255, 255, 255, 0.6);
				font-size: 26rpx;
			}
		}
	}
</style>
