<template>
	<view class="chooseProduct-wrap">
		<!-- 标题 -->
		<u-navbar title="选择产品" :safeAreaInsetTop="false" :border-bottom="true">
			<view class="u-nav-slot" slot="right" style="padding-right: 40rpx;">
				<u-icon name="search" color="#999" size="28" @click="openModal=true"></u-icon>查询
			</view>
		</u-navbar>
		<!-- 产品列表 -->
		<view class="product-list-box">
			<scroll-view class="product-list-con" :style="{height: scrollH+'upx'}" scroll-y @scrolltolower="onreachBottom">
				<view class="product-list-item font_13" v-for="(item, index) in listData" :key="item.id">
					<view class="list-item-tit">
						<view class="item-tit ellipsis-one" :style="{borderColor: $config('primaryColor')}">{{item.productName}}</view>
					</view>
					<view class="list-item-con flex align_center justify_between">
						<view class="pimgs">
							<u-image :src="item.productMainPic&&item.productMainPic.imageUrl?item.productMainPic.imageUrl:`../../static/${theme}/def_img@2x.png`" width="128" height="128" border-radius="10"></u-image>
						</view>
						<view class="flex_1">
							<view>产品编码：{{item.productCode || '--'}}</view>
							<view class="padding_3 flex align_center justify_between">
								<view>原厂编码：{{item.productOrigCode || '--'}}</view>
								<u-icon name="plus-circle" :color="$config('primaryColor')" size="40" class="close-circle" @click="handleAdd(item, 'add')"></u-icon>
							</view>
							<view v-if="item.warehouseName || item.warehouseLocationName">仓库仓位：{{item.warehouseName}} > {{item.warehouseLocationName}}</view>
						</view>
					</view>
					<view class="list-item-footer flex align_center justify_between">
						<view class="footer-item">
							<view>{{toThousands(item.currentQty||0)}}{{item.unit}}</view>
							<view class="color_6">库存数量</view>
						</view>
						<view class="footer-item">
							<view>
								<text :style="{color: $config('errorColor')}">{{toThousands(item.price||0, 2)}}</text>
								<text v-if="item.origSalePriceFlag == 1">（原）</text>
							</view>
							<view class="color_6">参考售价</view>
						</view>
					</view>
				</view>
				<view v-if="listData && listData.length == 0">
					<u-empty :text="noDataText" mode="list" :img-width="200" :margin-top="30"></u-empty>
				</view>
			</scroll-view>
		</view>
		<!-- 合计 -->
		<view ref="productTotal" class="selected-box flex align_center justify_between">
			<view class="choose-info flex_1 flex align_center justify_between" @click="lookProduct">
				<text>已选 {{detailData && (detailData.totalCategory || detailData.totalCategory==0) ? toThousands(detailData.totalCategory) : '--'}} 款，合计 ￥{{detailData && (detailData.totalAmount || detailData.totalAmount==0) ? toThousands(detailData.totalAmount, 2) : '--'}}</text>
				<u-icon name="arrow-up" :color="$config('primaryColor')" size="34" class="close-circle"></u-icon>
			</view>
			<view class="choose-btn" @click="handleChoose" :style="{backgroundColor: $config('primaryColor')}">选好了</view>
		</view>
		<!-- 查询右侧弹框 -->
		<productSearch :openModal="openModal" :defaultParams="searchParams" @refresh="refresh" @close="openModal=false" />
		<!-- 添加/编辑产品 -->
		<productModal :openModal="openProductModal" :infoData="productData" @confirm="productConfirm" @close="openProductModal=false" />
		<!-- 已选产品 -->
		<selectedProductsModal :openModal="openSelectedModal" :nowData="detailData" @confirm="handleChoose" @refreshTotal="selectedProductTotal" @close="openSelectedModal=false" />
		<!-- 弹框 -->
		<common-modal :openModal="commonModal" :content="modalText" @confirm="handleCommon" @close="commonModal=false" />
	</view>
</template>

