<template>
	<div class="app-content">
		<app-swiper :height="{type: 'number',val: 750}" :tagShow="true" :list="imgList" />
		<!-- 商品简介 -->
		<div class="shop-intro">
			<div class="app-price app-bold">
				<text>￥</text>
				<text class="app-size-34">{{ data.price }}</text>
				<!-- <text>.00</text> -->
			</div>
			<div class="tui-pro-titbox">
				<div class="tui-pro-title app-size-32">{{ data.goodsName }}</div>
				<button open-type="share" class="tui-share-btn tui-share-position">
					<app-tag type="gray" tui-tag-class="tui-tag-share tui-size" shape="circleLeft" size="small">
						<div class="flex-center">
							<i class="iconfont iconfenxiang"></i>
							<text class="tui-share-text tui-gray">分享</text>
						</div>
					</app-tag>
				</button>
			</div>
			<div class="shop-express app-color-3">
				<div>{{ data.freeSendDist }}公里免运费</div>
				<div>
					<span class="prompt-text">月销</span>
					<span>{{ data.sold }}</span>
				</div>
				<div>
					<span class="prompt-text">剩余</span>
					<span>{{ data.stock }}</span>
				</div>
			</div>
		</div>
		<!-- 商品简介 -->
		<!-- 商品详情 -->
		<div class="module-wrap shop-detail">
			<div class="module-tit app-size-30">商品详情</div>
			<div class="module-det">
				<!-- <app-img :src="imgNormal" alt mode="widthFix" /> -->
				<div class="module-det-text" v-html="data.content"></div>
			</div>
		</div>
		<!-- 商品详情 -->
		<!-- 简要说明 -->
		<div class="module-wrap shop-desc">
			<div class="module-tit app-size-30">简要说明</div>
			<div class="module-det">
				<div class="module-det-text">{{ data.commonIntro }}</div>
			</div>
		</div>
		<!-- 简要说明 -->
		<app-trademark />
		<sel-popup :show="popupShow" :info="data" :buyNum="buyNum" @change="changeNum" @close="hidePopup" />
		<buy-foot @buy="showPopup" />
		<!-- login -->
		<go-login :show.sync="loginShow" />
	</div>
</template>

<script>
import AppImg from '@/components/app-img'
import AppSwiper from '@/components/app-swiper'
import AppTag from '@/components/module/app-tag.vue'
import AppTrademark from '@/components/module/app-trademark'
import BuyFoot from './components/buy-foot.vue'
import SelPopup from './components/sel-popup.vue'
import GoLogin from '@/pages/home/components/go-login.vue'
// api
import { getDetail } from '@/api/goods'
export default {
	name: 'goods-detail',
	components: {
		AppSwiper,
		AppTag,
		AppTrademark,
		BuyFoot,
		SelPopup,
		AppImg,
		GoLogin
	},
	data() {
		return {
			data: {},
			imgList: [],
			buyNum: 1,
			popupShow: false,
			loginShow: false
		}
	},
	onLoad(option) {
	},
	mounted() {
		// this.$util.getCheckLogin().then(res => {
		// 	if (!res) return false
		// this.init()
		// })
	},
	computed: {
		// imgNormal() {
		// 	if (!this.$util.isEmpty(this.data)) {
		// 		return this.data.imgList[0]
		// 	} else {
		// 		return ''
		// 	}
		// }
	},
	methods: {
		init() {
			this._getDetail()
		},
		_getDetail() {
			getDetail({ id: this.option.id }).then(res => {
				if (this.$util.isEmpty(res.data)) return false
				this.data = res.data
				let newArr = []
				for (let i in res.data.imgList) {
					newArr.push({
						img: res.data.imgList[i]
					})
				}
				this.imgList = newArr
			})
		},
		// 更换数量
		changeNum(e) {
			this.buyNum = e.value
		},
		showPopup() {
			if (this.$util.isLogin()) {
				this.popupShow = true
			} else {
				this.loginShow = true
			}
		},
		hidePopup() {
			this.popupShow = false
		}
	}
}
</script>

<style lang="scss" scoped>
	.app-content {
		padding-bottom: 120px;
		// 公共模块
		.module-wrap {
			margin-top: 20px;
			background-color: #fff;
			.module-tit {
				padding: 14px 24px;
				border-bottom: 1px solid $borderColor;
			}
			.module-det {
				color: $fontColor2;
				.module-det-text {
					padding: 24px;
				}
			}
		}
		// 公共模块
		.shop-intro {
			background: #fff;
			padding: 30px 0 30px 30px;
			.tui-pro-titbox {
				margin: 30px 0 20px;
				@include disFlex(center, space-between);
				.tui-pro-title {
					width: 80%;
				}
				.tui-share-btn {
					display: block;
					background: none;
					margin: 0;
					padding: 0;
					border-radius: 0;
					.tui-share-text {
						padding-left: 4px;
						color: $fontColor3;
					}
				}
				.iconfenxiang {
					font-size: 26px;
					color: $fontColor3;
					margin-right: 6px;
				}
			}
			.shop-express {
				padding-right: 30px;
				@include disFlex(center, space-between);
				.prompt-text {
					margin-right: 4px;
				}
			}
		}
		.shop-desc {
			.module-det {
				// padding: 24px;
				line-height: 48px;
			}
		}
	}
</style>
