<template>
	<view class="flex flex_column choosePartByVin">
		<sklineHeader title="选择配件"></sklineHeader>
		<!-- 头部车辆信息 -->
		<div class="flex align-center cpb_header" v-if="carInfo">
			<div>
				<image :src="carInfo.icon" style="width: 100rpx;height: 100rpx;border-radius: 10px;background-color: #fff;"></image>
			</div>
			<div>
				<div class="flex align-center">
					<div class="carTits ellipsis-two">{{modelLabel||''}}</div>
				</div>
				<div class="flex align-center">
					<div>VIN码：{{vinNumber}}</div>
					<div class="copyText" @click="copyVin"><span>复制</span></div>
				</div>
			</div>
		</div>
		<!-- 配件列表 -->
		<div class="cpb_middle flex">
			<div class="slider-bar">
				<scroll-view type="list" style="width:100%;height:100%;" scroll-y>
					<view class="tabs-item" :class="[curLeve2 == 'all' ? 'active' : '']" @click="selLeve2('all')">
						全部
					</view>
					<view class="tabs-item" :class="[curLeve2 == item.id ? 'active' : '']" v-for="(item, index) in leve2Data" :key="index" @click="selLeve2(item.id)">
						{{item.label}}
					</view>
				</scroll-view>
			</div>
			<div class="right-list">
				<scroll-view
				class="right-list-content" 
				scroll-y 
				type="custom"
				@scrolltolower="onreachBottom">
					<!-- vin适配配件 -->
					<sticky-section>
						<sticky-header>
							<view class="nav-right-title">适配推荐</view>
						</sticky-header>
						<list-view>
						   <vinPartItem
						   v-for="(item,index) in vinPartList"
						   :key="index"
						   :list="item" 
						   :commonPartCode="commonPartCodeList" 
						   :configPrice="configPrice"
						   :showCarPrice="showCarPrice"
						   :showCostPrice="showCostPrice"
						   :showShelfDetial="showShelfDetial"
						   :showNonShelfDetial="showNonShelfDetial"
						   :priceShowVal="priceShowVal"
						   @viewImg="viewImg"
						   @openPrice="openPriceModal"
						   @addPart="addPart"
						   @updateVinNums="updateVinNums"
						   ></vinPartItem>
						    <view v-if="vinPartList&&vinPartList.length==0">
						   	 <sklineTemp v-if="vinStatus!='loading'" text="暂无适配推荐"/>
						    </view>
						    <view style="padding: 20upx;" v-if="vinStatus=='loading'" >
								<uni-load-more :status="vinStatus" />
						    </view>
						</list-view>
				    </sticky-section>
					 
					<!-- 其它配件 -->
					<sticky-section>
						<sticky-header>
							<view class="nav-right-title flex align_center justify_between">
								其它配件
							</view>
						</sticky-header>
						<list-view>
							<otherPartItem
							v-for="(item,index) in partList"
							:key="index"
							:list="item" 
							:configPrice="configPrice"
							:showCarPrice="showCarPrice"
							:showCostPrice="showCostPrice"
							:showShelfDetial="showShelfDetial"
							:priceShowVal="priceShowVal"
							@viewImg="viewImg"
							@openPrice="openPriceModal"
							@addPart="addPart"
							@updateNums="updateNums"
							></otherPartItem>
							<view v-if="total==0">
								<sklineTemp v-if="status!='loading'" :text="noDataText"/>
							</view>
							<view style="padding: 20upx;" v-if="showOther&&total>0">
								<uni-load-more :status="status"/>
							</view>
						</list-view>
					</sticky-section>
				</scroll-view>
			</div>
		</div>
		<!-- 底部提交按钮 -->
		<sklineFooter></sklineFooter>
		<div class="cpb_footer flex align-center flex_column">
			<view class="flex align-center">
				<div>
					<div class="cpb_cart" @click="openCart">
						<uni-badge type="error" :text="cartNums" :style="{position:'absolute',right:'3px',top:'3px'}" absolute="rightTop" size="small"></uni-badge>
						<image style="width: 44rpx;height: 44rpx;" :src="`/pagesA/static/icon_shopping@3x.png`"></image>
					</div>
				</div>
				<view>
					<view class="flex align_center" v-if="dealerPhone" @click="callPhone()">
						<uni-icons size="18" type="phone" color="dodgerblue"></uni-icons> <view class="btnlink">联系汽配商</view>
					</view>
				</view>
				<div>
					<button class="submitBtn" type="primary" :loading="saveLoading" @click="submitForm">确认拿货</button>
				</div>
			</view>
			<view :style="{height:safeAreaBottom+'px'}"></view>
		</div>
		<!-- 已选配件 购物车 -->
		<page-container
		:show="showCart" 
		:round="true"
		:z-index="10"
		position="bottom" 
		custom-style="height:70%"
		@afterleave="closeCart">
			<div class="cpb_cart-box">
				<div class="cpb_close flex align_center justify_center" @click="showCart=false">
					<uni-icons size="26" type="closeempty"></uni-icons>
				</div>
				<div class="cpb_cart-tit">
					已选配件
				</div>
				<scroll-view type="list" scroll-y="true" class="cpb_cart-list">
					<view class="nav-right-item flex" v-for="(item, index) in partListData" :key="item.productSn">
						<view class="uni-col-2">
							<u-image 
							:src="item.images ? item.images+'?x-oss-process=image/resize,m_fixed,h_80,w_80,color_ffffff' : '/static/def_imgs.png'" 
							border-radius="30" width="150" height="150" bg-color="#EBEBEB" ></u-image>
						</view>
						<view class="item-info uni-col-10">
							<view class="item-name">
								<text class="item-tempPart" v-if="!item.currentInven">急送</text>
								<text>{{item.name}}</text>
							</view>
							<view class="item-detail">
								<view class="item-detail-info">
									<view class="flex justify_between">
										<text class="item-detail-text flex_1">{{item.code}}</text>
										<text class="item-detail-text" v-if="item.affiliation!='NON_SHELF'">库存：{{item.currentInven?item.currentInven:0}} {{item.unit}}</text>
									</view>
									<view class="flex" v-if="item.productTypeSn=='543766811373752320'" style="padding-bottom: 5px;">
										<uni-tag :text="item.origCode" inverted :circle="true" type="success"></uni-tag>
									</view>
									<view class="flex justify_between">
										<view class="item-detail-text flex_1">
											<text class="item-price" :style="{color:!item.price?'#666':''}" v-if="showCarPrice">{{item.price?'￥'+item.price:'暂无价格'}}</text>
											<text class="item-price" :style="{color:!item.cost?'#666':''}" v-if="showCostPrice">{{item.cost?'￥'+item.cost:'暂无价格'}}</text>
										</view>
										<view class="item-detail-text">
											<uni-number-box @change="e=>updateCartNums({value:e,index:'cart_'+item.productSn})" v-model="item.qty" :index="'cart_'+item.productSn" :min="0" :max="item.currentInven||999999"></uni-number-box>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<sklineFooter></sklineFooter>
			</div>
		</page-container>
		<!-- 去认证 -->
		<uni-popup ref="showPopup" type="center" :is-mask-click="false">
			<view class="popu-modal">
				<view class="popu-close" @click="$refs.showPopup.close()"><uni-icons type="closeempty" size="26"></uni-icons></view>
				<image width="533" height="415" style="width: 533rpx;height: 415rpx;" src="/static/authimg.jpg"></image>
				<view style="padding-top:1rem;" class="flex justify_center">
					<button @click="toAuthStore()" shape="circle" :style="{background:'#066cff',color:'#fff',width:'350rpx'}">开始认证</button>
				</view>
			</view>
		</uni-popup>
		<!-- 价格查看 -->
		<uni-popup ref="showPriceModal" type="center">
			<view class="show-price-modal popu-modal" v-if="tempData">
				<view class="popu-close" @click="$refs.showPriceModal.close()"><uni-icons type="closeempty" size="26"></uni-icons></view>
				<view class="itemlist">
					<text>产品编码</text>
					<text>{{tempData.code||'--'}}</text>
				</view>
				<view class="itemlist" v-if="tempData.productTypeSn=='543766811373752320'">
					<text>原厂编码</text>
					<text>{{tempData.origCode||'--'}}</text>
				</view>
				<view class="itemlist">
					<text>产品名称</text>
					<text>{{tempData.name||'--'}}</text>
				</view>
				<view v-if="tempData.affiliation=='SHELF'">
					<view class="itemlist" v-if="configPrice&&configPrice.shelf_cost_show == '1'">
						<text>进货价</text>
						<text>{{tempData.cost?'￥'+tempData.cost:'暂无价格'}}</text>
					</view>
					<view class="itemlist" v-if="configPrice&&configPrice.shelf_price_show == '1'">
						<text>车主价</text>
						<text>{{tempData.price?'￥'+tempData.price:'暂无价格'}}</text>
					</view>
				</view>
				<view v-else>
					<view class="itemlist" v-if="configPrice&&configPrice.non_shelf_cost_show == '1'">
						<text>进货价</text>
						<text>{{tempData.cost?'￥'+tempData.cost:'暂无价格'}}</text>
					</view>
					<view class="itemlist" v-if="configPrice&&configPrice.non_shelf_price_show == '1'">
						<text>车主价</text>
						<text>{{tempData.price?'￥'+tempData.price:'暂无价格'}}</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { getShelfProductList, getShelfProductType, queryPartCodeByVin, getShelfQueryList, shelfOrderFlowCreate, findShelfUserParam } from '@/api/shelf'
	import { scanVinLogCopy } from '@/api/car'
	import vinPartItem from './components/vinPartItem.vue'
	import otherPartItem from './components/otherPartItem.vue'
	import sklineHeader from '@/components/skline/sklineHeader.vue'
	import sklineTemp from '@/components/skline/sklineTemp.vue'
	import sklineFooter from '@/components/skline/sklineFooter.vue'
	export default {
		components:{
			vinPartItem,
			otherPartItem,
			sklineHeader,
			sklineTemp,
			sklineFooter
		},
		data() {
			return {
				showOther: true,
				showPriceModal: false,
				theme: '',
				vinNumber: '',
				leve2Data: [],  //  二级菜单数据
				curLeve2: '',  //  当前所选二级菜单
				carInfo: null,
				status: 'loading',
				vinStatus: 'loading',
				noDataText: '暂无配件',
				pageNo: 1,
				pageSize: 20,
				total: 0, // 列表总数
				noMore: false ,// 没有更多
				showCart: false, // 购物车
				carList:[], // 车型列表
				partList: [], // 配件列表
				partListData: [], // 已选配件
				vinPartList: [],
				vinCode:[],
				commonPartCodeList:[],
				isIphoneXup: false,
				saveLoading: false,
				showPopup: false,
				priceShowVal: null, // 是否可以查看所有价格
				showCarPrice: false, // 显示车主价
				showCostPrice: false, // 显示成本价
				tempData: null ,// 临时数据
				safeAreaBottom:0
			}
		},
		computed:{
			modelLabel(){
				return this.carInfo&&this.carInfo.text||''
			},
			cartNums(){
				let ret = 0
				this.partListData.map(item => {
					ret = ret + item.qty
				})
				return ret
			},
			totalAmount(){
				let ret = 0
				for(let i=0;i<this.partListData.length;i++){
					const item = this.partListData[i]
					ret = ret + ((item.price||0) * item.qty)
				}
				return ret.toFixed(2)
			},
			dealerPhone(){
				const shelfInfo = this.$store.state.vuex_storeShelf
				return shelfInfo&&shelfInfo.contactMobile ? shelfInfo.contactMobile : ''
			},
			userInfo(){
				return this.$store.state.vuex_userInfo
			},
			storeApply(){
				return this.$store.state.vuex_storeAuthInfo || null
			},
			isAdmin(){
				return this.userInfo.superAdmin == 1
			},
			hasRedPacket(){
				const rule = this.$store.state.vuex_rewardRule
				return rule&&rule.ruleStatus == 'release'
			},
			configPrice(){
				return this.$store.state.vuex_configPrice
			},
			showShelfDetial(){
				return this.configPrice && this.configPrice.shelf_price_show == '1'&&this.configPrice.shelf_cost_show == '1'
			},
			showNonShelfDetial(){
				return this.configPrice && this.configPrice.non_shelf_price_show == '1'&&this.configPrice.non_shelf_cost_show == '1'
			}
		},
		onLoad(opts) {
			this.safeAreaBottom = uni.getSystemInfoSync().safeAreaInsets.bottom
			
			this.theme = getApp().globalData.theme
			this.vinNumber = opts.vinNumber
			this.carInfo = opts.carList?JSON.parse(decodeURIComponent(opts.carList)):null
			// 获取vin 对应code
			this.getCarCodeByVin()
			// 记录
			if(opts.type == 'log'){
				this.scanVinLogCopy()
			}
			// 游客
			if(this.userInfo.sysUserFlag == '0'){
				// 未认证
				if(!this.storeApply || this.storeApply&&!this.storeApply.auditStatus){
					this.$refs.showPopup.open()
				}
			}
		},
		onUnload() {
			this.carList = null
			this.partList = null// 配件列表
			this.partListData = null // 已选配件
			this.vinPartList = null
			this.vinCode = null
			this.commonPartCodeList = null
		},
		onShow() {
			this.$store.state.vuex_shelfChoosePart = []
			this.getShowPriceType()
		},
		methods: {
			getShowPriceType(){
				const storeShelf = this.$store.state.vuex_storeShelf
				if(storeShelf){
					findShelfUserParam({shelfSn: storeShelf?storeShelf.shelfSn:''}).then(res => {
						this.priceShowVal = res.data ? res.data.carOwnerPrice == '1' && res.data.purchasesPrice == '1' : false
						// 选中了2中价格，则从列表显示价格中取值
						if(this.priceShowVal){
							// 进货价
							this.showCostPrice = res.data.priceShowType == 'PURCHASES_PRICE'
							// 车主价
							this.showCarPrice = res.data.priceShowType == 'CAR_OWNER_PRICE'
						}else{
							// 进货价
							this.showCostPrice = res.data ? res.data.purchasesPrice == '1' : false
							// 车主价
							this.showCarPrice = res.data ? res.data.carOwnerPrice == '1' : false
						}
					})
				}else{
					this.priceShowVal = false
					this.showCostPrice = false
					this.showCarPrice = false
				}
			},
			// 打开价格信息弹框
			openPriceModal(row,type,show){
				console.log(row)
				if(this.priceShowVal&&show){
					if(type == 0){
						row.affiliation = "SHELF"
					}
					this.tempData = row
					this.$refs.showPriceModal.open()
				}
			},
			scanVinLogCopy(){
				scanVinLogCopy({id:this.carInfo.id}).then(res => {
					console.log(res)
				})
			},
			toAuthStore(){
				this.$refs.showPopup.close()
				uni.redirectTo({
					url: '/pages/storeManage/storeAuth'
				})
			},
			callPhone() {
				if(this.dealerPhone!=''){
					uni.makePhoneCall({
						phoneNumber: this.dealerPhone
					})
				}
			},
			viewImg(item){
				uni.previewImage({
					urls: [item.images]
				})
			},
			// 复制
			copyVin(){
				uni.setClipboardData({
					data: this.vinNumber||'',
				})
			},
			// 格式化标签数据和配件分类数据一样
			labelToPart(data){
				let arr = []
				data.map(item => {
					arr.push({
						id: item.id || item.productTypeSn,
						label: item.name
					})
				})
				return arr
			},
			getCarCodeByVin(){
				queryPartCodeByVin({vinNumber:this.vinNumber}).then(res => {
					console.log(res,'this.vinCode')
					const ret = res.data
					this.commonPartCodeList = ret.commonPartCodeList || []
					this.vinCode = this.commonPartCodeList.concat(ret.partCodeList||[])
					this.getShelfProductType()
				})
			},
			// 获取数字货架分类作为二级分类
			getShelfProductType(){
				const storeShelf = this.$store.state.vuex_storeShelf
				getShelfProductType({
					codeList: this.vinCode,
					shelfSn: storeShelf?storeShelf.shelfSn:''
				}).then(res => {
					// console.log(res,'getShelfProductType')
					this.leve2Data = this.labelToPart(res.data || [])
					// 默认该车适用或全部
					this.selLeve2('all')
				})
			},
			// 单击二级菜单
			selLeve2 (v) {
				this.pageNo = 1
				this.partList = []
				this.vinPartList = []
				this.curLeve2 = v
				if(this.vinNumber){
					this.getVinShelfPartList()
				}
				this.getShelfProductList()
			},
			 // 获取数字货架配件列表
			 getShelfProductList(){
			 	const _this = this
			 	let params = {
			 	    pageNo: this.pageNo,
			 	    pageSize: this.pageSize,
			 		excludeCodeList: this.vinCode,
			 		productTypeSn: this.curLeve2 == 'all' ? '' : this.curLeve2
			 	}
			 	_this.status = 'loading'
			 	getShelfProductList(params).then(res => {
					console.log(res,'获取数字货架配件列表')
			 		uni.hideLoading()
			 		if(res.status == 200){
						_this.total = Number(res.data.count)
						if(_this.total>0){
							const list = res.data.list || []
							// 追加数据
							_this.partList.push(_this.fiterChecked(list))
							// 判断是否最后一页
							const maxPages = Math.ceil(_this.total / _this.pageSize)
							if(this.pageNo >= maxPages){
								_this.status = 'noMore'
								_this.noDataText = '没有更多了'
							}
						}else{
							_this.partList = []
							_this.status = 'noMore'
							_this.noDataText = '暂无配件'
						}
			 			
			 		}else{
			 			_this.status = 'more'
			 			_this.partList = []
			 			_this.noDataText = res.message ? res.message : '网络似乎出错了，请稍后再试'
			 		}
			 	})
			 },
			// 根据客户vin查询该车可用数字货架中的配件
			getVinShelfPartList(){
				let params = {
				      queryWord: this.queryWord,
				      productTypeSn: this.curLeve2 == 'all' ? '' : this.curLeve2,
					  codeList: this.vinCode
				  }
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.vinStatus = 'loading'
				getShelfQueryList(params).then(res => {
					const ret = this.fiterChecked(res.data || []) 
					for(let i=0;i<ret.length;i=i+this.pageSize){
						this.vinPartList.push(ret.slice(i,(i+this.pageSize)>ret.length?ret.length:(i+this.pageSize)))
					}
					this.vinStatus = 'noMore'
					uni.hideLoading()
				})
			},
			// 过滤已选择的
			fiterChecked (list){
				this.partListData.forEach(item => {
					let p = list.find(k => {
						return k.productSn == item.productSn
					})
					if (p){
						p.checked = true
						p.qty = item.qty
					}
				})
				return list
			},
			// 加载更多
			onreachBottom () {
				if(this.partList.length < this.total && this.showOther){
					this.pageNo++
					this.getShelfProductList()
				}else{
					this.status = "noMore"
				}
			},
			// 根据productSn查找
			getItemById(sn,type){
				const a = this[type].findIndex(k => k.find(s=> s.productSn == sn))
				const b = a>=0 ? this[type][a].findIndex(s=> s.productSn == sn) : -1
				return {p:a,s:b}
			},
			// 更新页面列表数量状态
			updateListData(sn,type,qty,checked){
				const row = this.getItemById(sn,type)
				if(row.p>=0 && row.s>=0){
					this[type][row.p][row.s].checked = checked
					this[type][row.p][row.s].qty = qty
					this[type][row.p].splice()
				} 
			},
			// 添加到购物车
			addPart(item,type){
				if(type == 'vin'){
					this.updateListData(item.productSn,'vinPartList',1,true)
				}else{
					this.updateListData(item.productSn,'partList',1,true)
				}
				// 已选列表
				this.partListData.unshift({
					id: item.id,
					productSn: item.productSn,
					name: item.name,
					unit: item.unit,
					price: item.price,
					cost: item.cost,
					currentInven: item.currentInven,
					code: item.code,
					origCode: item.origCode,
					qty: 1,
					productTypeSn: item.productTypeSn,
					images: item.images,
					checked: true,
					affiliation: item.affiliation
				})
			},
			// 更新配件列表数量
			updatePartList(data,type){
				const index = this.partListData.findIndex(item => item.productSn == data.index)
				// 删除
				if(!data.value){
					// 删除页面上的数量
					this.updateListData(data.index,type,0,false)
					// 删除已选列表
					if(index>=0){
						this.partListData.splice(index,1)
					}
					// 没有已选，关闭弹框
					if(this.partListData.length==0){
						this.showCart = false
					}
				}else{
					// 更新数量
					this.partListData[index].qty = data.value
					this.partListData.splice()
				}
			},
			// 修改适配配件上数量
			updateVinNums(data){
				this.updatePartList(data,'vinPartList')
			},
			// 修改其它配件上的数量
			updateNums(data){
				this.updatePartList(data,'partList')
			},
			// 点击购物车修改数量
			updateCartNums(data){
				console.log(data)
				if(!data.value){
					const index = this.partListData.findIndex(item => 'cart_'+item.productSn == data.index)
					if(index>=0){
						this.partListData.splice(index,1)
					}
					if(this.partListData.length==0){
						this.showCart = false
					}
				}
				// 同步更新Vin适配配件列表上的
				this.updateListData(data.index.split('_')[1],'vinPartList',data.value,!!data.value)
				// 同步更新其它配件列表上的
				this.updateListData(data.index.split('_')[1],'partList',data.value,!!data.value)
			},
			// 打开购物车
			openCart(){
				if(this.partListData.length){
					this.showCart=!this.showCart
				}else{
					uni.showToast({
						icon: 'none',
						title: '请选择配件'
					})
				}
			},
			// 关闭购物车
			closeCart(){
				this.showCart = false
			},
			// 格式化数据
			formatData(){
				const partList = []
				const tempList = []
				this.partListData.map(item => {
					if(item.currentInven){
						partList.push({
							"productSn": item.productSn,
							"totalQty": item.qty
						})
					}else{
						tempList.push({
							"productSn": item.productSn,
							"qty": item.qty,
							// "price": item.cost
						})
					}
				})
				return [partList,tempList]
			},
			// 立即提交
			submitForm(){
				// 游客去认证
				if(this.userInfo.sysUserFlag == '0'){
					// 未认证
					if(!this.storeApply || this.storeApply&&(!this.storeApply.auditStatus || this.storeApply.auditStatus == 'REFUSE')){
						this.$refs.showPopup.open()
					}
					// 认证通过
					if(this.storeApply&&this.storeApply.auditStatus=='WAIT'){
						uni.showModal({
							title: '提示',
							content: '门店认证资料审核中，请耐心等待！',
							confirmText: '好的',
							showCancel: false
						})
					}
				}else{
					const storeShelf = this.$store.state.vuex_storeShelf
					if(!storeShelf){
						uni.showToast({
							icon: 'none',
							title: '您还未开通数字货架，暂时无法使用'
						})
						return
					}
					// 已认证用户
					if(this.partListData.length==0){
						uni.showToast({
							icon: 'none',
							title: '请选择配件'
						})
						return
					}
					
					// 开始提交
					const params = {
						shelfOrderDetailList: this.formatData()[0],
						tempBillDetailList: this.formatData()[1],
						vin: this.vinNumber,
						vehicleModel: this.modelLabel || '',
						vehicleLogo: this.carInfo.icon||'',
						billSource: 'vin'
					}
					console.log(params,'立即提交')
					this.saveLoading = true
					shelfOrderFlowCreate(params).then(res => {
						console.log(res,'shelfOrderFlowCreate')
						if(res.status == 200){
							this.$store.state.vuex_tempData = res.data
							// 提交成功
							uni.redirectTo({
								url:"/pagesA/digitalShelf/choosePartResult?state=1"
							})
						}else{
							this.$store.state.vuex_tempData = {shelfOrder:{remindMessage:res.message}}
							// 或失败
							uni.redirectTo({
								url:"/pagesA/digitalShelf/choosePartResult?state=0"
							})
						}
						this.saveLoading = false
					})
				}
			},
		}
	}
