<template>
	<view class="warpper">
		<view class="swiper-dot">
			<uni-swiper-dot :info="info.imgList" :current="current" field="content" mode="indexes" style="height: 100%;">
				<swiper class="swiper-box" @change="swiperChange" style="height: 100%;">
					<swiper-item v-for="(item, index) in info.imgList" :key="index">
						<view class="" @tap="previewImg(item, info.imgList)">
							<image class="image" :src="item || 'https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif'" mode=""></image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<uGap></uGap>
		<view class="info-box">
			<view class="info">
				<view class="price-row">
					<text class="price">¥{{ info.skuList[0].listPrice }}</text>
					<text class="unit">/{{ info.skuList[0].stockUnit |  stockUnit}}</text>
				</view>
				<view class="row">
					<view class="name">{{ info.name }}</view>
					<view class="value">库存：{{ info.skuList[0].stock || XX }}{{ info.skuList[0].stockUnit |  stockUnit}}</view>
				</view>
			</view>
			<view class="list-box">
				<view class="label">克重：</view>
				<view class="tag-box" v-for="(titem, tindex) in info.skuList" :key="tindex">
					<text>{{ titem.weight }}g</text>
				</view>
			</view>
			<view class="list-box">
				<view class="label" style="font-size: 24rpx;">规格：</view>
				<view class="tag-box"><text>787*1092</text></view>
				<view class="tag-box"><text>899*1194</text></view>
			</view>
		</view>
		<uGap></uGap>
		<view class="other">
			<view class="title">商品卖点</view>
			<view class="desc">{{ info.sellingProposition }}</view>
		</view>
		<view class="other">
			<view class="title">商品描述</view>
			<view class="desc">{{ info.description }}</view>
		</view>
		<view class="other">
			<view class="title">送货说明</view>
			<view class="desc">{{ info.shippingNote }}</view>
		</view>
		<view class="other" style="border: none;">
			<view class="title">其他说明</view>
			<view class="desc">{{ info.otherNote }}</view>
		</view>
		<qn-footer fixed height="100rpx">
			<view class="footer-row">
				<view class="left">
					<view class="">
						<image class="icon" src="/static/imgs/paperDetails/shop-icon.png"></image>
						<view class="label" @tap="storeTap">店铺</view>
					</view>
					<view class="">
						<image class="icon" src="/static/imgs/paperDetails/shopping-trolley.png"></image>
						<view class="label" @tap="shoppingCartTap">购物车</view>
					</view>
					<view class="" @tap="addShoppingTap(1)">
						<image class="icon" src="/static/imgs/paperDetails/add-shopping-trolley.png"></image>
						<view class="label">加购物车</view>
					</view>
				</view>
				<view class="right">
					<view class="inquiry-btn" @tap="inquiryTap">立即询单</view>
					<view class="book-btn" @tap="addShoppingTap(2)">立即订购</view>
				</view>
			</view>
		</qn-footer>
		<uni-popup ref="popup" type="bottom">
			<view class="popup_modal">
				<!-- <slot name="title"><view class="popup_modal-title">可选择已录入公司</view></slot> -->
				<view class="card-box">
					<view class="box">
						<!-- <image class="image" :src="info.imgList[0] || 'https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif'" mode=""></image> -->
						<view class="right-box">
							<view class="title-row">
								<view class="name">{{ info.name }}</view>
								<view class="close-icon" @tap="closeTap"><uni-icons size="20" type="close" color="#888888"></uni-icons></view>
							</view>
							<view class="price">¥{{ buyPaperDto.unitPrice }}</view>
						</view>
					</view>
				</view>
				<view class="choose-box">
					<view class="label">请选择克重</view>
					<view class="tag-row">
						<view :class="['tag-box', kgActive === kIndex ? 'kg-select' : '']" v-for="(kItem, kIndex) in info.skuList" :key="kIndex" @tap="weightTap(kItem, kIndex)">
							{{ kItem.weight }}g
						</view>
					</view>
				</view>
				<view class="choose-box">
					<view class="label">请选择规格</view>
					<view class="tag-row">
						<view
							:class="['tag-box', specificationObj.active === sIndex ? 'kg-select' : '']"
							v-for="(sItem, sIndex) in specificationList"
							:key="sIndex"
							@tap="specificationTap(sItem, sIndex)"
						>
							{{ sItem.name }}
						</view>
					</view>
					<view class="input-row">
						<view class=""><uni-easyinput :inputBorder="false" class="easyinput" type="number" v-model="buyPaperDto.width" placeholder="请输入"></uni-easyinput></view>
						<view class="symbol">x</view>
						<view class=""><uni-easyinput :inputBorder="false" class="easyinput" type="number" v-model="buyPaperDto.length" placeholder="请输入"></uni-easyinput></view>
					</view>
				</view>
				<view class="quantity-row">
					<view class="label">购买数量(张)</view>
					<view class=""><qnInputNumber @change="change" /></view>
				</view>
				<view class="ygzl-text">预估重量：{{ buyTon }}吨</view>
				<view class="popup-footer-row"><view class="btn" @tap="confirm">确认</view></view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import uGap from '@/components/u-gap/u-gap.vue'
