<template>
	<view :style="warpCss" class="overflow-hidden relative"
		v-if="diyComponent && diyComponent.goods && Object.keys(diyComponent.goods).length">
		<!-- 自定义头部 -->
		<view class="flex items-center left-0 right-0 z-10 bg-transparent detail-head"
			:class="{ '!bg-[#fff]': detailHeadBgChange, 'fixed': diyStore.mode != 'decorate', 'absolute': diyStore.mode == 'decorate' }"
			:style="navbarInnerStyle">
			<view class="flex-center h-[60rpx] rounded-[30rpx] box-border arrow-left px-[40rpx] leading-[1]"
				:style="navbarInnerArrowStyle">
				<text class="nc-iconfont nc-icon-zuoV6xx text-[18px]" @click="backToPrevious()"></text>
				<text class="w-[2rpx] h-[26rpx] bg-[#999] mx-[14rpx]"></text>
				<text class="nc-iconfont nc-icon-liebiao-xiV6xx1 text-[16px]" @click="topNav = true"></text>
			</view>
		</view>
		<view class="fixed top-0 left-0 right-0 bottom-0 z-100 bg-transparent" @click="topNav = false" v-if="topNav">
			<view class="search-box w-[202rpx] bg-[#fff] rounded-[12rpx] relative" :style="fixedInnerStyle">
				<view class="px-[20rpx] flex-center" @click="redirect(item.url)" v-for="(item, index) in menuContents"
					:key="index">
					<text class="text-[30rpx] mr-[10rpx]" :class="item.iconfont"></text>
					<text
						class="pl-[14rpx] py-[20rpx] flex-1 text-[24rpx] text-[#333] border-0 border-[#ddd] border-b-[1rpx] border-solid">{{
							item.name }}</text>
				</view>
			</view>
		</view>
		<view class="w-full relative overflow-hidden" :style="mediumCss">
			<view
				class="absolute top-0 left-0 w-full h-full transition-transform duration-300 ease-linear transform translate-x-0">
				<view class="swiper-box">
					<u-swiper :list="diyComponent.goods.goods_image" @change="swiperChangeFn"
						:indicator="(diyComponent.goods.goods_image.length != 1 || diyStore.mode == 'decorate') && diyComponent.medium.indicator"
						:indicatorStyle="{ 'bottom': '70rpx' }" :autoplay="true" :height="swiperImageHeight" radius="0"
						@click="swiperClick"></u-swiper>
				</view>
			</view>
			<!-- 切换视频、图片 -->
			<view
				class="media-mode bg-[rgb(0,0,0,.5)] flex items-center rounded-[50rpx] p-[2rpx] absolute bottom-[130rpx] right-[20rpx] text-center leading-[46rpx]">
				<view class="tab-item flex items-center !bg-[#fff] !text-[#666]">
					<text
						v-if="diyComponent?.goods?.goods_image?.length > 1">{{ swiperCurrentIndex }}/{{ diyComponent.goods.goods_image.length }}</text>
				</view>
			</view>
		</view>
		<view class="relative flex items-center justify-between !bg-cover box-border pb-[26rpx] h-[136rpx] px-[30rpx]"
			:style="marketGoodCss">
			<view class="text-[#fff] leading-[normal]">
				<view class="inline-block mr-[14rpx] relative top-[2rpx]">
					<text class="text-[32rpx] price-font mr-[4rpx]">￥</text>
					<text class="text-[48rpx] -mb-[4rpx] price-font">{{ parseFloat(goodsPrice).toFixed(2).split('.')[0]
						}}</text>
					<text class="text-[32rpx] price-font">.{{ parseFloat(goodsPrice).toFixed(2).split('.')[1] }}</text>
				</view>
				<view class="inline-block">
					<text class="text-[30rpx] relative top-[1rpx] price-font leading-[36rpx] line-through">￥{{
						diyComponent.marketPrice || '0.00' }}</text>
				</view>
			</view>
		</view>
		<view class="overflow-hidden -mt-[34rpx] relative" :style="ordinaryGoodCss">
			<view class="detail-title relative px-[30rpx] pt-[30rpx]">
				<view class="font-medium text-[30rpx] multi-hidden leading-[40rpx]"
					:style="{ 'color': diyComponent.goodsInfo.titleColor }">
					<view class="brand-tag middle">
						{{ diyComponent.isSelf == 1 ? '自营商品' : '非自营' }}</view>
					{{ diyComponent.goods.goods_name }}
				</view>
				<view class="flex flex-wrap mt-[16rpx]">
					<view class="base-tag middle">{{ diyComponent.brandName }}</view>
					<view class="base-tag middle">{{ diyComponent.topCategoryName }}</view>
					<view class="base-tag middle">{{ diyComponent.mediumCategoryName }}</view>
					<view class="base-tag middle">{{ diyComponent.bottomCategoryName }}</view>
				</view>
				<view class="flex justify-between items-start mt-[24rpx]">
					<view class="text-[24rpx] leading-[34rpx]" :style="{ 'color': diyComponent.goodsInfo.saleInfoColor }"
						v-if="saleInfo.includes('stock')">
						<text class="whitespace-nowrap mr-[4rpx]">库存:</text>
						<text>{{ diyComponent.allStock }}</text>
						<text>{{ diyComponent.goods.unit }}</text>
					</view>
					<view class="text-[24rpx] leading-[34rpx]" v-if="saleInfo.includes('sales')"
						:style="{ 'color': diyComponent.goodsInfo.saleInfoColor }">
						<text class="mx-[2rpx]"> {{ diyComponent.isCustomize == 1 ? '可定制' : '不可定制' }}</text>
					</view>
					<view class="text-[24rpx] leading-[34rpx]" v-if="saleInfo.includes('underlined_price')"
						:style="{ 'color': diyComponent.goodsInfo.saleInfoColor }">
						<text class="whitespace-nowrap mr-[4rpx]">起订:</text>
						<text>{{ diyComponent.minOrderQuantity }}</text>
						<text>{{ diyComponent.goods.unit }}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 装修时，防止点击 -->
		<view v-if="diyStore.mode == 'decorate'" class="absolute z-10 top-0 right-0 bottom-0 left-0"></view>
	</view>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted, nextTick, getCurrentInstance } from 'vue';