<script>
	import ProductSearch from './productSearch.vue'
	import ProductModal from './productModal.vue'
	import SelectedProductsModal from './selectedProductsModal.vue'
	import commonModal from '@/pages/common/commonModal.vue'
	import { toThousands } from '@/libs/tools'
	import { querySumByProductLocation } from '@/api/stock'
	import { salesDetail, supperCodeByVin } from '@/api/sales'
	export default{
		components: { ProductSearch, ProductModal, SelectedProductsModal, commonModal },
		data(){
			return{
				toThousands,
				listData: [],
				pageNo: 1,
				pageSize: 6,
				totalNum: 0,
				noDataText: '暂无数据',
				searchParams: {},
				openModal: false,
				theme: '',
				salesInfo: null,  // 销售单信息
				scrollH: 0,
				openProductModal: false,  // 编辑产品信息弹框是否显示
				productData: null,  // 当前操作的产品信息
				chooseType: 'add',  // 添加产品add，编辑产品edit
				commonModal: false,  // 公共弹框是否显示
				modalText: '',  // 公共弹框提示语
				commonType: 1,  // 公共弹框类型  1为添加产品时库存不足，2为编辑产品时库存不足，
				openSelectedModal: false,  // 已选产品弹框是否显示
				detailData: null  // 销售单详情数据
			}
		},
		onNavigationBarButtonTap(e){  // 标题栏 按钮操作
			this.openModal = true
		},
		onLoad(opt) {
			this.theme = getApp().globalData.theme
			if(opt){
				this.salesInfo = opt.data ? JSON.parse(opt.data) : null
			}
			this.init()
			
			const _this = this
			uni.getSystemInfo({
				success: function (res) {
					const winH = res.windowHeight * 2
					_this.scrollH = winH - 180
				}
			})
		},
		methods: {
			init(){
				this.getList(1)  // 产品列表
				this.selectedProductTotal()  // 已选产品合计
			},
			// 获取查询参数 刷新列表
			refresh(params){
				console.log('查询', params)
				const _this = this
				if(params.vinCode && params.vinCode.length == 17){
					// 查询vin码
					supperCodeByVin({ vin: params.vinCode }).then(res => {
						if(res.status == 200){
							params.productCodeList = res.data.partCodeList || []
							this.searchParams = params
							this.getList(1)
						}
					})
				}else{
					this.searchParams = params
					this.getList(1)
				}
			},
			// 列表
			getList(pageNo){
				const _this = this
				if (pageNo) {
					this.pageNo = pageNo
				}
				let params = {
					pageNo: this.pageNo,
					pageSize: this.pageSize
				}
				let searchParams = JSON.parse(JSON.stringify(this.searchParams))
				searchParams.brandName = undefined
				searchParams.nowData = undefined
				searchParams.warehouseName = undefined
				querySumByProductLocation(Object.assign(params, searchParams, { customerSn: this.salesInfo.buyerSn })).then(res => {
					if (res.status == 200) {
						if(res.data && res.data.list){
							res.data.list.map(item => {
								item.salesNums = 1
								item.currentQty = item.currentQty || 0
								item.price = item.lastSalePrice ? item.lastSalePrice : item.salePrice
							})
						}
						if(this.pageNo>1){
							this.listData = this.listData.concat(res.data.list || [])
						}else{
							this.listData = res.data.list || []
						}
						this.totalNum = res.data.count || 0
					} else {
						this.listData = []
						this.totalNum = 0
						this.noDataText = res.message
					}
				})
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				if(this.listData.length < this.totalNum){
					this.pageNo += 1
					this.getList()
				}
			},
			// 添加/编辑产品
			handleAdd(data, type){
				this.openProductModal = true
				this.chooseType = type
				this.productData = data
			},
			// 选好了
			handleChoose(){
				uni.redirectTo({ url: '/pages/sales/edit?pageType=edit&data='+JSON.stringify(this.detailData) })
			},
			// 查看已选产品
			lookProduct(){
				this.openSelectedModal = true
			},
			// 确认产品信息
			productConfirm(data){
				console.log('form',data)
				console.log('info',this.productData)
				if (this.productData.lastSalePrice && (this.productData.price < this.productData.salePrice)) {  // 售价低于定价
					
				}
				if(this.chooseType == 'add'){
					// 库存不足时
					if (this.productData.currentQty < data.qty) {
						this.commonType = 1
						this.modalText = '库存不足，将产生急件，确认要添加吗？'
						this.commonModal = true
					}else{
						
					}
				}else if(this.chooseType == 'edit'){
					// 库存不足时
					if (this.productData.currentQty < this.productData.salesNums) {
						this.commonType = 2
						this.modalText = '库存不足，将产生急件，确认修改吗？'
						this.commonModal = true
					}else{
						
					}
				}
				// this.openProductModal = false
			},
			addProduct(data){
				
			},
			// 公共弹框
			handleCommon(){
				if(this.commonType == 1){  // 添加产品时库存不足
					
				}else if(this.commonType == 2){  // 编辑产品时库存不足
					
				}
			},
			// 已选产品  提交
			selectedConfirm(){},
			// 已选产品合计
			selectedProductTotal(){
				salesDetail({ id: this.salesInfo.id }).then(res => {
					if(res.status == 200){
						this.detailData = res.data
					}else{
						this.detailData = null
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.chooseProduct-wrap{
		width: 100%;
		position: relative;
		.padding_3{
			padding: 6upx 0;
		}
		.color_6{
			color: #666;
		}
		.product-list-box{
			padding: 20upx 20upx;
			.product-list-con{
				.product-list-item{
					background: #ffffff;
					padding: 20upx 20upx 0;
					margin-bottom: 25upx;
					border-radius: 25upx;
					box-shadow: 1px 1px 3px #EEEEEE;
					.list-item-tit{
						padding-bottom: 12upx;
						border-bottom: 1px solid #e4e7ed;
						.item-tit{
							font-weight: bold;
							color: rgb(48, 49, 51);
							font-size: 28upx;
							padding-left: 10upx;
							border-left: 6upx solid #000;
							line-height: 1;
						}
					}
					.list-item-con{
						padding: 14upx 14upx 16upx;
						font-size: 26upx;
						.pimgs{
							margin-right: 16upx;
						}
					}
					.list-item-footer{
						border-top: 1px solid #e4e7ed;
						.footer-item{
							width: 50%;
							text-align: center;
							border-right: 1px solid #e4e7ed;
							font-size: 26upx;
							padding: 8upx 0 12upx;
						}
						.footer-item:last-child{
							border: none;
						}
					}
				}
			}
		}
		.selected-box{
			background-color: #fff;
			box-shadow: 1px -1px 3px #EEEEEE;
			.choose-info{
				padding: 0 30upx;
			}
			.choose-btn{
				color: #fff;
				width: 28%;
				padding: 26upx 0;
				text-align: center;
			}
		}
	}
</style>