<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">{{ items.orderStatus }}</text>
				</view>
				<view class="list-border list-info-line" v-for="(item, index) in items.orderItemList" :key="index">
					<view class="list-info list-border">
						<view class=""><image class="list-image" :src="item.productImg" mode=""></image></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>交货时间：</text>
						<text>{{ 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: [],
			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()
				})
		}
	}
}
</script>

<style lang="scss">
.order-list {
	margin-bottom: 0px;
	.list-border {
		// border-top: 1px solid #dddddd;
		border-bottom: 1px solid #dddddd;
	}
	.list-title-line {
		line-height: 44px;
		padding-left: 24px;
	}
	.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: 24px;
		line-height: 35px;
	}
	.list-info-contant {
		margin-left: 24px;
	}
	.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: 32px;
		font-weight: 400;
	}
	.list-image {
		width: 100rpx;
		height: 100rpx;
		margin-top: 10px;
	}
	.list-info {
		display: flex;
	}
	.list-bottom-contant {
		line-height: 35px;
		padding-left: 24px;
	}
}
</style>
