<template>
	<view class="quotation-details">
		<view>
			<uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="">
				<view class="submit-title">报价详情</view>
				<view slot="left"></view>
				<view slot="right" class="edit-price" v-if="upDataObj.replyStatus !== 30102" @click="editPrice()">修改报价</view>
			</uni-nav-bar>
		</view>
		<view class="submit-main">
			<view>
				<text class="submit-main-title">交货要求</text>
				<text class="" :class="upDataObj.replyStatus === 30102 ?'price-tips-gq':'price-tips'">{{ upDataObj.replyStatus | replyFilter }}</text>
			</view>
			<view>
				<text class="submit-main-subTitle">询价客户：</text>
				<text class="submit-main-subContant">{{ upDataObj.belongEnterpriseName }}</text>
			</view>
			<view>
				<text class="submit-main-subTitle">交货区域：</text>
				<text class="submit-main-subContant">{{ upDataObj.deliveryArea }}</text>
			</view>
			<view>
				<text class="submit-main-subTitle">交货时间：</text>
				<text class="submit-main-subContant">{{ upDataObj.deliveryDay }}</text>
			</view>
		</view>
		<uGap></uGap>
		<view class="submit-contant" v-for="(items, index) in upDataObj.itemList" :key="index">
			<view class="submit-contant-head">
				<view class="submit-contant-title">{{ items.brandName }}|{{ items.gramWeight }}|{{ items.length }}*{{ items.width }}|{{ items.quantity }}</view>
			</view>
			<view class="submit-contant-body">
				<view class="">
					<text class="submit-contant-body-title">重量(吨)：</text>
					<text class="submit-contant-body-subtitle">{{ items.wight }}</text>
				</view>
				<view>
					<text class="submit-contant-body-title">单价(元/吨)：</text>
					<text class="submit-contant-body-subtitle">{{ items.unitFee }}</text>
				</view>
				<view>
					<text class="submit-contant-body-title">小计(元)：</text>
					<text class="submit-contant-body-subtitle">{{ items.totalPrice }}</text>
				</view>
				<view class="submit-contant-body-input">
					<uni-easyinput :disabled="true" maxlength="100" class="submit-contant-body-inputClass" v-model="value" placeholder="请输入内容"></uni-easyinput>
				</view>
			</view>
		</view>
		<view class="submit-contant-order">
			<view class="">
				<text class="submit-contant-order-title">其他费用：</text>
				<text class="submit-contant-order-subtitle">¥ {{ upDataObj.otherFee }}</text>
			</view>
			<view class="">
				<text class="submit-contant-order-title">合计：</text>
				<text class="submit-contant-order-money">¥ {{ upDataObj.totalAllPrice }}</text>
			</view>
		</view>
		<uGap></uGap>
		<view class="submit-contant-time">
			<view class="">
				<text class="submit-contant-time-title">有效时间：</text>
				<text class="submit-contant-time-title">{{ upDataObj.enquiryValidTime }}</text>
			</view>
		</view>
		<uGap></uGap>
		<view class="submit-contant-remark">
			<view class="submit-contant-remark-title">
				<text>报价备注:</text>
				<text>29号5点前能送达。</text>
			</view>
		</view>
		<view class="tips"><text>注：禁止偷克重、抵纸换纸，否则将被平台严厉处罚！包括但不限于账号禁用。</text></view>
	</view>
</template>

