<template>
	<view class="content">
		<view class="top">
			<u-search placeholder="输入编号/客户号/车牌号" v-model="inputKeyword" @search="getList(true)"></u-search>
			<view class="dropdown">
				<view class="left" @click="selectWarehouse">
					<view>{{warehouseName}}</view>
					<u-icon name="arrow-down" color=""></u-icon>
				</view>
				<!-- <view class="right">
					<u-icon name="checkmark-circle-fill" color="#22C572"></u-icon>
					<view class="default">默认</view>
				</view> -->
			</view>
			<u-select v-model="isShowWarehouse" :default-value='[0]' :list="warehouseList" @confirm="confirmWarehouse">
			</u-select>
		</view>
		<view class="middle">
			<view class="item-style" v-for="(item,index) in dataList" :key="index">
				<view class="row1">
					<view class="row1-left">
						<view class="left status1" v-if="item.status=='已质检'">检</view>
						<view class="left status2" v-if="item.status=='已称皮重'">皮</view>
						<view class="left status3" v-if="item.status=='已称毛重'">毛</view>
						<view>
							<view class="top-title">
								{{item.number}}
							</view>
							<view class="bottom">{{item.updateDate}}</view>
						</view>
					</view>
					<view class="right">{{item.customer}}</view>
				</view>
				<view class="row2" v-if="item.paymentManagement">
					<view>{{item.paymentManagement.customerName}}</view>
					<view>{{item.paymentManagement.carNo}}</view>
					<view>{{item.paymentManagement.goodsName}}（{{item.qualityInspectionManagement.waterContent}}水）</view>
				</view>
				<view class="row3">
					<view class="row3-item">
						<view class="left">毛</view>
						<view>{{item.grossWeight?item.grossWeight:'未称重'}}</view>
					</view>
					<view class="row3-item">
						<view class="left">皮</view>
						<view>{{item.tare?item.tare:'未称重'}}</view>
					</view>
					<view class="row3-item">
						<view class="left">净</view>
						<view>{{item.netWeight?item.netWeight:'未称重'}}</view>
					</view>
				</view>
				<view class="row4">
					<view v-if="item.status!='已称皮重'" class="right" @click="grossWeightClick(item)">毛重</view>
					<view v-if="(!(item.paymentManagement&&item.paymentManagement.status=='已收款')||
					!(item.paymentManagement&&item.paymentManagement.status=='部分收款')) && item.status!='已质检'"
					 class="right" @click="tareClick(item)">皮重</view>
				</view>
			</view>
		</view>
		<view v-show="isContent">
			<uni-load-more :status="loadStatus"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				inputKeyword: '',
				warehouseName: '',
				warehouseId: '',
				isShowWarehouse: false,
				warehouseList: [],
				isContent:false,
				loadStatus:'noMore',
				dataList: [],
				pageSize:10,
				currentPage:1,
			}
		},
		onShow() {
			this.$api.doRequest('get', '/commonUser/api/checkSession').then(res => {
					if (res.data.data == "INVALID") {
						uni.showModal({
							title: "登录提示",
							content: "Session过期需要重新登录,是否立即登录",
							showCancel: true,
							confirmText: '登录',
							success(e) {
								if (e.confirm) {
									uni.navigateTo({
										url: '/pages/public/login'
									})
								}
							}
						})
					} else {
						this.compId = uni.getStorageSync('pcUserInfo').compId
						console.log("compId", this.compId)
						this.loadData()
					}
				})
				.catch(res => {
					if (res.message) {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						})
					}
				});
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onPullDownRefresh() {
			this.currentPage=1
			this.gridList=[]
			this.getList(true)
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		 onReachBottom() {
			 this.currentPage+=1
		    this.getList(false)
			// this.getMoreNews()
		},
		methods: {
			loadData() {
				this.$api.doRequest('get', '/warehouseBaseInfo/selectWarehouseSelf', {
					compId: '',
					personCharge:this.userInfo.phone
				}).then(res => {
					console.log("warehouseBaseInfo", res)
					let _resData = res.data.data
					this.warehouseList = []
					for (let i = 0; i < _resData.length; i++) {
						let _obj = {
							"label": _resData[i].warehouseName,
							"value": _resData[i].id,
						}
						this.warehouseList.push(_obj)
					}
					this.warehouseName = this.warehouseList[0].label
					this.warehouseId = this.warehouseList[0].value
					this.getList(true)
				})
			},
			//获取列表
			getList(flag) {
				this.$api.doRequest('get', '/weighingManagement/selectWeighingManagement', {
					compId: '',
					currentPage: this.currentPage,
					pageSize:this.pageSize,
					searchKeyWord: this.inputKeyword,
					warehouseName: this.warehouseName,
					managementType: 1,
				}).then(res => {
					var data=res.data.data.records
					if(flag){
						this.dataList = data
					}
					else{
						this.dataList = this.dataList.concat(data)
					}
					if(res.data.data.records.length==0){
						this.isContent=true
					}
					console.log("--------------------------------")
					console.log("this.dataList",this.dataList)
				})
			},
			selectWarehouse() {
				this.isShowWarehouse = true
			},
			confirmWarehouse(e) {
				console.log(e)
				this.warehouseName = e[0].label
				this.dataList.warehouseName = e[0].label;
				this.getList(true)
			},
			//毛重
			grossWeightClick(val) {
				console.log(val)
				val.warehouseName = this.warehouseName
				val.warehouseId = this.warehouseId
				uni.navigateTo({
					url: './grossWeightDetail?detailData=' + JSON.stringify(val)
				})
			},
			tareClick(val) {
				val.warehouseName = this.warehouseName
				val.warehouseId = this.warehouseId
				uni.navigateTo({
					url: './tareDetail?detailData=' + JSON.stringify(val)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.top {
		background: white;
		padding: 20rpx;
		border-radius: 0 0 20rpx 40rpx;
	}

	.dropdown {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		margin: 20rpx 0;
		padding: 0 13rpx;

		.right,
		.left {
			display: flex;
			align-items: center;
		}
	}

	.item-style {
		background: white;
		margin: 20rpx;
		padding: 20rpx;

		.row1 {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.row1-left {
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.left {
					margin-right: 20rpx;
				}

				.top-title {
					font-size: 32rpx;
					font-weight: 600;
					color: #333333;
				}

				.bottom {
					color: #878C9C;
				}

				.right {
					font-size: 28rpx;
					font-weight: 600;
					color: #333333;
				}

			}
		}

		.row2 {
			display: flex;
			background: #F9F9FA;
			border-radius: 10rpx;
			padding: 10rpx 0;
			justify-content: space-around;
			margin: 20rpx 0;
			color: #878C9C;
			padding-left: 24rpx;
			align-items: center;
		}

		.row3 {
			display: flex;
			margin-top: 30rpx;
			padding-left: 14rpx;
			.row3-item {
				display: flex;
				margin-right: 40rpx;
				align-items: center;
				.left {
					background: #22C572;
					border-radius: 10rpx;
					padding: 2rpx 10rpx;
					box-sizing: border-box;
					color: white;
					font-size: 12px;
					margin-right: 15rpx;
				}
			}
		}

		.row4 {
			display: flex;
			justify-content: flex-end;
			margin-top: 10px;

			.right {
				border: 1px solid #CDCDCD;
				border-radius: 45rpx;
				padding: 10rpx 30rpx;
				margin-left: 20rpx;
			}
		}

	}
	.status1,.status2,.status3{
		padding: 8rpx 12rpx;
		border-radius: 50%;
		color: white;
	}
	.status1{
		background: #FD714F;
	}
	.status2{
		background: #22C572;
	}
	.status3{
		background: #3296FA;
	}
</style>
