<template>
	<view class="order-list">
		<uni-segmented-control :current="controlCurrent" :values="controlItems" @clickItem="onClickItem" styleType="text" activeColor="#007AFF"></uni-segmented-control>
		<scroll-list style="touch-action: none" ref="orderRef" :option="orderOption" @load="orderUp" @refresh="orderDown">
			<view v-for="(items, index) in orderData" :key="index">
				<view class="list-border list-title-line">
					<text class="list-title">广州民族印刷有限公司</text>
					<text class="list-title-Subtitle">{{controlItems[items.orderStatus-1]  }}</text>
				</view>
				<view class="list-border list-info-line" v-for="(item, index) in items.orderItemList" :key="index">
					<view class="list-info " :class="index===items.orderItemList.length?'list-border':''">
						<view class="">
							<!-- <image class="list-image" :src="item.productImg" mode=""></image> -->
							<image class="list-image" src="../../static/logo.png" mode="">
							</view>
						<view class="list-info-contant">
							<view class="list-info-title">{{ item.brandName }}{{ item.categoryName }}</view>
							<view class="list-info-text">
								{{ item.categoryName }}/{{ item.brandName }}/{{ item.gramWeight }}g/{{ item.length }}*{{ item.width }}/{{ item.pieceQuantity }}张
							</view>
						</view>
					</view>
				</view>
				<view class="list-border list-bottom-contant">
					<view>
						<text class="list-bottom-contant-text">交货时间：</text>
						<text class="list-bottom-contant-subtext">{{ items.deliveryDay }}天</text>
						<text class="list-title-Subtitle">¥{{ items.totalOfferPrice }}</text>
					</view>
				</view>
				<uGap></uGap>
			</view>
		</scroll-list>
	</view>
</template>

<script>
import uGap from '@/components/u-gap/u-gap.vue'
import scrollList from '@/components/scroll-list/scroll-list.vue'
import { getEnterpriseList, gettradingHallList } from '@/apis/trade'
export default {
	// props: {
	// 	queryOrderData: {
	// 		type: Object,
	// 		default: () => {}
	// 	}
	// },
	components: {
		uGap
	},

	data() {
		return {
			orderPagination: {
				pageNum: 0, // 初始会执行一次下拉加载
				pageSize: 10
			},
			orderData: [],
			controlCurrent: 0,
			controlItems: ['全部', '待确认', '待发货', '已完成'],
			orderOption: {
				size: 10,
				auto: true,
				emptyText: '暂无报价信息~',
				background: '#F7F8FA',
				fontSize: '40rpx'
			},
			orderParams: {
				cooperationState: 0,
				latitude: 23.12616,
				longitude: 113.38466,
				km: 5
			}
		}
	},
	watch: {
		// queryOrderData(value) {
		// 	console.log('value', value)
		// },
		orderParams: {
			handler(val) {
				this.getTradingQurty()
			},
			deep: true
		}
	},
	onLoad(option) {
		if (option) {
			option.latitude && (this.params.latitude = option.latitude)
			option.longitude && (this.params.longitude = option.longitude)
			option.km && (this.params.km = option.km)
		}
		this.getTradingQurty()
	},
	methods: {
		// 获取订单列表
		getTradingQurty() {
			return new Promise((resolve, reject) => {
				gettradingHallList({ ...this.orderParams, ...this.orderPagination })
					.then(res => {
						if (res) {
							if (this.orderPagination.pageNum == 1) {
								this.orderData = res.records
							} else {
								this.orderData = this.orderData.concat(res.records)
							}
							resolve({ list: this.orderData, total: res.total })
						}
					})
					.catch(err => {
						reject(err)
					})
			})
		},
		//订单分页
		orderUp(page) {
			this.orderPagination.pageNum++
			this.getTradingQurty()
				.then(({ list, total }) => {
					this.$refs.orderRef.loadSuccess({ list, total })
				})
				.catch(() => {
					this.$refs.orderRef.loadFail()
				})
		},
		//订单分页
		orderDown() {
			this.orderPagination.pageNum = 1
			this.getTradingQurty()
				.then(({ list, total }) => {
					this.$refs.orderRef.refreshSuccess({ list, total })
				})
				.catch(() => {
					this.$refs.orderRef.refreshFail()
				})
		},
		//分段器点击事件
		onClickItem(value) {
			console.log(value)
		}
	}
}
</script>

<style lang="scss">
.order-list {
	margin-bottom: 0px;
	background: #FFFFFF;
	.list-border {
		border-bottom: 2rpx solid #dddddd;
	}
	.list-title-line {
		line-height: 88rpx;
		padding-left: 48rpx;
		width: 750rpx;
		height: 88rpx;
		background: #FFFFFF;
	}
	.list-title {
		font-family: PingFangSC-Semibold;
		font-size: 30rpx;
		color: #000000;
		letter-spacing: 0;
		font-weight: 600;
	}
	.list-title-Subtitle {
		font-family: PingFangSC-Medium;
		font-size: 30rpx;
		color: #ff5368;
		letter-spacing: 0;
		text-align: right;
		font-weight: 500;
		float: right;
		margin-right: 32rpx;
	}
	.list-info-line {
		padding-left: 48rpx;
		line-height: 70rpx;
		// width: 750rpx;
		// height: 88rpx;
		background: #FFFFFF;
	}
	.list-info-contant {
		margin-left: 48rpx;
	}
	.list-info-title {
		font-family: PingFangSC-Medium;
		font-size: 30rpx;
		color: #333333;
		letter-spacing: 0;
		text-align: left;
		font-weight: 550;
	}
	.list-info-text {
		font-family: PingFangSC-Regular;
		font-size: 26rpx;
		color: #888888;
		letter-spacing: 0;
		text-align: left;
		line-height: 64rpx;
		font-weight: 400;
	}
	.list-image {
		width: 100rpx;
		height: 100rpx;
		margin-top: 20rpx;
	}
	.list-info {
		display: flex;
	}
	.list-bottom-contant {
		line-height: 70rpx;
		padding-left: 48rpx;
		width: 750rpx;
		height: 80rpx;
		background: #FFFFFF;
		.list-bottom-contant-text{
			font-size: 26rpx;
			color: #888888;
			letter-spacing: 0;
			line-height: 32rpx;
			font-weight: 400;
		}
		.list-bottom-contant-subtext{
			font-size: 26rpx;
			color: #333333;
			letter-spacing: 0;
			line-height: 32rpx;
			font-weight: 400;
		}
	}
}
</style>