<script>
import { back, go2 } from '@/utils/hook.js'
import qnHeader from '@/components/qn-header/qn-header.vue'
import uGap from '@/components/u-gap/u-gap.vue'
import { enquiryReplyDetail } from '@/apis/trade.js'
export default {
	components: {
		qnHeader,
		uGap
	},
	filters: {
		replyFilter(value) {
			var abs = ''
			if (value) {
				// 30128 待报价 30130 已报价 30139 转化订单 30102 已失效
				switch (value) {
					case 30128:
						abs = '待报价'
						break
					case 30130:
						abs = '已报价'
						break
					case 30139:
						abs = '转化订单'
						break
					case 30102:
						abs = '已失效'
						break
					default:
						break
				}
			}
		}
	},
	data() {
		return {
			value: '',
			visible: true,
			title: 'picker-view',
			upDataObj: {
				belongEnterpriseName: '东莞市隆兴纸业有限公司',
				deliveryArea: '广东省/广州市/天河区',
				deliveryDay: '2021/12/29 12:30',
				enquiryValidTime: [12, 11, 10],
				itemList: []
			}
		}
	},
	onLoad(Option) {
		this.getDetail(Option.id)
	},
	methods: {
		back,
		// 获取详情
		getDetail(id) {
			enquiryReplyDetail(id)
				.then(res => {
					if (res) {
						this.upDataObj = res
						var timeb = this.upDataObj.enquiryValidTime.split(' ')
						var timeabs = timeb[1].split(':')
						this.$set(this.upDataObj, 'enquiryValidTimeSplit', timeabs)
						this.$set(this.upDataObj, 'otherFee', 0)
						this.$set(this.upDataObj, 'totalAllPrice', 0)
						this.priceFree()
					}
				})
				.catch(err => {
					reject(err)
				})
		},
		// 商品操作按钮
		commodityModify(item) {
			console.log(111)
			this.$refs.popup.open('bottom')
		},
		// 单价操作按钮
		priceModify() {
			this.$refs.popupPrice.open('bottom')
		},
		// 事件设置
		resetTime() {
			this.$refs.popupTime.open('bottom')
		},
		// 事件选择change事件
		bindChange(e) {
			console.log(e.detail.value)
		},
		priceFree() {
			for (let i = 0; i < this.upDataObj.itemList.length; i++) {
				var totalAllPrice = parseFloat(this.upDataObj.totalAllPrice) + parseFloat(this.upDataObj.itemList[i].totalPrice)
				this.upDataObj.totalAllPrice = totalAllPrice.toFixed(2)
				var otherFee = parseFloat(this.upDataObj.otherFee) + parseFloat(this.upDataObj.itemList[i].otherFee)
				this.upDataObj.otherFee = otherFee.toFixed(2)
			}
		},
		close() {
			this.$refs.popup.close()
			this.$refs.popupPrice.close()
		},
		// 纸张选择下拉change事件
		onchange(e) {
			console.log(e)
			this.pickerValue = e.detail.value
		},
		// 时间设置取消
		pickerCancel() {
			this.$refs.popupTime.close()
		},
		// 时间设置确认
		pickerSure() {
			this.$refs.popupTime.close()
		},
		// 修改报价按钮
		editPrice() {
			var params = {
				title: '修改报价'
			}
			go2('submit-quotation', params)
		}
	}
}
</script>

