<template>
	<view class="head">
		<view class="head-botyd">
			<!-- <u-swiper
		    	        :list="list1"
		    	        @change="change"
		    	        @click="click"
						
		    	></u-swiper> -->
			<view class="uni-margin-wrap">
				<swiper indicator-dots indicator-active-color="#FFFFFF" circular autoplay @change="change">
					<swiper-item v-for="(ietm,index) in list1" :key="index">
						<image class="images" :src="$util.img(ietm)" mode=""></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- swipe -->
			<view class="Whichnumber df aic">
				<div class="Whichnumberone">{{current+1}}/{{list1.length}}</div>
			</view>
		</view>
		<view class="product">
			<view class="productcabj">
				<view class="time">
					￥{{goods_sku_detail.price}}<span>{{goods_sku_detail.goods_name}}</span>
				</view>
				<view class="introduction">
					<u-parse :content="goods_sku_detail.goods_content"></u-parse>

				</view>
				<!-- <view class="df aic jcsb mei">
						<view class="df">
							<view class="meimanyiyuan df aic jcsa">
								每满1元送1积分
							</view>
							<view class="yidaiqiding df aic jcsa">
								1袋整倍起订
							</view>
						</view>
						<view class="yunfei">
							<!-- 运费：{{template_name}} -->
				<!-- </view> -->
				<!-- </view> -->
			</view>
			<view class="candi">
				<view class="" v-if="goods_sku_detail.address.length>0">
					产地：{{goods_sku_detail.address || "未知"}}
				</view>
				<view class="" v-if="goods_sku_detail.spec_name.length>0">
					规格：{{goods_sku_detail.spec_name}}
				</view>
				<view class="" v-if="goods_sku_detail.goods_code.length>0">
					商品编号：{{goods_sku_detail.goods_code}}
				</view>
			</view>
		</view>
		<view class="detailed">
			<view class="df aic caxinagh">
				<view class="pattern"></view>
				<view class="productdetails">
					产品详情
				</view>
			</view>
			<view class="ecutivestandards">
				执行标准
			</view>
			<view class="Chinesepharmacies" v-if="goods_sku_detail.execu_content">
				{{ goods_sku_detail.execu_content.title || "未知"}}
			</view>
			<view class="manufacturingenterprise">
				生产企业
			</view>
			<view class="corporation">
				{{goods_sku_detail.business || "未知"}}
			</view>

			<image class="images" :src="$util.img(goods_sku_detail.goods_image)" mode=""></image>

		</view>
	</view>
</template>

<script>
	import {
		imgDomain
	} from '@/config/development.js'
	export default {
		data() {
			return {
				list1: [],
				current: 0,
				total: '',
				goods_id: '',
				goods_sku_detail: [],
				template_name: '',
				regex: '',
				auth_level: '',
				background: [
					'https://yaochangshop.three.xinzhidi.cn/upload/1/common/images/20230529/20230529105313168537199334683.jpg',
					'https://yaochangshop.three.xinzhidi.cn/upload/1/common/images/20230529/20230529105313168537199334339.jpg',
					'https://yaochangshop.three.xinzhidi.cn/upload/1/common/images/20230529/20230529105313168537199334741.jpg'
				],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500
			};
		},
		onLoad(e) {
			console.log(e.goods_id);
			this.goods_id = e.goods_id
		},
		async onShow() {
			this.total = this.list1.length
			let _this = this
			await this.$api.sendRequest({
				url: '/api/salasman/info',
				data: {},
				success: res => {
					console.log(res.data, '业务员信息');
					this.auth_level = res.data.auth_level
					this.$api.sendRequest({
						url: `/api/goodssku/detail`,
						data: {
							goods_id: this.goods_id,
							salasman_type: res.data.auth_level
						},
						success: res => {
							this.goods_sku_detail = res.data.goods_sku_detail
							this.list1 = res.data.goods_sku_detail.goods_image_arr
							// this.list1=res.data.goods_sku_detail.goods_image_arr//
							// let b = []
							// for (let i = 0; i < res.data.goods_sku_detail.goods_image_arr
							// 	.length; i++) {
							// 	b.push(imgDomain + '/' + res.data.goods_sku_detail
							// 		.goods_image_arr[i])
							// }
							// setTimeout(() => {
							// 	this.list1 = b
							// 	console.log(b, 'bbbb');
							// }, 200)
							console.log(res.data.goods_sku_detail.goods_image_arr, '商品详情');
							// this.template_name=res.data.goods_sku_detail.express_info.template_name
							let a = JSON.parse(res.data.goods_sku_detail.goods_spec_format)
							// this.regex=a[0].value[0].spec_value_name
							console.log(res.data.goods_sku_detail.goods_spec_format);
							// console.log(regex.unicode);
						}
					})
				}
			})

		},
		methods: {
			change(e) {
				console.log(e, 'eee');
				this.current = e.detail.current
			},
			click(e) {
				console.log(e, 'click');
			},
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			}
		}
	}
</script>

