<template>
	<view class="page">
		<navBar :backType="navBarTitle" :title="navBarTitle?navBarTitle:'详情'" :back="true" color="black"
			background="white" />
		<!-- <image class="topImg" :src="picUrl + '/static/other/noMain_img3.png'" mode=""></image> -->
		<view class="topImg">
			<u-swiper type='img' radius="0rpx 0rpx 0rpx 40rpx" :list="bannerList" keyName="image" indicator
				indicatorMode="line" :autoplay="true" height="850rpx" imgMode="heightFix" circular
				@change="bannerChange">
				<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">
					{{content.name}}
				</view>
				<view class="right">
					{{totalCount}}人已收藏
				</view>
			</view>
		</view>
		<view class="box" v-if="isSellBack" v-for="(item,index) in actData" :key="index">
			<view class="cutDowncard">
				<view class="top">
					<view class="left">
						活动名称：
					</view>
					<view class="right">
						{{item.name}}
					</view>
				</view>
				<view class="boto">
					<view class="left">
						活动倒计时
					</view>
					<view class="right">
						<u-count-down :time="cutDownTime" format="DD:HH:mm:ss" autoStart millisecond @change="onChange">
							<view class="time">
								<view class="time__custom">
									<text class="time__custom__item">{{ timeData.days }}</text>
								</view>
								<text class="time__doc">&nbsp;天:</text>
								<view class="time__custom">
									<text
										class="time__custom__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}</text>
								</view>
								<text class="time__doc">:</text>
								<view class="time__custom">
									<text class="time__custom__item">{{ timeData.minutes }}</text>
								</view>
								<text class="time__doc">:</text>
								<view class="time__custom">
									<text class="time__custom__item">{{ timeData.seconds }}</text>
								</view>
							</view>
						</u-count-down>
					</view>
				</view>
			</view>
		</view>
		<!-- 	<view class="parmasBox" v-for="(item,index) in parmsList" v-if="navBarTitle" :key="index">
			<view class="con">
				<view class="title">
					{{item.title}}
				</view>
				<view class="list">
					<view class="item" v-for="(item1,index1) in item.list" :class="[index1==ids[index]?'act':'']"
						@click="">
						{{item1.data}}
					</view>
				</view>
			</view>
		</view> -->
		<view class="parmasBox" v-for="(item,index) in Object.keys(skuParams.attrs)">
			<view class="con">
				<view class="title">
					{{item}}
				</view>
				<view class="list">
					<view class="item" @click="handleC(item,index,item1)"
						v-for="(item1,index1) in skuParams.attrs[item]" :class="[item1==saveCheckedObj[item]?'act':'']">
						{{item1}}
					</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">
					<u-parse :content="content1"></u-parse>
				</view>
			</view>
		</view>
		<!-- </view> -->

		<view class="bot">
			<view class="left">
				<view class="price">
					￥{{Number( totalPrice).toFixed(2)}}
				</view>
				<image src="/static/index/arrDown.png" mode=""></image>
			</view>
			<button open-type="share" class="right">
				一键下单
			</button>
		</view>
	</view>
</template>