</script>

<style lang="less">
@import '/flex.css';
.choosePartByVin{
	height: 100vh;
	.cpb_header{
		background-color: #FFFFFF;
		padding: 10rpx;
		align-items: center;
		> div{
			padding: 10rpx;
			align-items: center;
			&:first-child{
				padding-right: 20rpx;
			}
			> div{
				&:first-child{
					padding-right: 20rpx;
					flex-grow: 1;
					color: #818b94;
					font-size: 24rpx;
				}
			}
		}
		.copyText{
			background-color: #EBEBEB;
			border-radius: 100rpx;
			padding: 0 20rpx;
			color: #033692;
			font-size: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 20rpx;
		}
		.carTits{
			font-size: 32rpx;
			font-weight: bold;
			color: #222222;
			line-height: normal;
			margin-bottom: 10rpx;
			flex-grow: 1;
		}
		.qhbtns{
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 20rpx;
			color: #0485F6;
			border:2rpx solid #0485F6;
			border-radius: 50rpx;
			background: rgba(88, 177, 255, 0.2);
			width: 200rpx;
			height: 36rpx;
			margin-left: 10rpx;
		}
	}
	.popu-modal{
		width: 300px;
		padding: 30px 20px;
		background-color: #fff;
		border-radius: 15px;
		position: relative;
		.popu-close{
			position: absolute;
			right: 6px;
			top: 6px;
			width: 30px;
			height: 30px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.popu-title{
			font-size: 18px;
			font-weight: bold;
			color: #333;
			text-align: center;
			margin-bottom: 20px;
		}
	}
	.show-price-modal{
		.itemlist{
			display: flex;
			align-items: center;
			justify-content: space-between;
			> text{
				&:last-child{
					color: #999;
					width: 70%;
					display: block;
				}
			}
			border-bottom: 1px solid #eee;
			padding: 10px;
		}
	}
	.cpb_middle{
		flex-grow: 1;
		padding-top: 4rpx;
		overflow: auto;
		.slider-bar{
			width: 25%;
			background: #F5F6F7;
			height: 100%;
			.tabs-item{
				border-left: 6rpx solid #F5F6F7;
				padding: 20rpx 10rpx;
				font-size: 28rpx;
				color: #666E75;
				text-align: center;
			}
			.active{
				border-color: #0485F6;
				color: #0485F6;
				background: #fff;
			}
		}
		.right-list{
			position: relative;
			flex-grow: 1;
			background: #fff;
			height: 100%;
			width: 75%;
			.right-list-content{
				height: 100%;
				.nav-right-title{
					font-weight: bold;
					padding: 20upx 25upx;
					border-bottom: 2rpx solid #eee;
					background: #fff;
					> text{
						color: #9E9E9E;
						font-weight: normal;
					}
				}
			}
		}
	}
	.cpb_footer{
		background-color: #fff;
		align-items: center;
		justify-content: space-between;
		z-index: 1000;
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
		.btnlink{
			font-size: 14px;
			color: #3390e2;
		}
		> view{
			width: 100%;
			&:first-child{
				padding: 0 20rpx;
				justify-content: space-between;
				height: 50px;
				align-items: center;
				.submitBtn{
					background-color: #FB1E1E;
					font-size: 28rpx;
					border-radius: 100px;
				}
			}
		}
		.cpb_cart{
			width: 84rpx;
			height: 84rpx;
			background-color: #0485F6;
			border-radius: 200rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
		}
		> div{
			&:last-child{
				width: 40%;
			}
		}
	}
	.cpb_cart-box{
		background-color: #fff;
		width: 100%;
		height: 100%;
		padding: 0;
		border-radius: 30rpx 30rpx 0 0;
		display: flex;
		flex-direction: column;
		.cpb_close{
			position: absolute;
			top: 3rpx;
			right: 15rpx;
			width: 70rpx;
			height: 70rpx;
			font-size: 32rpx;
			color: #999;
			z-index: 100;
		}
		.cpb_cart-tit{
			text-align: center;
			padding: 20rpx;
			font-size: 36rpx;
			border-bottom: 1px solid #eee;
		}
		.cpb_cart-list{
			flex-grow: 1;
			.nav-right-item{
				padding: 10px;
				border-bottom:2rpx solid #eee;
			}
			.item-name{
				font-size: 30rpx;
				.item-tempPart{
					background: #0055ff;
					color: #fff;
					border-radius: 1em;
					font-size: 0.8em;
					padding: 0 0.5em;
				}
			}
			.item-info{
				flex-grow: 1;
				padding-left: 10px;
				width: 80%;
			}
			.item-detail{
				.item-detail-info{
					padding: 10upx 0 4upx;
					/deep/ .uni-tag{
						word-break: break-all;
						font-size: 28rpx;
						color: #0fab04eee;
						border: 0;
						padding: 0.2rem 0.3rem;
					}
					> view{
						padding-bottom: 10rpx;
						align-items: center;
						.item-detail-text{
							color: #999;
							.phtxt{
								color: #0485F6;
								font-size: 28upx;
							}
							.item-price{
								color: #FB1E1E;
								font-size: 28upx;
							}
						}
					}
				}
			}
		}
	}
}
</style>