import { onPageScroll } from '@dcloudio/uni-app'
import { redirect, img, getToken } from '@/utils/common';
import useDiyStore from '@/app/stores/diy';
import useSystemStore from '@/stores/system'
import { useGoods } from '@/addon/shop/hooks/useGoods'
import useGoodsDetailStore from '@/addon/shop/stores/goodsDetail';

const props = defineProps(['component', 'index', 'value', 'global']);
const diyStore = useDiyStore();
const emits = defineEmits(['loadingFn', 'update:componentIsShow']); //商品数据加载完成之后触发
const topNav = ref(false);
const switchMedia: any = ref('img');
const swiperCurrentIndex = ref(1); // 轮播图当前索引
const videoContext: any = ref(null)
const discountTime = ref(0)
const swiperImageHeight = ref('100vw') // 轮播图高度
const diyGoods = useGoods();

const diyComponent = computed(() => {
	if (diyStore.mode == 'decorate') {
		const obj = {
			price: 50,
			goods: {
				goods_image: [img('static/resource/images/diy/shop_default.jpg')],
				goods_name: '商品名称',
				sub_title: '商品副标题',
				unit: '件',
				sale_num: '50'
			},
			market_price: '100.00',
			stock: 80,
		}
		return Object.assign({}, obj, diyStore.value[props.index]);
	} else {
		return Object.assign({}, props.component, useGoodsDetailStore().goodsDetail);
	}
})
const saleInfo = ref<any>([])
const diyGlobal = computed(() => {
	return props.global;
})

const warpCss = computed(() => {
	let style = '';
	style += 'position:relative;';
	if (diyComponent.value.componentStartBgColor && diyComponent.value.componentEndBgColor) style += `background:linear-gradient(${diyComponent.value.componentGradientAngle},${diyComponent.value.componentStartBgColor},${diyComponent.value.componentEndBgColor});`;
	else style += 'background-color:' + (diyComponent.value.componentStartBgColor || diyComponent.value.componentEndBgColor) + ';';

	if (diyComponent.value.componentBgUrl) {
		style += `background-image:url('${img(diyComponent.value.componentBgUrl)}');`;
		style += 'background-size: cover;background-repeat: no-repeat;';
	}

	if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
	if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
	if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
	if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
	return style;
})

/************ 自定义头部-start ****************/
const systemStore = useSystemStore()
let platform = systemStore.systemInfo.platform;

