<template>
	<!-- 选规格弹窗 -->
	<view>
		<up-popup :show="showSku" mode="bottom" :round="10" @close="close" :zIndex="202">
			<view class="sku" :class="isTabbar ? 'sku-bottom' : ''">
				<view class="sku-top" :class="fontSize == 'small' ? '' : 'large'">
					<image class="img" :src="viewPicUrl" @click="openPreView(viewPicUrl)" :style="{width: imgWidth + 'rpx', height: imgWidth + 'rpx'}" mode="aspectFill" />
					<view class="sku-top-info">
						<view class="tit" v-if="imgWidth == 200">{{skuInfo.title}}</view>
						
						<view class="pricebox">
							<!-- 会员下普通价格 -->
							<view class="text1" v-if="vipOn && chooseItem.vip_price > 0 && (is_vip || (!is_vip && vip_price_show))">
								<text class="icon1">￥</text>
								<text>{{chooseItem.price}}</text>
							</view>
							
							<view>
								<!-- 显示会员价 -->
								<view v-if="vipOn && chooseItem.vip_price > 0 && (is_vip || (!is_vip && vip_price_show))" class="vip">
									<!-- <text><text class="icon1">￥</text>{{chooseItem.vip_price}}</text>
									<text class="vip-tag" v-if="vipOn && chooseItem.vip_price > 0 && vip_price_show">会员价</text> -->
									<view class="vip-tag"><text class="txt">会员价&nbsp;￥</text>{{chooseItem.vip_price}}</view>
								</view>
								
								<!-- 显示普通价格 -->
								<view v-else class="vip">
									<text class="icon1">￥</text>
									<text>{{chooseItem.price}}</text>
								</view>
							</view>
							
						</view>
						
						<view class="text" v-if="show_stock === 1 || show1">剩余{{ chooseItem.stock > 0 ? chooseItem.stock : 0 }}件</view>
						<view class="sel" v-if="!skus_1 || skuName">已选：{{skuName}}</view>
						<view class="sel" v-if="skus_1 && !skuName">已选：{{name}}</view>
						
					</view>
				</view>
				
				<scroll-view class="good_box" :class="fontSize == 'small' ? '' : 'large'" scroll-y="true" enhanced="true" @scroll="skuScroll">
					<div class="sku_box" style="margin-bottom: 30rpx;">
						<view class="sku-list">
							<view class="sku-list-item" v-for="(item, index) in specsList" :key="item.spec_id">
								<view class="sku-list-item-name">
									{{item.spec_name}}
								</view>
								<view class="sku-list-item-tag">
									<view class="tag" v-for="(i, i_index) in item.value" :key="i.id"
										@click="!i.show?chooseSku(i, index, i_index) :''"
										:class="choose['v'+ (index+1) +'_id'] === i.id || skus_1? 'choose' : i.show?'box':'' ">
										<image :src="i.img" v-if="i.img" class="tag_img"></image>
										<text>{{i.value}}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="sku-num">
							<view style="font-size: 28rpx;display: flex;align-items: center;">
								<text>购买数量</text>
								<text v-if="show_stock === 1 || show1">（最多{{ chooseItem.stock > 0 ? chooseItem.stock : 0 }}件）</text>
								<view v-if="skuInfo.limit_type==2" class="box_red">限购{{skuInfo.limit}}件</view>
								<view v-if="skuInfo.limit_type==1" class="box_red">{{skuInfo.start_sale_num}}件起购</view>
							</view>
							<up-number-box
								:disabled="show"
								v-model="chooseItem.num"
								disabledInput
								:min="skuInfo.limit_type == 1 ? parseInt(skuInfo.start_sale_num) : skuInfo.limit_type === 0 ? 1 : 1 "
								:max="skuInfo.limit_type == 2 ? parseInt(skuInfo.limit) : skuInfo.limit_type === 0 ? (chooseItem.stock > 0 ? chooseItem.stock : 0) : 0"
								:longPress="false"
								@change="changeNum"
								@overlimit="plusBtn(skuInfo.limit_type == 1 ? 0 : skuInfo.limit_type == 2 ? 1 : 2 ,(chooseItem.num || num1), skuInfo.limit)" />
						</view>
						<view class="sku-buy" v-if="sales > 0">
							<view class="img" v-for="img in skuInfo.avatars" :key="img">
								<image :src="img" class="sku-buy-img"></image>
							</view>
							<view class="text">已有<text class="num">{{sales}}</text>个社群好友购买</view>
						</view>
					</div>
					
					<view class="edition" v-if="textModule.length != 0 && showDetail">
						<view v-for="(item, index) in textModule" :key="index">
							<!-- 大图 -->
							<view v-if="item.type == 1" class="edition_box" @click="preViewImg(item.imgs[0])">
								<view v-for="(imgs, i) in item.imgs" :key="i">
									<image :src="imgs + '?x-oss-process=image/format,webp'" :lazy-load="true" :webp="true" mode="widthFix" style="height:100%;width:100%"></image>
								</view>
							</view>
							
							<!-- 小图 -->
							<view class="edition_box" v-if="item.type == 2">
								<view class="small_img">
									<view v-for="(list, index1) in item.img" :key="index1" class="imgs" @click="getTextimg(item.img, list)">
										<image :src="list + '?x-oss-process=image/format,webp'" :webp="true" class="image" :lazy-load="true"></image>
									</view>
								</view>
							</view>
							
							<!-- 视频 -->
							<view class="edition_box" v-if="item.type == 3">
								<video :src="item.video[0]" height="100%" width="250" class="video_box" style="display: block;margin: 0 auto;"></video>
							</view>
							
							<!-- 文字 -->
							<view class="edition_box text1_box" v-if="item.type == 4">
								<text selectable="true" user-select="true" class="text">{{item.text}}</text>
							</view>
						</view>
					</view>
					
					<view v-else-if="viewPicList.length != 0  && showDetail" class="imgbox">
						<image v-for="img in viewPicList" :key="img" :src="img" class="img" mode="widthFix" :lazy-load="true"></image>
					</view>
					<view v-if="viewPicList.length === 0 && showDetail && mainImg.length !== 0" class="imgbox">
						<image v-for="img in mainImg" :key="img" :src="img" class="img" mode="widthFix" :lazy-load="true"></image>
					</view>
					<view class="block" v-if="isTabbar"></view>
				</scroll-view>
				
				<view class="sku-btn2" v-if="soldStatus == 2" @click="arrivalNotice()">
					<view class="btn" v-if="!remind_stock">到货提醒</view>
					<view class="btn dis" v-else>取消到货提醒</view>
				</view>
				<template v-else>
					<view class="sku-btn2" v-if="type == 1" @click="(chooseItem.stock > 0 && canBuy) ? addBtn(3) : ''">
						<view class="btn" :class="(chooseItem.stock <= 0 || !canBuy) ? 'dis' : ''">
							加入购物车
						</view>
					</view>
					<view class="sku-btn2" v-else-if="type == 2" @click="(chooseItem.stock > 0 && canBuy) ? addBtn(4) : ''">
						<view class="btn" :class="(chooseItem.stock <= 0 || !canBuy) ? 'dis' : ''">
							加入购物车
						</view>
					</view>
					<view class="sku-btn" v-else>
						<view class="btn1" :class="canBuy ? '' : 'dis'" @click="canBuy ? addBtn(1) : ''">加入购物车</view>
						<view class="btn2" :class="canBuy ? '' : 'dis'" @click="canBuy ? addBtn(2) : ''">立即购买</view>
					</view>
				</template>
				
			</view>
		</up-popup>
		
		<preview-img :show="showPreview" :list="specsList" :current="imgIndex" @close="changeSku"></preview-img>
		
	</view>