<style lang="scss">
.picker-view {
	width: 750rpx;
	height: 600rpx;
	margin-top: 20rpx;
}
.item {
	height: 50rpx;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding-top: 30rpx;
}
.quotation-details {
	.submit-title {
		width: 100%;
		font-family: PingFangSC-Medium;
		font-size: 36rpx;
		color: #000000;
		letter-spacing: 0;
		text-align: center;
		font-weight: 500;
	}
	.submit-main {
		width: 750rpx;
		height: 260rpx;
		padding: 24rpx 0rpx 0rpx 32rpx;
		line-height: 52rpx;
		background: #ffffff;
		.submit-main-title {
			font-family: PingFangSC-Medium;
			font-size: 30rpx;
			color: #000000;
			letter-spacing: 0;
			font-weight: 500;
		}
		.submit-main-subTitle {
			font-family: PingFangSC-Regular;
			font-size: 28rpx;
			color: #888888;
			letter-spacing: 0;
			font-weight: 400;
		}
		.submit-main-subContant {
			font-family: PingFangSC-Regular;
			font-size: 28rpx;
			color: #333333;
			letter-spacing: 0;
			font-weight: 400;
		}
	}
	.submit-deadline {
		width: 750rpx;
		height: 75rpx;
		background: #f4f9fc;
		box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(100, 101, 102, 0.12);
		display: flex;
		justify-content: center;
		.submit-text {
			font-family: PingFangSC-Medium;
			font-size: 28rpx;
			color: rgba(0, 0, 0, 0.5);
			letter-spacing: 0;
			font-weight: 500;
			margin-top: 22rpx;
			width: 130rpx;
		}
		.submit-time {
			width: 40rpx;
			height: 40rpx;
			background: #ee0a24;
			border-radius: 8rpx;
			margin-top: 20rpx;
			text-align: center;
		}
		.submit-time-text {
			font-family: PingFangSC-Semibold;
			font-size: 24rpx;
			color: #ffffff;
			text-align: center;
			line-height: 32rpx;
			font-weight: 600;
		}
		.sbumit-colon {
			width: 24rpx;
			height: 32rpx;
			font-family: PingFangSC-Regular;
			font-size: 24rpx;
			color: #ee0a24;
			text-align: center;
			line-height: 32rpx;
			font-weight: 400;
			margin-top: 20rpx;
		}
	}
	.submit-contant {
		background-color: #ffffff;
		// height: 368rpx;
		border-bottom: 2rpx solid #dddddd;
		padding-bottom: 20rpx;
		.submit-contant-head {
			line-height: 90rpx;
			width: 750rpx;
			height: 90rpx;
			border-bottom: 2rpx dashed #d8d8d8;
			display: flex;
			justify-content: space-between;
		}
		.submit-contant-title {
			font-family: PingFangSC-Semibold;
			font-size: 30rpx;
			color: rgba(0, 0, 0, 0.75);
			letter-spacing: 0;
			text-align: left;
			font-weight: 600;
			padding: 0rpx 0rpx 0rpx 32rpx;
		}
		.submit-contant-body {
			line-height: 68rpx;
			padding-left: 32rpx;
			.submit-contant-body-title {
				font-family: PingFangSC-Regular;
				font-size: 28rpx;
				color: #555555;
				letter-spacing: 0;
				font-weight: 400;
			}
			.submit-contant-body-subtitle {
				font-family: PingFangSC-Regular;
				font-size: 28rpx;
				color: #555555;
				letter-spacing: 0;
				font-weight: 400;
				float: right;
				margin-right: 32rpx;
			}
			.submit-contant-body-input {
				margin-right: 32rpx;
			}
			.submit-contant-body-inputClass {
				background-color: #f7f8fa;
			}
		}
	}
	.submit-contant-order {
		width: 750rpx;
		height: 90rpx;
		line-height: 90rpx;
		background: #ffffff;
		display: flex;
		padding-left: 32rpx;
		padding-right: 32rpx;
		justify-content: space-between;
		.submit-contant-order-title {
			width: 140rpx;
			height: 40rpx;
			font-family: PingFangSC-Regular;
			font-size: 28rpx;
			color: rgba(0, 0, 0, 0.5);
			font-weight: 400;
		}
		.submit-contant-order-subtitle {
			width: 101rpx;
			height: 40rpx;
			font-family: PingFangSC-Regular;
			font-size: 28rpx;
			color: rgba(0, 0, 0, 0.5);
			letter-spacing: 0;
			text-align: left;
			font-weight: 400;
		}
		.submit-contant-order-money {
			width: 172rpx;
			height: 42rpx;
			font-family: PingFangSC-Semibold;
			font-size: 40rpx;
			color: #f5222d;
			letter-spacing: 0;
			line-height: 42rpx;
			font-weight: 600;
		}
	}
	.submit-contant-time {
		width: 750rpx;
		height: 88rpx;
		background: #ffffff;
		line-height: 88rpx;
		display: flex;
		padding-left: 32rpx;
		padding-right: 32rpx;
		justify-content: space-between;
		.submit-contant-time-title {
			width: 230rpx;
			height: 40rpx;
			font-size: 28rpx;
			color: #000000;
			letter-spacing: 0;
			font-weight: 400;
		}
		.submit-contant-time-subtitle {
			width: 56rpx;
			height: 40rpx;
			font-size: 28rpx;
			color: #007aff;
			letter-spacing: 0;
			text-align: right;
			font-weight: 500;
			cursor: pointer;
		}
	}
	.submit-contant-remark {
		width: 750rpx;
		height: 88rpx;
		background: #ffffff;
		.submit-contant-remark-title {
			font-family: PingFangSC-Regular;
			font-size: 30rpx;
			color: #000000;
			letter-spacing: 0;
			font-weight: 400;
			padding: 28rpx 0rpx 0rpx 32rpx;
		}
		.submit-contant-remark-input {
			background: #f7f8fa;
			border-radius: 20rpx;
			margin: 10rpx 32rpx 32rpx 32rpx;
			width: 686rpx;
		}
	}
	.submit-btnBg {
		width: 750rpx;
		height: 120rx;
		background: #ffffff;
		box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(100, 101, 102, 0.12);
		padding: 12rpx 32rpx 12rpx 32rpx;
	}
	.submit-btn {
		width: 686rpx;
		height: 96rpx;
		background: #007aff;
		border-radius: 10rpx;
	}
	.submit-image {
		width: 24.38rpx;
		height: 20.38rpx;
		margin-right: 32rpx;
		cursor: pointer;
	}
	.submit-image-price {
		width: 24.38rpx;
		height: 20.38rpx;
		margin-left: 14rpx;
		cursor: pointer;
	}
	.submit-popup {
		width: 750rpx;
		height: 960rpx;
		background: #ffffff;
		border-top-right-radius: 2rpx;
		border-top-left-radius: 2rpx;
		padding: 20rpx 32rpx 0rpx 32rpx;
		// line-height: 124rpx;
		.submit-popup-input {
			background-color: #f5f5f5;
		}
		.submit-popup-close {
			display: flex;
			justify-content: space-between;
		}
		.submit-popup-close-image {
			width: 24.38rpx;
			height: 20.38rpx;
			cursor: pointer;
		}
		.submit-popup-title {
			font-size: 30rpx;
			color: rgba(0, 0, 0, 0.85);
			letter-spacing: 0;
			text-align: left;
			font-weight: 400;
		}
		.submit-popup-specifications {
			width: 320rpx;
		}
		.submit-popup-x {
			font-size: 32rpx;
			color: rgba(0, 0, 0, 0.85);
			font-weight: 400;
		}
		.submit-line {
			border-bottom: 2rpx solid #d8d8d8;
			padding-bottom: 32rpx;
			height: 194rpx;
			line-height: 72rpx;
		}
		.submit-number-box {
			margin-top: 24rpx;
		}
		.submit-number-text {
			font-size: 24rpx;
			color: rgba(0, 0, 0, 0.5);
			font-weight: 400;
		}
		.submit-number-line {
			line-height: 40rpx;
		}
		.submit-number-btn {
			position: absolute;
			bottom: 20rpx;
		}
		.submit-price {
			line-height: 72rpx;
		}
		.submit-price-total {
			display: flex;
			justify-content: flex-end;
			margin-top: 20rpx;
		}
		.submit-price-total-text {
			font-size: 40rpx;
			color: #f5222d;
			letter-spacing: 0;
			line-height: 42rpx;
			font-weight: 600;
		}
		.submit-price-text {
			font-size: 28rpx;
			color: rgba(0, 0, 0, 0.85);
			text-align: right;
			font-weight: 400;
			line-height: 40rpx;
		}
		.submit-price-subTitle {
			margin-left: 20rpx;
		}
	}
	.submit-check-time {
		background-color: #ffffff;
		padding: 28rpx 32rpx 0px 28rpx;
		.submit-check-flex {
			display: flex;
			justify-content: space-between;
		}
		.submit-check-title {
			font-size: 32rpx;
			color: #323233;
			text-align: center;
			line-height: 44rpx;
			font-weight: 500;
		}
		.submit-check-cancel {
			font-size: 28rpx;
			color: #969799;
			line-height: 40rpx;
			font-weight: 400;
			cursor: pointer;
		}
		.submit-check-sure {
			font-size: 28rpx;
			color: #007aff;
			line-height: 40rpx;
			font-weight: 400;
			cursor: pointer;
		}
		.submit-check-text {
			font-size: 36rpx;
			color: #323233;
			line-height: 48rpx;
			font-weight: 500;
		}
	}
	.tips {
		font-size: 24rpx;
		color: #f5222d;
		font-weight: 400;
		padding: 32rpx;
		line-height: 42rpx;
	}
	.edit-price {
		font-size: 28rpx;
		color: #007aff;
		text-align: right;
		line-height: 40prx;
		font-weight: 500;
	}
	.price-tips {
		font-size: 30rpx;
		color: #ff5368;
		letter-spacing: 0;
		font-weight: 500;
		float: right;
		padding-right: 32rpx;
	}
	.price-tips-gq {
		font-size: 30rpx;
		color: #888888;
		letter-spacing: 0;
		font-weight: 500;
		float: right;
		padding-right: 32rpx;
	}
}
</style>