// 导航栏内部盒子的样式
const navbarInnerStyle = computed(() => {
	let style = '';
	// 导航栏宽度，如果在小程序下，导航栏宽度为胶囊的左边到屏幕左边的距离
	// #ifdef MP
	let rightButtonWidth = systemStore.menuButtonInfo.width ? systemStore.menuButtonInfo.width * 2 + 'rpx' : '70rpx';
	style += 'height:' + systemStore.menuButtonInfo.height + 'px;';
	style += 'padding-right:calc(' + rightButtonWidth + ' + 30rpx);';
	style += 'padding-left:calc(' + rightButtonWidth + ' + 30rpx);';
	style += 'padding-top:' + systemStore.menuButtonInfo.top + 'px;';
	style += 'padding-bottom: 8px;';

	style += 'font-size: 32rpx;';
	if (platform === 'ios') {
		// 苹果(iOS)设备
		style += 'font-weight: 500;';
	} else if (platform === 'android') {
		// 安卓(Android)设备
		style += 'font-size: 36rpx;';
	}
	// #endif

	// #ifdef H5
	style += 'height: 100rpx;';
	style += 'padding-right: 30rpx;';
	style += 'padding-left: 30rpx;';

	style += 'font-size: 32rpx;';
	if (platform === 'ios') {
		// 苹果(iOS)设备
		style += 'font-weight: 500;';
	} else if (platform === 'android') {
		// 安卓(Android)设备
		style += 'font-size: 36rpx;';
	}
	// #endif

	// #ifdef APP-PLUS
	style += 'height: 80rpx;';
	style += 'padding-right: 30rpx;';
	style += 'padding-left: 30rpx;';
	style += 'padding-top:' + systemStore.systemInfo.statusBarHeight + 'px;';
	// #endif

	return style;
})

// 导航栏内部盒子的样式
const navbarInnerArrowStyle = computed(() => {
	let style = '';
	// 导航栏宽度，如果在小程序下，导航栏宽度为胶囊的左边到屏幕左边的距离
	// #ifdef MP
	style += 'position: absolute;';
	style += 'left:calc( 100vw - ' + systemStore.menuButtonInfo.right + 'px);';
	if (platform === 'ios') {
		// 苹果(iOS)设备
		style += 'font-weight: 700;';
	} else if (platform === 'android') {
		// 安卓(Android)设备
	}
	// #endif
	return style;
})

// 导航栏头部卡片样式
const fixedInnerStyle = computed(() => {
	let style = '';
	// #ifdef MP
	style += 'top:' + (systemStore.menuButtonInfo.height + systemStore.menuButtonInfo.top + 8) + 'px;';
	style += 'left:calc( 100vw - ' + systemStore.menuButtonInfo.right + 'px);';
	// #endif
	// #ifdef H5
	style += 'top: 100rpx;';
	style += 'left: 30rpx;';
	// #endif
	// #ifdef APP-PLUS
	style += 'top:' + (systemStore.systemInfo.statusBarHeight + uni.upx2px(100)) + 'px;';
	style += 'left: 30rpx;';
	// #endif
	return style;
})

// 头部滚动
const instance = getCurrentInstance();
let swiperHeight = 0
let detailHead = 0

const detailHeadBgChange = ref(false)
onPageScroll((e) => {
	if (swiperHeight == 0 || detailHead == 0) return;
	let height = swiperHeight - detailHead - 20;
	detailHeadBgChange.value = false;
	if (e.scrollTop >= height) {
		detailHeadBgChange.value = true;
	}
})
/************ 自定义头部-end ****************/
/************* 分享海报-end **************/

// 菜单列表
const menuList: any = {
	index: {
		name: '首页',
		iconfont: 'nc-iconfont nc-icon-shouyeV6xx11',
		url: { url: '/addon/shop/pages/index', mode: 'reLaunch' }
	},
	search: {
		name: '搜索',
		iconfont: 'nc-iconfont nc-icon-sousuo-duanV6xx1',
		url: { url: '/addon/shop/pages/goods/search' }
	},
	cart: {
		name: '购物车',
		iconfont: 'nc-iconfont nc-icon-gouwucheV6xx1',
		url: { url: '/addon/shop/pages/goods/cart' }
	},
	member: {
		name: '个人中心',
		iconfont: 'nc-iconfont nc-icon-a-wodeV6xx-36',
		url: { url: '/addon/shop/pages/member/index' }
	},
	collect: {
		name: '我的收藏',
		iconfont: 'nc-iconfont nc-icon-guanzhuV6xx',
		url: { url: '/addon/shop/pages/goods/collect' }
	},
	goods_list: {
		name: '商品列表',
		iconfont: 'iconfont icona-yingyongliebiaoV6xx-32',
		url: { url: '/addon/shop/pages/goods/list' }
	},
	goods_category: {
		name: '商品分类',
		iconfont: 'nc-iconfont nc-icon-shangpinfenlei',
		url: { url: '/addon/shop/pages/goods/category' }
	}
}

const menuContents = computed(() => {
	const list: any = []
	let menu = typeof diyComponent.value.menuContent == 'object' ? diyComponent.value.menuContent : diyComponent.value.menuContent.split(',')
	menu.forEach((item: any) => {
		if (menuList[item]) {
			list.push(menuList[item])
		}
	})
	return list
})

