<template>
	<view class="chooseProduct-wrap">
		<!-- 产品列表 -->
		<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="flex align_center justify_between flex_1">
							<view class="pimgs">
								<u-image :src="item.productMainImage?item.productMainImage:`../../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">原厂编码:{{item.productOrigCode || '--'}}</view>
								<view v-if="item.warehouseName || item.warehouseLocationName">仓库仓位:{{item.warehouseName}} > {{item.warehouseLocationName}}</view>
							</view>
						</view>
						<view class="list-item-btn">
							<u-icon class="item-btn-add" v-if="!item.saleQty" name="plus-circle" :color="$config('primaryColor')" size="40" @click="handleAdd(item, 'add')"></u-icon>
							<u-tag v-else text="已添加" type="info" mode="light" shape="circle" size="mini" style="vertical-align: text-top;" />
						</view>
					</view>
					<view class="list-item-footer flex align_center justify_between">
						<view class="footer-item" v-if="searchParams && searchParams.cost">
							<view>{{toThousands(item.putCost||0, 2)}}</view>
							<view class="color_6">成本价</view>
						</view>
						<view class="footer-item" v-if="searchParams && searchParams.cityPrice">
							<view>{{toThousands(item.dealerProduct && item.dealerProduct.cityPrice || 0, 2)}}</view>
							<view class="color_6">市级价</view>
						</view>
						<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="productInfo" @confirm="productConfirm" @close="openProductModal=false" />
		<!-- 已选产品 -->
		<selectedProductsModal ref="selectedProducts" :openModal="openSelectedModal" :nowData="detailData" @edit="handleEdit" @confirm="handleChoose" @refreshTotal="selectedProductTotal" @close="openSelectedModal=false" />
		<!-- 弹框 -->
		<common-modal :openModal="commonModal" :content="modalText" @confirm="handleCommon" @cancel="handleCancel" @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, stockByProductSn } from '@/api/stock'
	import { salesDetail, supperCodeByVin, salesDetailInsert, salesDetailUpdate } from '@/api/sales'
	export default{
		components: { ProductSearch, ProductModal, SelectedProductsModal, commonModal },
		data(){
			return{
				toThousands,
				listData: [],
				pageNo: 1,
				pageSize: 6,
				totalNum: 0,
				noDataText: '暂无数据',
				searchParams: null,
				openModal: false,
				theme: '',
				salesInfo: null,  // 销售单信息
				scrollH: 0,
				openProductModal: false,  // 编辑产品信息弹框是否显示
				productData: null,  // 当前操作的产品信息
				productInfo: null,  // 添加/编辑产品需要的参数
				chooseType: 'add',  // 添加产品add,编辑产品edit
				commonModal: false,  // 公共弹框是否显示
				modalText: '',  // 公共弹框提示语
				commonType: 1,  // 公共弹框类型  1为添加产品时库存不足,2为编辑产品时库存不足,3为售价低于定价,4为售价低于成本价
				openSelectedModal: false,  // 已选产品弹框是否显示
				detailData: null,  // 销售单详情数据
				editInfo: 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))
				console.log(searchParams)
				if(searchParams){
					searchParams.brandName = undefined
					searchParams.nowData = undefined
					searchParams.warehouseName = undefined
					searchParams.cost = undefined
					searchParams.cityPrice = undefined
				}
				querySumByProductLocation(Object.assign(params, searchParams, { customerSn: this.salesInfo.buyerSn, salePriceType: this.salesInfo.priceType, salesBillSn: this.salesInfo.salesBillSn })).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){
				console.log(data)
				if(type == 'add'){
					this.productInfo = {
						productName: data.productName,
						productMainImage: data.productMainImage,
						productCode: data.productCode,
						productOrigCode: data.productOrigCode,
						warehouseName: data.warehouseName,
						warehouseLocationName: data.warehouseLocationName,
						price: data.price,
						qty: 1
					}
				}else if(type == 'edit'){
					this.productInfo = {
						productName: data.productName,
						productMainImage: data.productMainImage,
						productCode: data.productCode,
						productOrigCode: data.productOrigCode,
						warehouseName: data.warehouseEntity && data.warehouseEntity.name,
						warehouseLocationName: data.warehouseLocationEntity && data.warehouseLocationEntity.name,
						price: data.price,
						qty: data.qty
					}
				}
				this.openProductModal = true
				this.chooseType = type
				this.productData = data
			},
			// 已选产品  编辑
			handleEdit(data){
				console.log(data)
				this.handleAdd(data, 'edit')
			},
			// 选好了
			handleChoose(){
				uni.redirectTo({ url: '/pages/sales/edit?pageType=edit&data='+JSON.stringify(this.detailData) })
			},
			// 查看已选产品
			lookProduct(){
				this.openSelectedModal = true
			},
			// 确认产品信息
			productConfirm(data){
				this.editInfo = data
				if(this.chooseType == 'add'){
					this.validatePrice()  //验证  售价是否低于定价
				}else if(this.chooseType == 'edit'){
					this.validateStock()  //验证  库存是否不足
				}
			},
			// 售价低于定价
			validatePrice(){
				if (this.productData.lastSalePrice && (this.editInfo.price < this.productData.salePrice)) {  // 售价低于定价
					this.commonType = 1
					this.modalText = '售价低于定价,确认要添加吗?'
					this.commonModal = true
				}else{
					this.validateStock()  //验证  库存是否不足
				}
			},
			// 库存不足
			validateStock(){
				if(this.chooseType == 'add'){  // 添加产品
					if (this.productData.currentQty < this.editInfo.qty) {
						this.commonType = 2
						this.modalText = '库存不足,将产生急件,确认要添加吗?'
						this.commonModal = true
					}else{
						this.validateCost()  //验证  售价是否低于成本价
					}
				}else if(this.chooseType == 'edit'){  // 编辑产品
					//  校验库存
					stockByProductSn({ productSn: this.productData.productSn }).then(res => {
						if (res.status == 200) {
							console.log(!res.data.currentStockQty, this.editInfo.qty <= res.data.currentStockQty)
							console.log(!res.data.currentStockQty || this.editInfo.qty <= res.data.currentStockQty)
							if (res.data && (!res.data.currentStockQty || this.editInfo.qty <= res.data.currentStockQty)) {
								this.editProduct()
							} else {  // 库存不足
								this.commonType = 3
								this.modalText = '库存不足,将产生急件,确认修改吗?'
								this.commonModal = true
							}
						}
					})
				}
			},
			// 售价低于成本价
			validateCost(){
				if (this.productData.putCost > this.editInfo.price) {
					this.commonType = 4
					this.modalText = '售价低于成本价,确认要添加吗?'
					this.commonModal = true
				}else{
					this.addProduct()
				}
			},
			// 添加产品
			addProduct(){
				let params = {
					buyerSn: this.detailData.buyerSn,
					productSn: this.productData.productSn,
					cost: this.productData.putCost,
					price: this.editInfo.price,
					qty: this.editInfo.qty,
					salesBillSn: this.detailData.salesBillSn,
					salesBillNo: this.detailData.salesBillNo,
					warehouseSn: this.productData.warehouseSn,
					warehouseLocationSn: this.productData.warehouseLocationSn,
					stockSn: this.productData.stockSn
				}
				salesDetailInsert(params).then(res => {
					if(res.status == 200){
						this.changeList(params)  // 变更  列表产品可选状态
						this.selectedProductTotal()  // 已选产品合计
						this.commonModal = false
						this.openProductModal = false
					}
				})
			},
			// 编辑产品
			editProduct(){
				let params = {
					id: this.productData.id,
					qty: this.editInfo.qty,
					price: this.editInfo.price,
					productSn: this.productData.productSn,
					salesBillSn: this.detailData.salesBillSn,
				}
				salesDetailUpdate(params).then(res => {
					if(res.status == 200){
						this.$refs.selectedProducts.getList(1)
						this.selectedProductTotal()  // 已选产品合计
						this.commonModal = false
						this.openProductModal = false
					}
				})
			},
			// 更改产品列表参数
			changeList(params){
				this.listData.map(item => {
					if((item.stockSn == params.stockSn) && (item.warehouseLocationSn == params.warehouseLocationSn)){
						item.saleQty = 1  // 非0即可,用于判断是否显示添加产品按钮
					}
				})
			},
			// 公共弹框  确定
			handleCommon(){
				if(this.commonType == 1){  // 添加产品时售价低于定价
					this.validateStock()  //验证  库存是否不足
				}else if(this.commonType == 2){  // 添加产品时库存不足
					this.validateCost()  //验证  售价是否低于成本价
				}else if(this.commonType == 3){  // 编辑产品时库存不足
					this.editProduct()
				}else if(this.commonType == 4){  // 添加产品时售价低于成本价
					this.addProduct()
				}
			},
			// 公共弹框  取消
			handleCancel(){
				this.openProductModal = false
			},
			// 已选产品  提交
			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 0 16upx;
						font-size: 26upx;
						.pimgs{
							margin-right: 16upx;
						}
						.list-item-btn{
							.item-btn-add{
								padding: 30upx 30upx;
							}
						}
					}
					.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>