<template>
	<view class="quotation-list">
		<scroll-list ref="quotationRef" :option="option" @load="quotationUp" @refresh="quotationDown">
			<view  v-for="(item,index) in quotationData" :key="index">
				<view class="list-border list-title-line">
					<text class="list-title">广州民族印刷有限公司</text>
					<text class="list-title-Subtitle">待报价</text>
				</view>
				<view class="list-border list-info-line">
					<view class="list-info list-border">
						<view class=""><image class="list-image" src="../../static/logo.png" mode=""></image></view>
						<view class="list-info-contant">
							<view class="list-info-title">金蝶蓝白卡</view>
							<view class="list-info-text">白卡纸/金蝶蓝/350g/787*1092/2200张</view>
						</view>
					</view>
					<view class="list-info">
						<view class=""><image class="list-image" src="../../static/logo.png" mode=""></image></view>
						<view class="list-info-contant">
							<view class="list-info-title">金蝶蓝白卡</view>
							<view class="list-info-text">白卡纸/金蝶蓝/350g/787*1092/2200张</view>
						</view>
					</view>
				</view>
				<view class="list-border list-bottom-contant">
					<view>
						<text>交货时间：</text>
						<text>3天</text>
					</view>
					<view>
						<text>交货区域：</text>
						<text>3天</text>
					</view>
					<view class="offer-class">
						<view class="offer-width">
							<text>报价截止：</text>
							<text>3天</text>
						</view>
						<view>
							<button type="primary" class="offer-btn" @click="offerClick()">报价</button>
						</view>
					</view>
				</view>
				<uGap></uGap>
			</view>
		</scroll-list>
		<view>
			<view class="offer-prices" @click="nativeTo()">
				<image class="my-image" src="../../static/imgs/tabbar/trade-gray.png" mode=""></image>
				<view class="my-price">
					我的报价
				</view>
			</view>
		</view>
	</view>
	
</template>

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

	data() {
		return {
			option: {
				size: 10,
				auto: true,
				emptyText: '暂无报价信息~',
				background: '#F7F8FA',
				fontSize: '40rpx'
			},
			params: {
			 cooperationState: 0,
				latitude: 23.12616,
				longitude: 113.38466,
				km: 5
			},
			pagination: {
				pageNum: 0, // 初始会执行一次下拉加载
				pageSize: 10
			},
			quotationData:[]
		}
	},
	watch: {
		params: {
			handler(val) {
				this.getQuotationQurty()
			},
			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.getQuotationQurty()
	},
	methods: {
		// 获取报价列表
		getQuotationQurty() {
			return new Promise((resolve, reject) => {
				getEnterpriseList({ ...this.params, ...this.pagination })
					.then(res => {
						if (res) {
							if (this.pagination.pageNum == 1) {
								// this.quotationData = res.records
								this.quotationData = []
								this.quotationData = [{ name: '111', id: '222' }, { name: '111', id: '222' }]
							} else {
								this.quotationData = this.quotationData.concat(res.records)
							}
							console.log('this.quotationData', res)
							resolve({ list: this.quotationData, total: res.total })
						}
					})
					.catch(err => {
						reject(err)
					})
			})
		},
		
		//报价分页
		quotationUp(page) {
			this.pagination.pageNum++
			this.getQuotationQurty()
				.then(({ list, total }) => {
					this.$refs.quotationRef.loadSuccess({ list, total })
				})
				.catch(() => {
					this.$refs.quotationRef.loadFail()
				})
		},
		//报价分页
		quotationDown() {
			this.pagination.pageNum = 1
			this.getQuotationQurty()
				.then(({ list, total }) => {
					this.$refs.quotationRef.refreshSuccess({ list, total })
				})
				.catch(() => {
					this.$refs.quotationRef.refreshFail()
				})
		},
		// 报价按钮事件
		offerClick(){},
		// 我的报价页面跳转事件
		nativeTo(){
			console.log(11)
			uni.navigateTo({
			    url: 'my-offer'
			});
		},
	}
}
</script>

<style lang="scss">
.quotation-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;
		padding-bottom: 24px;
	}
	.my-image {
		width: 32rpx;
		height: 32rpx;
	}
	.my-price {
		font-family: PingFangSC-Medium;
		font-size: 18rpx;
		color: #007AFF;
		text-align: center;
		font-weight: 500;
		white-space: nowrap;
	}
	.offer-class{
		display: flex;
	}
	.offer-btn{
		width: 150rpx;
		height: 64rpx;
		line-height: 55rpx;
		background: #007AFF;
		border: 1px solid #007AFF;
		border-radius: 8px;
	}
	.offer-width{
		width: 70%;
	}
	.offer-prices{
		position: absolute;
		    z-index: 9999;
		    right: 4.3%;
		    bottom: 7.3%;
		    background-color: #ffffff;
		    border-radius: 50%;
		    padding: 10rpx;
		    text-align: center;
		    width: 100rpx;
		    height: 100rpx;
			border: 2px solid #F9F9F9;
			box-shadow: 0px 4px 34px 0px rgba(0,0,0,0.2);
	}
}
</style>