import qnFooter from '@/components/qn-footer/qn-footer.vue'
import qnInputNumber from '@/components/qn-input-number/qn-input-number.vue'
import { go2 } from '@/utils/hook.js'
import { getPaperDetail, createGoodsReserve, createShoppingCar } from '@/apis/paperDetailsApi.js'
export default {
	components: { uGap, qnFooter, qnInputNumber },
	data() {
		return {
			current: 0,
			weightList: ['240', '250', '280'],
			specificationList: [
				{
					name: '正度',
					width: '787',
					length: '1092',
					disabled: true
				},
				{
					name: '特规分切',
					width: '889',
					length: '1194',
					disabled: true
				},
				{
					name: '特规分切',
					width: '',
					length: '',
					disabled: false
				}
			],
			kgActive: 0,
			specificationObj: {
				active: 0,
				width: '787',
				length: '1092',
				disabled: true
			},
			value: null,
			params: {
				productId: ''
			},
			buyPaperDto: {
				buyTon: '',
				gramWeight: '',
				length: '',
				mallSupplierId: '',
				pieceQuantity: '',
				productId: '',
				productSkuId: '',
				unitPrice: '',
				width: '',
				img: '',
				listPrice: '',
				name: ''
			},
			shoppingCarType: 1, // 1：加购物车 2：订购
			info: {},
		}
	},
	filters: {
		stockUnit(value) {
			let name = value == 1 ? '张' : '吨'
			return name
		}
	},
	onLoad(option) {
		this.params.productId = option.id
		this.queryData()
	},
	computed: {
		buyTon() {
			let num = 0
			num = Number(this.buyPaperDto.gramWeight) * Number(this.buyPaperDto.pieceQuantity)

			this.buyPaperDto.buyTon = num / (1000 * 1000)
			return this.buyPaperDto.buyTon.toFixed(4)
		}
	},
	methods: {
		// 查询店铺纸品详情
		queryData() {
			getPaperDetail(this.params).then(res => {
				console.log('店铺纸品详情', res)
				if (res) {
					this.info = res
				}
			})
		},
		// 点击店铺
		storeTap() {
			go2('store')
		},
		// 点击购物车
		shoppingCartTap() {
			go2('cart')
		},
		// 立即订购
		addShoppingTap(type) {
			this.shoppingCarType = type
			this.buyPaperDto = {
				buyTon: 0,
				gramWeight: this.info.skuList[0].weight,
				length: this.specificationObj.length,
				mallSupplierId: this.info.supplierId,
				pieceQuantity: 0,
				productId: this.info.id,
				productSkuId: this.info.skuList[0].id,
				unitPrice: this.info.skuList[0].listPrice,
				width: this.specificationObj.width
			}
			this.$refs.popup.open('bottom')
		},

		// 路由到实单询比价
		inquiryTap() {
			go2('for-comparison', { id: this.info.supplierId })
		},
		closeTap() {
			this.$refs.popup.close()
		},
		// 重量切换
		weightTap(item, index) {
			console.log('item', item)
			this.kgActive = index
			this.buyPaperDto.gramWeight = item.weight
			this.buyPaperDto.unitPrice = item.listPrice
			this.buyPaperDto.productSkuId = item.id
		},
		// 规格切换
		specificationTap(item, index) {
			this.specificationObj.active = index
			this.specificationObj.width = item.width
			this.specificationObj.length = item.length
			this.specificationObj.disabled = item.disabled
			this.buyPaperDto.width = item.width
			this.buyPaperDto.length = item.length
		},
		/**
		 * @param {Number} num
		 * 计数器返回值
		 */
		change(num) {
			this.buyPaperDto.pieceQuantity = num
		},
		// 确定
		confirm() {
			// 加入购物车
			if(this.shoppingCarType == 1) {
				const params = {
					  length: this.specificationObj.length,
					  productId: this.info.id,
					  productSkuId: this.buyPaperDto.productSkuId,
					  quantity: this.buyPaperDto.pieceQuantity,
					  supplierId: this.info.supplierId,
					  width: this.specificationObj.width,
					  enterpriseId: this.$store.state.companyInfo.id,
					  userId: this.$store.state.userInfo.userId
				}
				// console.log('加入购物车', params)
				createShoppingCar(params).then(res => {
					if(res) {
						uni.showToast({
							title: '加入成功！',
							icon: 'success'
						})
						this.$refs.popup.close()
					}
				})
			}else { // 立即订购
				const params = {
					orderGoodsList: [{ ...this.buyPaperDto }],
					purchaserEnterpriseId: this.$store.state.companyInfo.id
				}
				createGoodsReserve(params).then(res => {
					if (res) {
						uni.showToast({
							title: '订购成功！',
							icon: 'success'
						})
						this.$refs.popup.close()
						setTimeout(() => {
							go2('order-make', { orderId: res.orderId })
						}, 1000)
					}
				})
			}

		},
		// 轮播图片滑动
		swiperChange(e) {
			this.current = e.detail.current
		},
		previewImg(index, list) {
			uni.previewImage({
				urls: list,
				current: index
			})
		}
	}
}
</script>