</template>

<script>
	import { ref, reactive, toRefs, watch } from 'vue'
	import { showToast, goodsItem, getUserPhone, toMiniProgram } from '../common.js'
	import { get, post } from '@/api/request.js'
	import { Style } from '@/utils/list.js'
	import previewImg from '@/components/sku/previewImg.vue'
	
	export default {
		components: { previewImg },
		options: {
			styleIsolation: 'shared'
		},
		props: {
			showSku: {
				type: Boolean,
				default: false
			},
			fenxiang: {
				type: Boolean,
				default: false
			},
			skus_1: {
				type: Boolean,
				default: false
			},
			isTabbar: {
				type: Boolean,
				default: false
			},
			type: {
				type: Number
			},
			show_stock: {
				type: Number,
				default: 0
			},
			skuInfo: {
				type: Object
			},
			sku: {
				type: Object
			},
			show1: {
				type: Boolean,
				default: false
			},
			showDetail: {
				type: Boolean,
				default: true
			},
			groupId: {
				type: Number,
				default: 0
			},
			source: {
				type: String
			},
			canBuy: {
				type: Boolean,
				default: true
			},
			sourceId: {
				type: Number,
				default: 0
			},
			sourceType: {
				type: String,
				default: 'normal'
			},
			remindStock: {
				type: Boolean,
				default: false
			},
			soldStatus: {
				type: Number,
				default: 0
			},
			remindTmplId: {
				type: String,
				default: ''
			},
			shortStatus: {
				type: Number,
				default: 1
			},
			sales: {
				type: Number,
				default: 0
			},
		},
		setup(props, context) {
			const data = reactive({
				sku_skuInfo: '',
				name: '',
				specsList: [], // 重组规格数组
				chooseItem: {}, // 选中规格
				choose: {}, // 选中规格值id
				skuName: '', // 规格名
				vipOn: uni.getStorageSync('vip_on') === 1,
				vip_price_show: uni.getStorageSync('vip_price_show'),
				img: '', //图片选择显示
				viewPicUrl: '',
				pic_url_800: '',
				show: true,
				chooseIndex: [],
				firstWatch: true,
				viewPicList: [],
				imgWidth: 200,
				textModule: [],
				textType: 1,
				mainImg: [],
				is_vip: uni.getStorageSync('is_vip'),
				groupId: '',
				limit_type: 0,
				limit: 0,
				totalNum: 0,
				is_authorized: uni.getStorageSync('is_authorized'),
				firstLoad: true,
				Color: uni.getStorageSync('theme_color'),
				priceColor: Style[uni.getStorageSync('theme_index') * 1].priceColor,
				cartColor: Style[uni.getStorageSync('theme_index') * 1].cartColor,
				bgColor: Style[uni.getStorageSync('theme_index') * 1].bgColor,
				sourceId: 0,
				sourceType: '',
				isSale: uni.getStorageSync('role') == 1,
				canClick: true,
				remind_stock: false,
				showPreview: false,
				imgIndex: 0,
				fontSize: 'small',
				is_cart: false
			})

			let list = reactive({
				num: 0,
				shop_goods_id: 0,
				shop_goods_sku_id: 0,
				shop_group_goods_id: 0,
				num1: 1
			})
			let item = reactive({
				shop_goods_id: 0,
				shop_goods_sku_id: 0,
				num: 0
			})
			// 选规格
			let name = []
			var cart = false

			function chooseSku(e, index, i_index) {
				data.firstWatch = false
				data.show = false
				if (e.img) {
					data.img = e.img_800 || e.img
					data.chooseItem.pic_url = e.img
					data.chooseItem.pic_url_800 = e.img_800
					data.viewPicUrl = e.img
					data.pic_url_800 = e.img_800
				}
				data.choose['v' + (index + 1) + '_id'] = data.specsList[index].value[i_index].id
				name[index] = data.specsList[index].value[i_index].value
				data.chooseIndex.push(index)
				data.chooseIndex = Array.from(new Set(data.chooseIndex))
				data.skuName = name.join('-')
				if(index == 0) {
					data.imgIndex = i_index
				}
			}

			watch(props, (newProps) => {
				data.groupId = newProps.groupId
				data.sourceId = newProps.sourceId
				data.sourceType = newProps.sourceType
				data.remind_stock = newProps.remindStock
				data.fontSize = uni.getStorageSync('font') || 'small'
				if(!newProps.showSku) {
					data.firstLoad = true
				}
				if (data.firstWatch) {
					data.viewPicList = []
					data.viewPicUrl = newProps.skuInfo.face_img
					data.mainImg = newProps.skuInfo.gallery || []
					data.limit_type = newProps.skuInfo.limit_type
					data.limit = newProps.skuInfo.limit
					
					if(newProps.skuInfo && newProps.skuInfo.specs) {
						newProps.skuInfo.specs[0].value.forEach((it) => {
							if(it.img_800){
								data.viewPicList.push(it.img_800)
							}
						})
					}
					data.textModule = newProps.skuInfo.text_modules || []
					data.textType = newProps.skuInfo.text_type
					if (newProps.skuInfo) {
						data.specsList = newProps.skuInfo.specs
						if (newProps.sku) {
							data.is_cart = true
							data.chooseItem.id = ''
							let item = newProps.sku
							data.chooseItem.num = item.num
							data.viewPicUrl = item.pic_url_800 || item.pic_url || newProps.skuInfo.face_img
							name = []
							for (let j = 1; j <= 4; j++) {
								if (item['v' + j + '_id']) {
									data.choose['v' + j + '_id'] = item['v' + j + '_id']
									name.push(item['v' + j])
								}
							}
							let idx = data.viewPicList.indexOf(data.viewPicUrl)
							data.imgIndex = idx > 0 ? idx : 0
							data.skuName = name.join('-')
							// data.chooseItem = newProps.sku
						} else if (!data.chooseItem.id && newProps.showSku) {
							data.chooseItem = JSON.parse(JSON.stringify(newProps.skuInfo.skus[0]))
							data.chooseItem.stock = newProps.skuInfo.stock
						}
						if (newProps.skuInfo.skus) {
							if (newProps.skuInfo.skus.length === 1) {
								data.show = false
							}
							if(props.soldStatus == 2 || props.shortStatus == 0) {
								newProps.skuInfo.skus.forEach((ress) => {
									ress.stock = 0
								})
							}
							if (newProps.skuInfo.specs.length === 1) {
								var sku = []
								newProps.skuInfo.skus.forEach((ress) => {
									if (ress.stock <= 0 || ress.price == 0) {
										sku.push(ress.v1_id)
									}
								})
								data.specsList.forEach((res, index) => {
									res.value.forEach((res1) => {
										if (sku.includes(res1.id)) {
											res1.show = true
										} else {
											res1.show = false
										}
									})
								})
							}
							data.sku_skuInfo = newProps.skuInfo.skus
							list.num1 =
								newProps.skuInfo.limit_type == 1 ?
								parseInt(newProps.skuInfo.start_sale_num) :
								newProps.skuInfo.limit_type == 0 ?
								1 :
								1

							data.name = newProps.skuInfo.skus[0].v1
							list.shop_group_goods_id = newProps.skuInfo.shop_group_goods_id
							list.shop_goods_id = newProps.skuInfo.skus[0].shop_goods_id
							list.shop_goods_sku_id = newProps.skuInfo.skus[0].id

							if (data.specsList.length == Object.keys(data.choose).length) {
								for (const key in data.choose) {
									let i = parseInt(key.substr(1, 1))
									data.specsList[i - 1].value.forEach((req) => {
										data.sku_skuInfo.forEach((ress, m) => {
											let flag = [req.id == ress['v' + i + '_id']]
											for (const k in data.choose) {
												let j = parseInt(k.substr(1, 1))
												if (i != j) {
													flag.push(ress[k] == data.choose[k])
												}
											}
											if (flag.findIndex(target => target === false) == -1) {
												if ((ress.stock <= 0 || ress.price == 0)) {
													req.show = true
												} else {
													req.show = false
												}
											}
										})
									})
								}
							}
						}
						if(props.soldStatus == 2 || props.shortStatus == 0) {
							data.chooseItem.stock = 0
						}
					}
					if(data.groupId && data.firstLoad && newProps.showSku) {
						data.firstLoad = false
						getGroupCartInfo()
					}
				}
			})
			watch(
				() => data.choose,
				(newChoose) => {
					if (data.specsList.length - Object.keys(data.choose).length == 1) {

						// 如果只有一个规格类未选中，则去判断未选中的这一项是否可选
						data.specsList.forEach((req, i) => {
							if (data.chooseIndex.indexOf(i) == -1) {
								req.value.forEach((rej, j) => {
									data.sku_skuInfo.forEach((ress, m) => {
										let flag = [rej.id === ress['v' + (i + 1) + '_id']]
										for (const key in data.choose) {
											flag.push(ress[key] == data.choose[key])
										}
										if (flag.findIndex(target => target === false) == -1) {
											if (ress.stock <= 0 || ress.price == 0) {
												rej.show = true
											} else {
												rej.show = false
											}
										}
									})
								})
							}
						})
					} else if (data.specsList.length == Object.keys(data.choose).length) {
						for (const key in data.choose) {
							let i = parseInt(key.substr(1, 1))
							data.specsList[i - 1].value.forEach((req) => {
								data.sku_skuInfo.forEach((ress, m) => {
									let flag = [req.id == ress['v' + i + '_id']]
									for (const k in data.choose) {
										let j = parseInt(k.substr(1, 1))
										if (i != j) {
											flag.push(ress[k] == data.choose[k])
										}
									}
									if (flag.findIndex(target => target === false) == -1) {
										if ((ress.stock <= 0 || ress.price == 0)) {
											req.show = true
										} else {
											req.show = false
										}
									}
								})
							})
						}
					}
					if (newChoose) {
						data.show = false
					}
					if (JSON.stringify(newChoose) == '{}') {
						data.show = true
					}
					// 判断选择规格值是否完整
					for (let i = data.specsList.length; i >= 1; i--) {
						if (!newChoose['v' + i + '_id']) {
							return
						}
					}
					// 对比选中项
					let list = props.skuInfo.skus
					list.forEach((sku, s_index) => {
						let num = data.chooseItem.num
						if (
							sku.v1_id === newChoose.v1_id &&
							sku.v2_id === newChoose.v2_id &&
							sku.v3_id === newChoose.v3_id &&
							sku.v4_id === newChoose.v4_id
						) {
							data.chooseItem = {
								...sku
							}
							if (num > 0) {
								data.chooseItem.num = num < sku.stock ? num : (sku.stock > 0 ? sku.stock : 0)
							} else if (sku.stock > 0) {
								data.chooseItem.num =
									props.skuInfo.limit_type == 0 ?
									1 :
									props.skuInfo.limit_type == 1 ?
									parseInt(props.skuInfo.start_sale_num) :
									1
							} else {
								data.chooseItem.num = 0
							}
							if (sku.pic_url === 'undefined') {
								data.chooseItem.pic_url = props.skuInfo.face_img
							}
						}
					})

					item.shop_goods_id = data.chooseItem.shop_goods_id
					item.shop_goods_sku_id = data.chooseItem.id
					
				}, {
					deep: true
				}
			)

			const hanleClick = () => {
				context.emit('buttomShow', true)
			}
			// 商品数量
			function changeNum(e) {
				console.log(data.totalNum, e)
				if(data.limit_type === 2 && e.value > data.limit) {
					showToast('本团商品限购' + data.limit + '件')
					return
				}
				data.chooseItem.num = e.value
				item.num = e.value
			}
			// 达到最大库存
			function plusBtn(number, index, e) {
				// number 0 起购, 1 限购, 2 不限购
				// index 数量
				// e limit
				
				if (data.chooseItem.num === data.chooseItem.stock) {
					showToast('库存不足')
				}
				if (number == 0 && !data.show) {
					showToast('该商品不能低于起购件数')
				} else if (number == 1 && !data.show) {
					if (index == e) {
						showToast('已达到商品限购件数')
					} else if (index > e) {
						showToast('已达到商品限购件数')
					} else if (index != e) {
						showToast('该商品不能低于1件')
					}
				} else if (number == 2 && !data.show) {
					showToast('该商品不能低于1件')
				}
			}

			function addBtn(type) {
				let arr1 = name.filter((d) => d)
				if (!props.skus_1) {
					if (!name[0]) {
						showToast('请选择完整规格')
						return
					}
					if (arr1.length < data.specsList.length) {
						showToast('请选择完整规格')
						return
					} else if (!data.chooseItem.num || data.chooseItem.num === 0) {
						showToast('请添加商品数量')
						return
					}
				}
				if (type === 1) {
					addToCart()
				} else if (type === 2) {
					toPay()
				} else if (type === 3) {
					changeChoose()
				} else {
					// toPay()
					addToCart()
				}
			}
			// 加入购物车
			function addToCart() {
				if (props.skus_1) {
					post('/api/v1/carts', {
						shop_goods_id: list.shop_goods_id,
						shop_goods_sku_id: list.shop_goods_sku_id,
						num: data.chooseItem.num || list.num1,
						shop_group_goods_id: list.shop_group_goods_id,
						source_id: data.sourceId,
						source_type: data.sourceType
					}).then((res) => {
						showToast('已加入购物车')
						data.show = true
						getNum()
						context.emit('getnum')
						close()
					}).catch((error) => {
						showToast(error)
					})
				} else {
					post('/api/v1/carts', {
						shop_goods_id: data.chooseItem.shop_goods_id,
						shop_goods_sku_id: data.chooseItem.id,
						num: data.chooseItem.num,
						shop_group_goods_id: props.skuInfo.shop_group_goods_id,
						source_id: data.sourceId,
						source_type: data.sourceType
					}).then((res) => {
						showToast('已加入购物车')
						data.show = true
						getNum()
						context.emit('getnum')
						close()
					}).catch((error) => {
						showToast(error)
					})
				}
			}
			// 立即购买
			function toPay() {
				const goods = [{
					shop_goods_id: data.chooseItem.shop_goods_id,
					shop_goods_sku_id: data.chooseItem.id,
					num: data.chooseItem.num || list.num1,
					shop_group_goods_id: props.skuInfo.shop_group_goods_id,
					source_id: data.sourceId,
					source_type: data.sourceType
				}]
				uni.setStorageSync('shopGoods', goods)
				uni.navigateTo({
					url: '/pages/pay/index?type=0&source=' + props.source
				})
			}

			// 完成按钮
			function changeChoose() {
				let item1 = {
					shop_goods_id: data.chooseItem.shop_goods_id,
					shop_goods_sku_id: data.chooseItem.id,
					num: data.chooseItem.num,
					shop_group_goods_id: props.skuInfo.shop_group_goods_id,
					source_id: data.sourceId,
					source_type: data.sourceType
				}
				if (props.sku && props.sku.cart_id) {
					item1.id = props.sku.cart_id
					context.emit('changeChoose', item1)
					close()
				} else {
					addToCart()
				}
			}

			function close(e) {
				data.img = ''
				data.choose = {} // 选中规格值id
				data.chooseItem = {}
				data.skuName = ''
				data.name = ''
				name = []
				data.viewPicUrl = ''
				data.pic_url_800 = ''
				data.show = true
				list.num1 = 1
				data.chooseItem.num = 1
				data.chooseIndex = []
				data.imgIndex = 0
				data.firstWatch = true
				context.emit('close', data.skuName)
			}
			const {
				getNum,
				showBtn
			} = goodsItem()

			const preventD = () => {
				return
			}

			// 预览图片
			const preViewImg = (url) => {
				let img_preview_suffix = uni.getStorageSync('img_preview_suffix') || ''
				let imurl = url + img_preview_suffix
				if(url.indexOf('.gif') >= 0 || url.indexOf('.GIF') >= 0) {
					imurl = url
				}
				uni.previewImage({
					urls: [imurl],
					current: 0
				})
			}
			
			const openPreView = (url) => {
				if(data.viewPicList.length == data.specsList[0].value.length) {
					if(data.is_cart) {
						uni.previewImage({
							urls: data.viewPicList,
							current: data.imgIndex
						})
					} else {
						data.showPreview = true
					}
				} else {
					preViewImg(url)
				}
			}
			
			function skuScroll(e) {
				if(e.detail.scrollTop > 200){
					data.imgWidth = 120
				} else {
					data.imgWidth = 200
				}
			}
			
			// 获取limit信息
			function getGroupCartInfo() {
				get('/api/v1/carts', { shop_group_goods_id: data.groupId }).then((res2) => {
					data.totalNum = res2.num
				})
			}
			
			// 授权手机号码
			async function getPhoneNumber(e) {
				if(e.detail.errMsg == 'getPhoneNumber:ok') {
					await getUserPhone(e.detail).then((res) => {
						data.is_authorized = 1
					})
				}	
			}
			
			async function arrivalNotice() {
				// 取消提醒
				if(data.remind_stock) {
					post(`/api/v1/goods/remind/cancel/${data.groupId}`, {type: 1}).then((res) => {
						data.remind_stock = false
						uni.showToast({
							title: '已取消到货提醒',
							icon: 'none'
						})
						context.emit('remind', false)
					})
				} else {
					toMiniProgram('pages/groups/index?id=' + data.groupId)
				}
			}
			
			function changeSku(index) {
				data.imgIndex = index
				if(!data.specsList[0].value[data.imgIndex].show) {
					chooseSku(data.specsList[0].value[data.imgIndex], 0, data.imgIndex)
				}
				data.showPreview = false
			}

			return {
				toMiniProgram,
				...toRefs(data),
				...toRefs(list),
				item,
				hanleClick,
				chooseSku,
				plusBtn,
				changeNum,
				addBtn,
				addToCart,
				toPay,
				changeChoose,
				close,
				getNum,
				showBtn,
				preventD,
				preViewImg,
				openPreView,
				skuScroll,
				getGroupCartInfo,
				getPhoneNumber,
				arrivalNotice,
				changeSku
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		opacity: 0.35;
	}
	.box_red {
		padding: 5rpx 10rpx;
		box-sizing: border-box;
		font-size: 25rpx;
		display: inline-block;
		color: #656565;
	}
	.dis {
		opacity: 0.7;
		color: #eee !important;
	}

	.sku-bottom {
		margin-bottom: 110rpx;
	}

	.sku {
		height: 70vh;
		position: relative;
		overflow: hidden;
		&-top {
			display: flex;
			padding: 30rpx;
			border-bottom: 1rpx solid #eee;
			.img {
				width: 150rpx;
				height: 150rpx;
				background: #bbbbbb;
				border-radius: 8rpx;
				margin-right: 30rpx;
				transition: all 0.3s;
			}
			.icon {
				width: 30rpx;
				height: 30rpx;
			}
			&-info {
				display: flex;
				width: calc(100% - 250rpx);
				flex-direction: column;
				.tit{
					width: calc(100% - 50rpx);
					margin-bottom: 10rpx;
				}
				.text {
					font-size: 24rpx;
					color: #999999;
					margin-top: 20rpx;
					display: block;
				}
				.price {
					display: flex;
					align-items: center;
					font-weight: bold;
					font-size: 36rpx;
					.tag {
						margin-left: 10rpx;
						display: flex;
						align-items: center;
					}
				}
				.sel{
					margin-top: 20rpx;
					font-size: 28rpx;
				}
				&.smallfont{
					.tit{
						display: none;
					}
					.price {
						font-size: 28rpx;
					}
					.text{
						display: none;
					}
					.sel{
						font-size: 24rpx;
						margin-top: 10rpx;
					}
				}
			}
		}

		&-list {
			padding: 10rpx 30rpx 30rpx;
			border-bottom: 1rpx solid #eee;
			position: relative;
			&-item {
				&-name {
					font-size: 26rpx;
					margin-top: 20rpx;
				}
				&-tag {
					display: flex;
					flex-wrap: wrap;
					font-size: 24rpx;
				}
				.tag {
					display: flex;
					align-items: center;
					justify-content: center;
					color: #000;
					background-color: #f4f4f4;
					margin-right: 22rpx;
					margin-top: 20rpx;
					padding: 10rpx 18rpx;
					box-sizing: border-box;
					border-radius: 6rpx;
					.tag_img {
						width: 35rpx;
						height: 35rpx;
						margin-right: 15rpx;
					}
				}
				.choose {
					background-color: v-bind('bgColor');
					color: v-bind('Color');
					border-radius: 8rpx;
				}
			}
		}

		&-num {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx;
		}

		.sku-buy {
			display: flex;
			align-items: center;
			padding: 30rpx;
			border-top: 1rpx solid #eee;
			border-bottom: 1rpx solid #eee;
			.img {
				width: 50rpx;
				height: 50rpx;
				margin-left: -10rpx;
				border: 4rpx solid #fff;
				box-sizing: border-box;
				.sku-buy-img {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}

			.text {
				margin-left: 20rpx;
				font-size: 28rpx;
				.num {
					color: v-bind('Color');
				}
			}
		}

		&-btn {
			display: flex;
			.btn1 {
				border-radius: 44rpx 0rpx 0rpx 0rpx;
				background: v-bind('cartColor');
			}
			.btn2 {
				border-radius: 0rpx 44rpx 0rpx 0rpx;
				background: v-bind('Color');
			}
		}

		.btn1,
		.btn2,
		.btn {
			width: 50%;
			height: 104rpx;
			color: #fff;
			font-size: 30rpx;
			text-align: center;
			line-height: 104rpx;
		}

		.sku-btn2, .sku-btn {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			z-index: 2;
			background-color: #fff;
			.btn {
				background: v-bind('Color');
				width: 100%;
			}
		}
	}
	.edition{
		padding: 50rpx 0;
		border-top: 1rpx solid #eee;
	}
	.edition_box {
		margin: 8rpx 0;
		position: relative;
		padding: 0 20rpx;
	
		.img {
			width: 100%;
		}
	
		.small_img {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			.imgs {
				width: 32.3%;
				height: 200rpx;
				margin: 20rpx 0;
	
				.image {
					width: 100%;
					height: 100%;
				}
			}
	
			.imgs:nth-child(2) {
				margin: 20rpx 10rpx;
			}
	
			.imgs:nth-child(5) {
				margin: 20rpx 10rpx;
			}
	
			.imgs:nth-child(8) {
				margin: 20rpx 10rpx;
			}
		}
	
		.text {
			line-height: 55rpx;
			font-size: 30rpx;
			color: #222;
		}
	}
	.imgbox{
		.img{
			width: 100%;
			border-radius: 0;
		}
	}
	.good_box{
		height: calc(70vh - 360rpx);
	}
	.block{
		width: 100%;
		height: 100rpx;
	}
	.vip-tag {
		font-size: 32rpx;
		color: #fbe6c3;
		background: #353648;
		border-radius: 20rpx 0 0 0;
		padding: 8rpx 10rpx;
		line-height: 1;
		.txt{
			font-size: 22rpx;
		}
	}
	.pricebox{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		.text1 {
			font-size: 32rpx;
			color: v-bind('priceColor');
			margin-right: 10rpx;
			font-weight: 600;
		}
		.icon1 {
			font-size: 24rpx;
			font-weight: normal;
		}
		.vip {
			display: flex;
			align-items: center;
			font-size: 34rpx;
			color: v-bind('priceColor');
		}
	}
	.sku-top.large{
		.pricebox{
			.text1{font-size: 40rpx;}
			.icon1{font-size: 30rpx;}
			.vip{font-size: 46rpx;}
		}
		.sku-top-info{
			.tit{
				font-size: 40rpx;
			}
		}
		.text{font-size: 32rpx;}
		.sel{font-size: 36rpx;}
	}
	.good_box.large{
		.sku-list-item-name{font-size: 36rpx;}
		.sku-list-item-tag{font-size: 32rpx;}
		.edition_box{
			.text{font-size: 36rpx;}
		}
	}
</style>
