<template>
	<view class="warpper">
		<view class="swiper-dot">
			<uni-swiper-dot :info="info" :current="current" field="content" mode="indexes" style="height: 100%;">
				<swiper class="swiper-box" @change="change" style="height: 100%;">
					<swiper-item v-for="(item, index) in info" :key="index">
						<view class=""><image class="image" src="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">¥2300</text>
					<text class="unit">/吨</text>
				</view>
				<view class="row">
					<view class="name">
						博汇朱雀白卡
					</view>
					<view class="value">
						库存：9600张
					</view>
				</view>
			</view>
			<view class="list-box">
				<view class="label">
					克重：
				</view>
				<view class="tag-box" v-for="(titme, tindex) in 4" :key="tindex">
					<text>240g</text>
				</view>
			</view>
			<view class="list-box">
				<view class="label" style="font-size: 24rpx;">
					规格：
				</view>
				<view class="tag-box" v-for="(titme, tindex) in 2" :key="tindex">
					<text>787*1092</text>
				</view>
			</view>
		</view>
		<uGap></uGap>
		<view class="other">
			<view class="title">
				商品卖点
			</view>
			<view class="desc">
				月结30天价格，不加服务费！
			</view>
		</view>
		<view class="other">
			<view class="title">
				商品描述
			</view>
			<view class="desc">
				售价全部为含税价，支持先用后付，欢迎来电查询！近期价格波动较大，请下单前先咨询价格。
			</view>
		</view>
		<view class="other">
			<view class="title">
				送货说明
			</view>
			<view class="desc">
				分切纸不足重量的，另加调机费；低于送货重量或超出送货范围的，运费另计。
			</view>
		</view>
		<view class="other" style="border: none;">
			<view class="title">
				其他说明
			</view>
			<view class="desc">
				无其他说明。
			</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">
						店铺
					</view>
		  		</view>
				<view class="">
					<image class="icon" src="/static/imgs/paperDetails/shopping-trolley.png"></image>
					<view class="label">
						购物车
					</view>
				</view>
				<view class="" @tap='addShoppingTap'>
					<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'>
					立即订购
				</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="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif" mode=""></image>
						<view class="right-box">
							<view class="title-row">
								<view class="name">
									博汇朱雀白卡
								</view>
								<view class="close-icon" @tap="closeTap">
									<uni-icons size="20" type="close" color="#888888"></uni-icons>
								</view>
							</view>
							<view class="price">
								¥7630.28
							</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 weightList" 
						:key='kIndex'
						@tap="weightTap(kItem, kIndex)">
						{{kItem}}g
						</view>
					</view>
				</view>
				<view class="choose-box">
					<view class="label">
						请选择规格
					</view>
					<view class="tag-row">
						<view 
						:class="['tag-box', ggActive === sIndex ? 'kg-select' : '']" 
						v-for="(sItem,sIndex) in specificationList" 
						:key='sIndex'
						@tap="specificationTap(sItem, sIndex)">
						{{sItem}}
						</view>
					</view>
					<view class="input-row">
						<view class="">
							<uni-easyinput :inputBorder="false" class="easyinput" type="number" v-model="value" placeholder="请输入"></uni-easyinput>
						</view>
						<view class="symbol">
							x
						</view>
						<view class="">
							<uni-easyinput :inputBorder="false" class="easyinput" type="number" v-model="value" 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">
					预估重量：1.6346吨
				</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'
export default {
	components: { uGap, qnFooter, qnInputNumber },
	data() {
		return {
			info: [
				{
					content: '内容 A'
				},
				{
					content: '内容 B'
				},
				{
					content: '内容 C'
				}
			],
			current: 0,
			weightList: ['240', '250', '280'],
			specificationList: ['正度', '大度', '特规分切'],
			kgActive: 0,
			ggActive: 0,
			value: null,
			
		}
	},
	methods:{
		addShoppingTap() {
			this.$refs.popup.open('bottom')
		},
		// 路由到实单询比价
		inquiryTap() {
			go2('for-comparison', {id: null})
		},
		closeTap() {
			this.$refs.popup.close()
		},
		// 重量切换
		weightTap(item, index) {
			this.kgActive = index
		},
		// 规格切换
		specificationTap(item, index) {
			this.ggActive = index
		},
		/**
		 * @param {Number} num
		 * 计数器返回值
		 */
		change(num) {
			
		},
		// 确定
		confirm() {
			this.$refs.popup.close()
		}
	}
}
</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.50);
			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>