<style lang="scss">
	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}

	.swiper {
		height: 300rpx;
	}

	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}

	::v-deep {
		.uni-swiper-slides {
			height: 90vw !important;
		}

		.images {
			height: 90vw !important;
		}

		.images {
			width: 754rpx !important;
			height: 100% !important;

			img {
				width: 754rpx !important;
				height: 300rpx !important;
			}
		}

		.uni-margin-wrap {
			height: 90vw;

			uni-swiper {
				height: 90vw;
			}
		}

		.uni-swiper-wrapper {
			height: 90vw;
		}
	}

	.head {
		padding: 24rpx;
		box-sizing: border-box;

		.head-botyd {
			position: relative;
			height: 90vw;

			.Whichnumber {
				position: absolute;
				bottom: 30rpx;
				right: 24rpx;
				width: 70rpx;
				height: 42rpx;
				background: #000000;
				border-radius: 10rpx;
				opacity: 0.3;

				.Whichnumberone {
					font-size: 12rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FEFEFF;
					line-height: 18rpx;
					width: 70rpx;
					// height: 42rpx;
					text-align: center;
				}

			}
		}

		.product {
			width: 702rpx;
			// height: 366rpx;
			background: #FFFFFF;
			border-radius: 0px 0px 24px 24px;
			margin-top: 24rpx;

			box-sizing: border-box;

			.productcabj {
				padding: 16rpx 32rpx 0rpx 32rpx;
			}

			.time {
				font-size: 36rpx;
				font-family: DINAlternate-Bold, DINAlternate;
				font-weight: bold;
				color: #F33B50;
				line-height: 42rpx;

				span {
					width: 64rpx;
					height: 36rpx;
					background: rgba(33, 187, 243, 0.08);
					border-radius: 8rpx;
					margin-left: 16rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #21BBF3;
					line-height: 34rpx;
				}
			}

			.introduction {
				font-size: 32rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #222222;
				line-height: 48rpx;
				margin-top: 14rpx;
			}

			.mei {
				margin-top: 22rpx;

				.meimanyiyuan {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 34rpx;
					padding: 4rpx;
					box-sizing: border-box;
					background: #F7F7F7;
					border-radius: 8rpx;
				}

				.yidaiqiding {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 34rpx;
					background: #F7F7F7;
					border-radius: 8rpx;
					margin-left: 28rpx;
				}

				.yunfei {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 34rpx;
				}
			}

			.candi {
				width: 702rpx;
				// height: 82rpx;
				background: #fff;
				border-radius: 0rpx 0rpx 24rpx 24rpx;
				opacity: 0.4;
				// margin-top: 64rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 34rpx;
				padding: 0 24rpx;
				padding-bottom: 24rpx;
				box-sizing: border-box;
			}
		}

		.detailed {
			width: 702rpx;
			// height: 2070rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 42rpx 0rpx 0rpx 0rpx;
			box-sizing: border-box;
			margin-top: 24rpx;

			.caxinagh {
				padding: 0 32rpx;
				box-sizing: border-box;
			}

			.pattern {
				width: 6rpx;
				height: 28rpx;
				background: linear-gradient(180deg, #21BBF3 0%, rgba(33, 187, 243, 0.14) 100%);
				border-radius: 4rpx;

			}

			.productdetails {
				font-size: 32rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #222222;
				line-height: 48rpx;
				margin-left: 16rpx;

			}

			.ecutivestandards {
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
				line-height: 40rpx;
				margin-top: 38rpx;
				padding: 0 32rpx;
				box-sizing: border-box;
			}

			.Chinesepharmacies {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #585858;
				line-height: 40rpx;
				margin-top: 16rpx;
				padding: 0 32rpx;
				box-sizing: border-box;
			}

			.manufacturingenterprise {
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
				line-height: 40rpx;
				margin-top: 32rpx;
				padding: 0 32rpx;
				box-sizing: border-box;
			}

			.corporation {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #585858;
				line-height: 40rpx;
				margin-top: 16rpx;
				padding: 0 32rpx;
				box-sizing: border-box;
			}

			.images {
				width: 702rpx;
				height: 812rpx;
				margin-top: 24rpx;
				display: block;
			}

			.hezidiv {
				width: 638rpx;
				height: 358rpx;
				border-radius: 16rpx;
				border: 2rpx solid #E8E8E8;
				margin: 0 auto;
				margin-top: 24rpx;

				// padding: 32rpx 48rpx;
				.huise {
					width: 238rpx;
					height: 358rpx;
					background: #F6F6F6;
					border-radius: 16rpx 0px 0px 16rpx;
					padding: 32rpx 0 0 48rpx;
					box-sizing: border-box;

					div {
						margin-bottom: 24rpx;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #585858;
						line-height: 40rpx;
					}
				}

				.baise {
					width: 608rpx;
					height: 358rpx;
					border-radius: 16rpx;
					border: 2rpx solid #E8E8E8;
					padding: 32rpx 0 0 48rpx;
					box-sizing: border-box;

					div {
						margin-bottom: 24rpx;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #585858;
						line-height: 40rpx;
					}
				}
			}
		}
	}
</style>