<template>
	<view class="page">
		<navBar title="详情" :back="true" color="black" background="white" />
		<view class="topImg">
			<u-swiper type='img' radius="0rpx 0rpx 0rpx 40rpx" :list="bannerList" keyName="image" indicator
				indicatorMode="line" :autoplay="true" height="1124rpx" imgMode="heightFix" circular
				@change="e => currentNum = e.current">
				<view slot="indicator">
				</view>
			</u-swiper>

			<view class="indicatorBox1">
				<view class="indicator1">
					<view class="indicator1__dot1" style="" v-for="(item, index) in bannerList" :key="index"
						:class="[index === currentNum ?'indicator1__dot1--active1':'']">
					</view>
				</view>
			</view>
		</view>


		<view class="cen">
			<image class="water" src="/static/index/water.png" mode=""></image>
			<image class="halfC" src="/static/index/halfCircle_275.png" mode=""></image>
			<image class="love" :src="lovePic" mode="" @click="handleCol"></image>
			<view class="txtBox">
				<view class="left">
					轻奢型灯具 纵享美好生活
				</view>
				<view class="right">
					20人已赞
				</view>
			</view>
		</view>
		<view class="parmasBox">
			<view class="con">
				<view class="title">
					选择灯型
				</view>
				<view class="list">
					<view class="item" v-for="i in 5" :class="[i==currIndex?'act':'']" @click="currIndex=i">
						BNL456
					</view>
				</view>


			</view>
			<view class="parmasBox">
				<view class="con">
					<view class="title">
						灯体尺寸
					</view>
					<view class="list">
						<view class="item" v-for="i in 5" :class="[i==currIndex1?'act':'']" @click="currIndex1=i">
							86cm*29cm
						</view>
					</view>
				</view>
			</view>

			<view class="parmasBox" style="border: none;">
				<view class="con">
					<view class="title">
						灯体尺寸
					</view>
					<view class="list">
						<view class="item" v-for="i in 5" :class="[i==currIndex2?'act':'']" @click="currIndex2=i">
							86cm*29cm
						</view>
					</view>
				</view>
			</view>

			<view class="parmasBox" style="border-bottom: none;">
				<view class="con" @click="handleOpenOrClose(1)">
					<view class="title1">
						<view class="txt">
							商品描述
						</view>
						<image class="add" :src="addOrLessIcon1" mode="" :style="{height:addOrLessIcon1=='/static/index/shortLine.png'
					?'2rpx':'22rpx'}"></image>
					</view>
					<view class="des" v-if="show1">
						<view class="title3">
							这是一条商品描述，图文展示
						</view>
						<image src="/static/index/img1.png" class="img" mode=""></image>
					</view>
				</view>
			</view>
		</view>

		<view class="bot">
			<view class="left">
				<view class="price">
					￥2099，9900
				</view>
				<image src="/static/index/arrDown.png" mode=""></image>
			</view>
			<view class="right" @click="previewConfig">
				分享
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				picUrl: this.$picUrl,
				picBase: this.$picBase,
				currIndex: 0,
				currIndex1: 0,
				currIndex2: 0,
				show1: false,
				addOrLessIcon1: '/static/index/add.png',

				lovePic: '/static/mall/love.png',

				content: null,

				currentNum: 0,
				bannerList: [],
			}
		},
		onLoad(o) {
			this.content = JSON.parse(o.item)
			this.bannerList = JSON.parse(o.item).goods.images
			console.log('传过来的收藏详情', this.content);
		},
		methods: {
			handleCol() {
				if (this.lovePic == "/static/mall/love.png") {
					this.lovePic = "/static/mall/no_love.png"
				} else {
					this.lovePic = "/static/mall/love.png"
				}
			},
			handleOpenOrClose(i) {
				if (this['addOrLessIcon' + i] == '/static/index/shortLine.png') {
					this['addOrLessIcon' + i] = '/static/index/add.png'
					this['show' + i] = false
				} else if (this['addOrLessIcon' + i] == '/static/index/add.png') {
					this['addOrLessIcon' + i] = '/static/index/shortLine.png'
					this['show' + i] = true
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>