<style lang="scss">
.warpper {
	.swiper-dot {
		width: 100%;
		height: 500rpx;
	}
	.image {
		width: 100%;
		height: 500rpx;
	}
	.info-box {
		height: 370rpx;
		background: #ffffff;
		.info {
			padding: 0rpx 32rpx;
			.price-row {
				padding: 20rpx 0rpx;
			}
			.price {
				font-size: 48rpx;
				color: #f5222d;
				letter-spacing: 0;
				text-align: left;
				font-weight: 500;
			}
			.unit {
				font-size: 28rpx;
				color: #f5222d;
				letter-spacing: 0;
				text-align: left;
				font-weight: 400;
			}
			.row {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 20rpx;
				.name {
					font-size: 34rpx;
					color: #000000;
					letter-spacing: 0;
					text-align: left;
					font-weight: 600;
				}
				.value {
					font-size: 24rpx;
					color: rgba(0, 0, 0, 0.55);
					letter-spacing: 0;
					text-align: left;
					font-weight: 400;
				}
			}
		}
		.list-box {
			margin: 0rpx 32rpx;
			height: 104rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			border-top: 2rpx solid rgba($color: #dddddd, $alpha: 0.8);
			.label {
				flex: 0 0 84rpx;
				font-size: 28rpx;
				color: #333333;
				letter-spacing: 0;
				text-align: left;
				font-weight: 500;
			}
			.tag-box {
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				background: #f4f5f6;
				border-radius: 4rpx;
				font-size: 28rpx;
				color: #555555;
				letter-spacing: 0;
				font-weight: 400;
				margin-right: 10rpx;
				padding: 0rpx 17rpx;
			}
		}
	}
	.other {
		padding: 0rpx 32rpx;
		border-bottom: 2rpx solid #d8d8d8;
		background: #ffffff;
		.title {
			font-size: 28rpx;
			color: #000000;
			letter-spacing: 0;
			font-weight: 500;
			padding: 24rpx 0rpx 16rpx 0rpx;
		}
		.desc {
			font-size: 28rpx;
			color: #333333;
			letter-spacing: 0;
			font-weight: 400;
			padding: 0rpx 0rpx 24rpx 0rpx;
		}
	}
	.footer-row {
		display: flex;
		flex-direction: row;
		// align-items: center;
		justify-content: space-between;
		padding: 0rpx 32rpx;
		.left {
			flex: 0 0 294rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			text-align: center;
			padding-right: 24rpx;
			.icon {
				width: 40rpx;
				height: 40rpx;
			}
			.label {
				font-size: 22rpx;
				color: #555555;
				letter-spacing: 0;
				font-weight: 400;
				padding-top: 6rpx;
			}
		}
		.right {
			display: flex;
			flex-direction: row;
			align-items: center;
			font-size: 28rpx;
			color: #ffffff;
			letter-spacing: 0;
			text-align: center;
			font-weight: 400;
			.inquiry-btn {
				width: 200rpx;
				height: 80rpx;
				line-height: 80rpx;
				background: #faab0c;
				border-top-left-radius: 2002000rpx;
				border-bottom-left-radius: 2002000rpx;
			}
			.book-btn {
				width: 200rpx;
				height: 80rpx;
				line-height: 80rpx;
				background: #ee0a24;
				border-top-right-radius: 2002000rpx;
				border-bottom-right-radius: 2002000rpx;
			}
		}
	}
	.popup_modal {
		// height: 960rpx;
		background: #ffffff;
		border-radius: 20rpx 20rpx 0 0;
		.card-box {
			padding: 0rpx 32rpx;
			.box {
				display: flex;
				flex-direction: row;
				// align-items: center;
				// height: 240rpx;
				background: #ffffff;
				border-bottom: 2rpx solid #d8d8d8;
				padding: 40rpx 0rpx;
				.image {
					flex: 0 0 160rpx;
					width: 160rpx;
					height: 160rpx;
					border-radius: 10px;
					margin-right: 20rpx;
				}
				.right-box {
					flex: 1;
					width: 100%;
					padding-top: 10rpx;
				}
				.title-row {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					.name {
						font-size: 34rpx;
						color: #000000;
						letter-spacing: 0;
						text-align: left;
						font-weight: 600;
						padding-bottom: 30rpx;
					}
					.close-icon {
						position: relative;
						top: -20rpx;
					}
				}
				.price {
					font-size: 40rpx;
					color: #f5222d;
					letter-spacing: 0;
					text-align: left;
					font-weight: 600;
				}
			}
		}
		.choose-box {
			border-bottom: 2rpx solid #d8d8d8;
			padding: 24rpx 32rpx;
			.label {
				font-size: 30rpx;
				color: rgba(0, 0, 0, 0.85);
				letter-spacing: 0;
				text-align: left;
				font-weight: 400;
				padding: 0rpx 0rpx 20rpx 0rpx;
			}
			.tag-row {
				display: flex;
				flex-direction: row;
				align-items: center;
			}
			.tag-box {
				padding: 0rpx 47rpx;
				height: 60rpx;
				line-height: 60rpx;
				background: #f5f5f5;
				border-radius: 8px;
				margin-right: 12rpx;
				font-size: 28rpx;
				color: rgba(0, 0, 0, 0.75);
				text-align: center;
				font-weight: 400;
			}
			.kg-select {
				background: #1890ff;
				color: #ffffff;
			}
			.input-row {
				display: flex;
				flex-direction: row;
				align-items: center;
				padding-top: 20rpx;
				.easyinput {
					height: 64rpx;
					background: #f5f5f5;
					border-radius: 8rpx;
				}
				.symbol {
					padding: 0rpx 16rpx;
					font-size: 32rpx;
					color: rgba(0, 0, 0, 0.85);
					font-weight: 400;
				}
			}
		}
		.quantity-row {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 32rpx 32rpx 0rpx 32rpx;
			.label {
				font-size: 30rpx;
				color: rgba(0, 0, 0, 0.85);
				letter-spacing: 0;
				font-weight: 400;
			}
		}
		.ygzl-text {
			padding: 20rpx 32rpx 0rpx;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			font-family: PingFangSC-Regular;
			font-size: 24rpx;
			color: rgba(0, 0, 0, 0.5);
			font-weight: 400;
		}
		.popup-footer-row {
			display: flex;
			flex-direction: row;
			justify-content: center;
			padding: 48rpx 32rpx 20rpx 32rpx;
			.btn {
				width: 686rpx;
				height: 96rpx;
				line-height: 96rpx;
				text-align: center;
				background: #007aff;
				border-radius: 10rpx;
				font-size: 36rpx;
				color: #ffffff;
				font-weight: 500;
			}
		}
	}
}
</style>
