<template>
	<view class="selectedProducts-modal">
		<u-popup v-model="isShow" @close="isShow=false" height="790" mode="bottom" z-index="9999">
			<!-- 已选产品 -->
			<scroll-view class="product-list-con" scroll-y @scrolltolower="onreachBottom">
				<view class="product-list-item flex align_center justify_between" v-for="(item, index) in listData" :key="item.id">
					<view class="product-item-main font_13 flex_1" @click="handleEdit(item)">
						<view class="product-item-name">{{item.productName || '--'}}</view>
						<view class="flex align_center justify_between">
							<view>{{item.productCode || '--'}}</view>
							<view class="color_6" style="font-size: 24upx;" v-if="item.warehouseEntity&&item.warehouseEntity.name || item.warehouseLocationEntity&&item.warehouseLocationEntity.name">{{item.warehouseEntity&&item.warehouseEntity.name}} > {{item.warehouseLocationEntity&&item.warehouseLocationEntity.name}}</view>
							<u-tag v-if="item.oosFlag==1" text="急件" type="error" mode="light" shape="circle" size="mini" style="vertical-align: text-top;" />
						</view>
						<view class="product-item-priceInfo">
							<view :style="{color: $config('errorColor'), display: 'inline-block'}">￥<text style="font-size: 30upx;">{{toThousands(item.price||0, 2)}}</text></view>
							<text style="display: inline-block;margin: 0 10upx;">X</text> 
							<text style="font-size: 30upx;">{{toThousands(item.qty||0)}}</text>
							{{item.productUnit}}
						</view>
					</view>
					<view class="btn-box">
						<u-icon @click="handleDel(item, index)" name="trash" :color="$config('errorColor')" size="34"></u-icon>
					</view>
				</view>
				<view v-if="listData && listData.length == 0">
					<u-empty :src="`/static/${$config('themePath')}/def_no_data@3x.png`" icon-size="150" :text="noDataText" mode="list" :margin-top="50"></u-empty>
				</view>
				<view style="padding: 20upx;">
					<u-loadmore v-if="totalNum>listData.length || status=='loading'" :status="status" />
				</view>
			</scroll-view>
			<!-- 合计 -->
			<view ref="productTotal" class="selected-box flex align_center justify_between">
				<view class="choose-info flex_1 flex align_center justify_between" @click="isShow=false">
					<text>已选 {{nowData && (nowData.totalCategory || nowData.totalCategory==0) ? toThousands(nowData.totalCategory) : '--'}} 款，合计 ￥{{nowData && (nowData.totalAmount || nowData.totalAmount==0) ? toThousands(nowData.totalAmount, 2) : '--'}}</text>
					<u-icon name="arrow-down" :color="$config('primaryColor')" size="34" class="close-circle"></u-icon>
				</view>
				<view class="choose-btn" @click="handleChoose" :style="{backgroundColor: $config('primaryColor')}">选好了</view>
			</view>
		</u-popup>
		<!-- 弹框 -->
		<common-modal :openModal="commonModal" content="确认要删除吗？" @confirm="handleCommon" @close="commonModal=false" />
	</view>
</template>

<script>
	import commonModal from '@/pages/common/commonModal.vue'
	import { toThousands } from '@/libs/tools'
	import { salesDetailList, salesDetailDel } from '@/api/sales'
	export default {
		components: { commonModal },
		props: {
			openModal: { //  弹框显示状态
				type: Boolean,
				default: false
			},
			nowData: {
				type: Object,
				default: ()=>{
					return null
				}
			}
		},
		data() {
			return {
				isShow: this.openModal, //  是否打开弹框
				listData: [],
				pageNo: 1,
				pageSize: 6,
				totalNum: 0,
				noDataText: '暂无数据',
				status: 'loadmore',
				toThousands,
				theme: '',
				commonModal: false,
				infoData: null,  // 
				detailData: null
			}
		},
		mounted() {
			this.theme = getApp().globalData.theme
		},
		methods: {
			// 列表
			getList(pageNo){
				const _this = this
				if (pageNo) {
					this.pageNo = pageNo
				}
				let params = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					salesBillSn: this.nowData && this.nowData.salesBillSn
				}
				this.status = "loading"
				salesDetailList(params).then(res => {
					if (res.status == 200) {
						if(res.data && res.data.list){
							res.data.list.map(item => {
								item.productName = item.productEntity && item.productEntity.name || item.dealerProductEntity && item.dealerProductEntity.name
								item.productCode = item.productEntity && item.productEntity.code || item.dealerProductEntity && item.dealerProductEntity.code
								item.productUnit = item.productEntity && item.productEntity.unit || item.dealerProductEntity && item.dealerProductEntity.unit
							})
							if(this.pageNo>1){
								this.listData = this.listData.concat(res.data && res.data.list || [])
							}else{
								this.listData = res.data.list || []
							}
						}else{
							this.listData = []
						}
						this.totalNum = res.data && res.data.count || 0
					} else {
						this.listData = []
						this.totalNum = 0
						this.noDataText = res.message
					}
					this.status = "loadmore"
				})
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				if(this.listData.length < this.totalNum){
					this.pageNo += 1
					this.getList()
				}
			},
			// 编辑产品
			handleEdit(data){
				this.$emit('edit', data)
			},
			// 已选产品  删除
			handleDel(data, ind){
				this.infoData = data
				this.infoData.no = ind
				this.commonModal = true
			},
			// 删除
			handleCommon(){
				salesDetailDel({ id: this.infoData.id }).then(res => {
					if(res.status == 200){
						this.getList(1)  // 已选产品列表
						this.commonModal = false
						this.$emit('delete', this.infoData)
					}
				})
			},
			// 选好了
			handleChoose(){
				this.$emit('confirm')
			},
			// 已选产品合计
			selectedProductTotal(){
				salesDetail({ id: this.infoData.id }).then(res => {
					if(res.status == 200){
						this.detailData = res.data
					}else{
						this.detailData = null
					}
				})
			},
		},
		watch: {
			//  父页面传过来的弹框状态
			openModal (newValue, oldValue) {
				this.isShow = newValue
			},
			//  重定义的弹框状态
			isShow (newValue, oldValue) {
				if (!newValue) {
					this.$emit('close')
				}else{
					this.getList(1)  // 已选产品列表
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.selectedProducts-modal{
		.product-list-con{
			height: 700upx;
			padding: 20upx 20upx 30upx;
			box-sizing: border-box;
			.product-list-item{
				border-bottom: 1px solid #e4e7ed;
				padding: 20upx 0;
				.product-item-main{
					.product-item-name{
						padding: 6upx 0;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						line-clamp: 1;
						-webkit-box-orient: vertical;
						font-weight: bold;
					}
				}
				.btn-box{
					padding: 30upx 30upx;
				}
			}
			.product-list-item:last-child{
				border: none;
			}
		}
		.selected-box{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			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>