<script>
	import {
		addCollReq,
		cancelCollReq,
		getGoodsPriceReq,
		postOrderReq,
		getMyGoodsDetailReq,
	} from '@/api/test/index.js'
	export default {
		components: {

		},
		data() {
			return {
				timeData: {},

				currentNum: 0,
				content: null,
				totalCount: 0,

				picUrl: this.$picUrl,
				picBase: this.$picBase,

				currIndex: 0,
				currIndex1: 0,
				currIndex2: 0,
				show1: false,
				addOrLessIcon1: '/static/index/add.png',

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

				bannerList: [],

				isSellBack: true,
				content1: '',

				totalPrice: 0,
				parmsObj: {},

				actData: [],

				cutDownTime: 0,

				navBarTitle: '',
				ids: [],
				cutdownRatio: 1,
				// sku
				skuParams: {
					"attrs": {},
					"sku": []
				},
				saveCheckedObj: null,
				fullCheckArr: [],
				watchValue: null,
				conditions: [],
			}
		},
		async onLoad(o) {
			// o.id = 23
			if (o.id) {
				// this.ids = JSON.parse(o.ids)
				this.navBarTitle = '首页'
				let res = await getMyGoodsDetailReq({
					id: o.id
				})
				if (res.code == 0) {
					console.log('换新商品或活动商品详情返回值: ', res);
					this.skuParams = res.data.sku_params
					// 动态生成判断条件对象数组
					let c = []
					Object.keys(this.skuParams.attrs).forEach((item, index) => {
						c.push({
							key: item,
							value: null
						})
					})
					this.conditions = c
					// 动态生成用于判断选中激活项的对象
					let saveCheckedObj = {}
					Object.keys(this.skuParams.attrs).forEach((item, index) => {
						saveCheckedObj[item] = null
					})
					this.saveCheckedObj = saveCheckedObj
					// 动态生成用于判断sku参数是否全部选中的中间数组
					this.fullCheckArr = new Array(Object.keys(this.skuParams.attrs).length).fill(0)


					this.content = res.data
					this.bannerList = res.data.images
					this.totalCount = res.data.collect_total_count


					this.content1 = res.data.content
					if (this.content.isCollect) {
						this.lovePic = "/static/mall/love.png"
					} else {
						this.lovePic = "/static/mall/no_love.png"
					}

					if (o.isSellBack) {
						this.isSellBack = o.isSellBack
						this.actData = res.data.activity_data

						this.handleRemianTime(this.actData[0].date)
					}
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			} else {
				this.content = getApp().mallItem

				this.skuParams = getApp().mallItem.sku_params
				// 动态生成判断条件对象数组
				let c = []
				Object.keys(this.skuParams.attrs).forEach((item, index) => {
					c.push({
						key: item,
						value: null
					})
				})
				this.conditions = c
				// 动态生成用于判断选中激活项的对象
				let saveCheckedObj = {}
				Object.keys(this.skuParams.attrs).forEach((item, index) => {
					saveCheckedObj[item] = null
				})
				this.saveCheckedObj = saveCheckedObj
				// 动态生成用于判断sku参数是否全部选中的中间数组
				this.fullCheckArr = new Array(Object.keys(this.skuParams.attrs).length).fill(0)


				this.bannerList = getApp().mallItem.images
				this.totalCount = this.content.collect_total_count

				console.log('售后商品详情', this.content);
				if (this.content.isCollect) {
					this.lovePic = "/static/mall/love.png"
				} else {
					this.lovePic = "/static/mall/no_love.png"
				}
				this.isSellBack = getApp().isSellBack

				this.content1 = getApp().mallItem.content

				if (getApp().isSellBack) {
					this.actData = getApp().mallItem.activity_data

					this.handleRemianTime(this.actData[0].date)
				}
				console.log('是否展示活动倒计时', getApp().isSellBack);
			}
		},
		onShow() {
			this.cutdownRatio = this.$getCutDown()
		},
		onShareAppMessage(params) {
			if (params.from === 'button' || params.from === 'menu') {
				return {
					title: this.content.name,
					imageUrl: this.$picBase + this.content.cover,
					path: '/pages/my/actGoodsDetail/index?id=' + this.content.id +
						'&isSellBack=' + this.isSellBack,
					mpId: this.$appId,
					type: this.$shareType,
				}
			}
		},
		watch: {
			watchValue(n, o) {
				let showPrice = this.fullCheckArr.every((item, index) => {
					return item == 1
				})
				if (showPrice) {
					const filterResult = this.skuParams.sku.filter(item => {
						return this.conditions.every(condition => {
							const attrValues = this.skuParams.attrs[condition.key];
							return attrValues.includes(item[condition.key]) && item[condition.key] ===
								condition.value;
						});
					});

					this.totalPrice = filterResult[0].price
					// console.log('所求价格:', filterResult[0].price);
				}
			}
		},
		methods: {
			handleRemianTime(expireTime) {
				console.log('活动开始时间', expireTime);
				this.cutDownTime = (new Date(expireTime).getTime()) - Date.now()
			},

			onChange(e) {
				this.timeData = e
			},
			handleC(item, index, item1) {
				this.fullCheckArr[index] = 1

				// 声东击西强行触发监听
				this.watchValue = Date.now()
				this.saveCheckedObj[item] = item1

				//此处个条件对象数组条件赋值(key==外围数组key)
				this.conditions.forEach((item2, index2) => {
					if (item2.key == item) {
						item2.value = item1
					}
				})
			},
			bannerChange(e) {
				this.currentNum = e.current
			},

			async handleCol() {
				if (this.lovePic == "/static/mall/no_love.png") {
					let res = await addCollReq({
						id: this.content.id,
					})
					if (res.code == 0) {
						console.log('添加收藏返回值: ', res);
						this.$toast('收藏成功')
						this.totalCount += 1
						if (this.lovePic == "/static/mall/love.png") {
							this.lovePic = "/static/mall/no_love.png"
						} else {
							this.lovePic = "/static/mall/love.png"
						}
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				} else {
					let res = await cancelCollReq({
						id: this.content.id,
					})
					if (res.code == 0) {
						console.log('取消收藏返回值: ', res);
						this.$toast('取消收藏成功')
						this.totalCount -= 1
						if (this.lovePic == "/static/mall/love.png") {
							this.lovePic = "/static/mall/no_love.png"
						} else {
							this.lovePic = "/static/mall/love.png"
						}
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				}

			},
			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>