// 图片轮播change事件
const swiperChangeFn = (e: any) => {
	swiperCurrentIndex.value = e.current + 1;
}


// 商品价格
const goodsPrice = computed(() => {
	let price = "0.00";
	if (diyStore.mode != 'decorate') {
		price = diyComponent.value.memberPrice || '0.00'
	} else {
		price = '100.00' // 装修模式
	}
	return price;
})

// 普通商品样式
const ordinaryGoodCss = computed(() => {
	let style = "";

	if (diyComponent.value.goodsInfo.startBgColor && diyComponent.value.goodsInfo.endBgColor) style += `background:linear-gradient(180deg,${diyComponent.value.goodsInfo.startBgColor} 85% ,${diyComponent.value.goodsInfo.endBgColor} 100%);`;
	else style += 'background-color:' + (diyComponent.value.goodsInfo.startBgColor || diyComponent.value.goodsInfo.endBgColor) + ';';

	if (diyComponent.value.goodsInfo.topMargin) style += 'margin-top:' + diyComponent.value.goodsInfo.topMargin * 2 + 'rpx;';
	if (diyComponent.value.goodsInfo.aboutMargin) {
		style += 'margin-left:' + diyComponent.value.goodsInfo.aboutMargin * 2 + 'rpx;';
		style += 'margin-right:' + diyComponent.value.goodsInfo.aboutMargin * 2 + 'rpx;';
	}

	if (diyComponent.value.goodsInfo.topRounded) style += 'border-top-left-radius:' + diyComponent.value.goodsInfo.topRounded * 2 + 'rpx;';
	if (diyComponent.value.goodsInfo.topRounded) style += 'border-top-right-radius:' + diyComponent.value.goodsInfo.topRounded * 2 + 'rpx;';
	if (diyComponent.value.goodsInfo.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.goodsInfo.bottomRounded * 2 + 'rpx;';
	if (diyComponent.value.goodsInfo.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.goodsInfo.bottomRounded * 2 + 'rpx;';
	return style;
})

// 价格模块样式
const marketGoodCss = computed(() => {
	let style = "";
	let imgVal = 'https://v6.site.niucloud.com/' + diyComponent.value.priceRegion.marketingBgImg;
	style += `background: url(${img(imgVal)}) no-repeat;`;

	if (diyComponent.value.goodsInfo.priceBgColor) {
		style += `background-color: ${diyComponent.value.goodsInfo.priceBgColor};`;
	}

	if (diyComponent.value.goodsInfo.priceTopMargin) style += 'margin-top:' + diyComponent.value.goodsInfo.priceTopMargin * 2 + 'rpx;';
	if (diyComponent.value.goodsInfo.priceAboutMargin) {
		style += 'margin-left:' + diyComponent.value.goodsInfo.priceAboutMargin * 2 + 'rpx;';
		style += 'margin-right:' + diyComponent.value.goodsInfo.priceAboutMargin * 2 + 'rpx;';
	}

	if (diyComponent.value.goodsInfo.priceTopRounded) style += 'border-top-left-radius:' + diyComponent.value.goodsInfo.priceTopRounded * 2 + 'rpx;';
	if (diyComponent.value.goodsInfo.priceTopRounded) style += 'border-top-right-radius:' + diyComponent.value.goodsInfo.priceTopRounded * 2 + 'rpx;';
	if (diyComponent.value.goodsInfo.priceBottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.goodsInfo.priceBottomRounded * 2 + 'rpx;';
	if (diyComponent.value.goodsInfo.priceBottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.goodsInfo.priceBottomRounded * 2 + 'rpx;';
	return style;
})


const mediumCss = computed(() => {
	let style = "";
	if (diyComponent.value.medium.type == 'height_adaptive') {
		style += `height:${swiperImageHeight.value};`;
	} else {
		style += 'height:100vw;';
	}
	return style;
})


const swiperClick = (index: any) => {
	if (typeof index == 'number') imgListPreview(diyComponent.value.goods.goods_image, index)
}

//预览图片
const imgListPreview = (item: any, index: any) => {
	if (Array.isArray(item)) {
		if (!item.length) return false
		var urlList = item;
		uni.previewImage({
			indicator: "number",
			current: index,
			loop: true,
			urls: urlList
		})
	} else {
		if (item === '') return false
		var urlList = []
		urlList.push(img(item))  //push中的参数为 :src="item.img_url" 中的图片地址
		uni.previewImage({
			indicator: "number",
			loop: true,
			urls: urlList
		})
	}

}

// 返回上一页
const backToPrevious = () => {
	if (getCurrentPages().length > 1) {
		uni.navigateBack({
			delta: 1
		});
	} else {
		redirect({
			url: '/addon/shop/pages/index',
			mode: 'reLaunch'
		});
	}
}

const initFn = () => {
	saleInfo.value = (typeof diyComponent.value?.saleInfo == 'object') ? diyComponent.value?.saleInfo : diyComponent.value?.saleInfo.split(',');

	setTimeout(() => {
		const query = uni.createSelectorQuery().in(instance);
		query.select('.swiper-box').boundingClientRect((data: any) => {
			swiperHeight = data ? data.height : 0;
		}).exec();
		query.select('.detail-head').boundingClientRect((data: any) => {
			if (data) {
				detailHead = data.height ? data.height : 0;
			}
		}).exec();
	}, 400)

	// 轮播图高度
	if (diyComponent.value.medium.type == 'height_adaptive') {
		const screenWidth = uni.getSystemInfoSync().screenWidth
		swiperImageHeight.value = (screenWidth * diyComponent.value.goods.image_size.height / diyComponent.value.goods.image_size.width) * 2 + 'rpx'
	} else {
		swiperImageHeight.value = '100vw'
	}
}

onMounted(() => {
	saleInfo.value = (typeof diyComponent.value?.saleInfo == 'object') ? diyComponent.value?.saleInfo : diyComponent.value?.saleInfo.split(',');
	// 装修模式下刷新
	if (diyStore.mode == 'decorate') {
		watch(
			() => diyComponent.value,
			(newValue, oldValue) => {
				if (newValue && newValue.componentName == 'ShopGoodsDetailBasicInfo') {
					nextTick(() => {
						saleInfo.value = (typeof diyComponent.value?.saleInfo == 'object') ? diyComponent.value?.saleInfo : diyComponent.value?.saleInfo.split(',');
					})
				}
			}
		)
	} else {
		initFn()
		watch(
			() => diyComponent.value,
			(newValue, oldValue) => {
				if (newValue && newValue.componentName == 'ShopGoodsDetailBasicInfo') {
					emits('update:componentIsShow', true)
				}
			},
			{ immediate: true }
		)
	}
});
</script>
<style lang="scss" scoped>
.arrow-left {
	// background: rgba(153, 153, 153, 0.1);
	background: rgba(255, 255, 255, 0.6);
	border: 1rpx solid rgba(0, 0, 0, 0.1);
}

.media-mode {
	.tab-item {
		color: #fff;
		font-size: 24rpx;
		line-height: 46rpx;
		border-radius: 50rpx;
		padding: 0 20rpx;
		display: inline-block;
	}
}

.brand-tag {
	position: relative;
	top: -2rpx;
	display: inline;
	line-height: 38rpx;
	padding: 4rpx 8rpx;
	border-radius: 4rpx;
	margin-right: 8rpx;
	background: red;
	vertical-align: middle;
	font-size: 18rpx;
	color: #fff;
	border: 2rpx solid transparent;

	&.middle {
		padding: 4rpx 8rpx;
		border-radius: 8rpx;
		font-size: 20rpx;
		margin-right: 6rpx;
	}
}

.base-tag {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 34rpx;
	font-size: 18rpx;
	padding: 0 8rpx;
	color: #333;
	border-radius: 4rpx;
	background-color: #fff;
	margin-right: 8rpx;
	box-sizing: border-box;
	margin-top: 8rpx;
	border: 2rpx solid transparent;
	color: rgb(255, 0, 0);
	border-color: rgb(255, 0, 0);
	background-color: rgb(255, 255, 255);

	&.middle {
		height: 40rpx;
		padding: 0 12rpx;
		border-radius: 8rpx;
		font-size: 20rpx;
		margin-right: 16rpx;
	}
}

.img-tag {
	display: block;
	height: 34rpx;
	width: auto;
	border-radius: 4rpx;
	margin-right: 14rpx;
	box-sizing: border-box;
	margin-top: 8rpx;

	&.middle {
		height: 38rpx;
		border-radius: 8rpx;
		margin-right: 16rpx;
	}
}

.goods-video-height {
	height: 100%;
}

:deep(.uni-video-bar) {
	bottom: 34rpx !important;
}

:deep(.uni-video-cover) {
	background: none;
}

:deep(.uni-video-cover-duration) {
	display: none;
}

:deep(.uni-video-cover-play-button) {
	border-radius: 50%;
	border: 4rpx solid #fff;
	width: 120rpx;
	height: 120rpx;
	background-size: 30%;
}
</style>