<template>
	<view class="submit-quotation">
		<view>
			<uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="">
				<view class="submit-title">{{ title }}</view>
				<view slot="left"></view>
				<view slot="right"></view>
			</uni-nav-bar>
		</view>
		<view class="submit-main">
			<view><text class="submit-main-title">交货要求</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-deadline">
			<view class="submit-text">报价截止</view>
			<view class="submit-time">
				<text class="submit-time-text">{{ upDataObj.enquiryValidTimeSplit[0] }}</text>
			</view>
			<view class="sbumit-colon">:</view>
			<view class="submit-time">
				<text class="submit-time-text">{{ upDataObj.enquiryValidTimeSplit[1] }}</text>
			</view>
			<view class="sbumit-colon">:</view>
			<view class="submit-time">
				<text class="submit-time-text">{{ upDataObj.enquiryValidTimeSplit[2] }}</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.paperName }}|{{ items.gramWeight }}|{{ items.length }}*{{ items.width }}|{{ items.quantity }}</view>
				<view class="" @click="commodityModify(items, index)"><image class="submit-image" src="../../static/imgs/trade/myPrice.png" mode=""></image></view>
			</view>
			<view class="submit-contant-body">
				<view class="">
					<text class="submit-contant-body-title">重量(吨)：</text>
					<text class="submit-contant-body-subtitle">{{ items.gramWeight }}</text>
				</view>
				<view>
					<text class="submit-contant-body-title">单价(元/吨)：</text>
					<text class="submit-contant-body-subtitle">
						{{ items.unitFee }}
						<image @click="priceModify(items, index)" class="submit-image-price" src="../../static/imgs/trade/myPrice.png" mode=""></image>
					</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 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 class="" @click="resetTime()"><text class="submit-contant-time-subtitle">设置</text></view>
		</view>
		<uGap></uGap>
		<view class="submit-contant-remark">
			<view class="submit-contant-remark-title">报价备注</view>
			<view class=""><uni-easyinput maxlength="200" type="textarea" class="submit-contant-remark-input" v-model="value1" placeholder="请输入内容"></uni-easyinput></view>
		</view>
		<uGap></uGap>
		<view class="submit-btnBg"><button class="submit-btn" type="primary" @click="updataQuery()">提交报价</button></view>
		<view class="">
			<uni-popup ref="popup" :mask-click="false">
				<view class="submit-popup">
					<view class="submit-line">
						<view class="submit-popup-close">
							<view class="submit-popup-title">纸品名称：</view>
							<view class="" @click="close()"><image class="submit-popup-close-image" src="../../static/imgs/client/close-icon.png" mode=""></image></view>
						</view>
						<view>
							<!-- <uni-data-picker class="submit-popup-input" :border="false" :localdata="items" @change="onchange"></uni-data-picker> -->
							<uni-easyinput :inputBorder="false" class="submit-popup-input" type="text" v-model="addObj.paperName" placeholder="请输入内容"></uni-easyinput>
						</view>
					</view>
					<view class="submit-line">
						<view class="submit-popup-close"><view class="submit-popup-title">克重(g)</view></view>
						<view class="">
							<uni-easyinput :inputBorder="false" class="submit-popup-input" type="number" v-model="addObj.gramWeight" placeholder="请输入内容"></uni-easyinput>
						</view>
					</view>
					<view class="submit-line">
						<view class="submit-popup-close"><view class="submit-popup-title">规格(mm)</view></view>
						<view class="submit-popup-close">
							<view class="">
								<uni-easyinput
									:inputBorder="false"
									class="submit-popup-input submit-popup-specifications"
									type="number"
									v-model="addObj.length"
									placeholder="请输入内容"
								></uni-easyinput>
							</view>
							<view class="submit-popup-x">x</view>
							<view class="">
								<uni-easyinput
									:inputBorder="false"
									class="submit-popup-input submit-popup-specifications"
									type="number"
									v-model="addObj.width"
									placeholder="请输入内容"
								></uni-easyinput>
							</view>
						</view>
					</view>
					<view class="submit-popup-close submit-number-box">
						<view class=""><view class="submit-popup-title">购买数量(张)</view></view>
						<view class="submit-number-line">
							<uni-number-box v-model="addObj.quantity"></uni-number-box>
							<text class="submit-number-text">预估重量：{{ (addObj.quantity * addObj.gramWeight).toFixed(2) }}</text>
						</view>
					</view>
					<view class=""><button class="submit-btn submit-number-btn" type="primary" @click="sureModifyPaper()">确认修改纸品</button></view>
				</view>
			</uni-popup>
		</view>
		<view class="">
			<uni-popup ref="popupPrice" :mask-click="false">
				<view class="submit-popup">
					<view class="submit-line">
						<view class="submit-popup-close">
							<view class="submit-popup-title">
								单价(元/吨)
								<text class="submit-number-text submit-price-subTitle">预估重量：{{ prices.gramWeight }}吨</text>
							</view>
							<view class="" @click="close()"><image class="submit-popup-close-image" src="../../static/imgs/client/close-icon.png" mode=""></image></view>
						</view>
						<view>
							<view class="">
								<uni-easyinput
									:inputBorder="false"
									@blur="pricesUnutFee()"
									class="submit-popup-input"
									type="number"
									v-model="prices.unitFee"
									placeholder="请输入内容"
								></uni-easyinput>
							</view>
						</view>
					</view>
					<view class="submit-number-box submit-price">
						<view class="submit-popup-close"><view class="submit-popup-title">其他费用(元)</view></view>
						<view class="">
							<uni-easyinput :inputBorder="false" class="submit-popup-input" type="number" v-model="prices.otherFee" placeholder="请输入内容"></uni-easyinput>
						</view>
					</view>
					<view class="submit-price-total">
						<view class="submit-price-text">合计：</view>
						<view class="submit-price-total-text">¥ {{ prices.totalPrice }}</view>
					</view>
					<view class=""><button class="submit-btn submit-number-btn" type="primary" @click="pricesSure()">确认报价</button></view>
				</view>
			</uni-popup>
		</view>
		<view class="">
			<uni-popup ref="popupTime" :mask-click="false">
				<view class="submit-check-time">
					<view class="submit-check-flex ">
						<view class="submit-check-cancel" @click="pickerCancel()">取消</view>
						<view class="submit-check-title">设置时间</view>
						<view class="submit-check-sure" @click="pickerSure()">确认</view>
					</view>
					<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="timeValue" @change="bindChange" class="picker-view">
						<picker-view-column>
							<view class="item submit-check-text" v-for="(item, index) in years" :key="index">{{ item }}</view>
						</picker-view-column>
						<picker-view-column>
							<view class="item submit-check-text" v-for="(item, index) in months" :key="index">{{ item }}</view>
						</picker-view-column>
					</picker-view>
				</view>
			</uni-popup>
		</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 { updataEnquiryReply, enquiryReplyDetail } from '@/apis/trade'

export default {
	components: {
		qnHeader,
		uGap
	},
	data() {
		const date = new Date()
		const years = []
		const year = date.getFullYear()
		const months = []
		const month = date.getMonth() + 1
		const day = date.getDate()
		for (let i = 1; i < 3; i++) {
			years.push(i + '天')
		}
		for (let i = 1; i < 24; i++) {
			months.push(i + '小时')
		}
		return {
			value: '',
			value1: '',
			vModelValue: '',
			indicatorStyle: `height: 50px;`,
			visible: true,
			title: '提交报价',
			years,
			year,
			months,
			month,
			timeValue: [0, 0],
			pickerValue: [],
			upDataObj: {
				otherFee: 0,
				totalAllPrice: 0,
				enquiryValidTimeSplit: []
			},
			addObj: {},
			prices: {
				totalPrice: 0
			},
			modifyIndex: 0,
			pricesIndex: 0
			// items: []
		}
	},
	onLoad(option) {
		if (option) {
			this.title = option.title
			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)
						console.log('this.upDataObj', res)
					}
				})
				.catch(err => {
					reject(err)
				})
		},
		// 确认报价
		surePrice() {
			updateEnquiry(thids.upDataObj)
				.then(res => {
					if (res) {
					}
				})
				.catch(err => {
					reject(err)
				})
		},
		// 商品操作按钮
		commodityModify(item, index) {
			this.modifyIndex = index
			this.addObj = JSON.parse(JSON.stringify(item))
			console.log(this.addObj)
			this.$refs.popup.open('bottom')
		},
		// 单价操作按钮
		priceModify(item, index) {
			this.pricesIndex = index
			this.prices = JSON.parse(JSON.stringify(item))
			this.$refs.popupPrice.open('bottom')
		},
		// 事件设置
		resetTime() {
			this.$refs.popupTime.open('bottom')
		},
		// 事件选择change事件
		bindChange(e) {
			this.timeValue = e.detail.value
			console.log(e.detail.value)
		},
		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() {
			console.log('timeValue', this.timeValue)
			this.$refs.popupTime.close()
			var abs = this.addDate(new Date(), this.timeValue[0] + 1,this.timeValue[1] + 1)
			var timeb = abs.split(' ')
			var timeabs = timeb[1].split(':')
			this.$set(this.upDataObj, 'enquiryValidTimeSplit', timeabs)
			this.$set(this.upDataObj, 'enquiryValidTime', abs)
			console.log(abs)
		},
		addDate(date, days,hours) {
			if (days == undefined || days == '') {
				days = 1
			}
			var date = new Date(date)
			date.setDate(date.getDate() + days)
			date.setHours(date.getHours()+ hours);
			var month = date.getMonth() + 1
			var day = date.getDate()
			var hours = date.getHours()
			var min = date.getMinutes()
			var second = date.getSeconds()
			return date.getFullYear() + '-' + this.getFormatDate(month) + '-' + this.getFormatDate(day) +' ' + this.getFormatDate(hours) +':' + this.getFormatDate(min)+':' +this.getFormatDate(second)
		},
		getFormatDate(arg) {
			if (arg == undefined || arg == '') {
				return ''
			}

			var re = arg + ''
			if (re.length < 2) {
				re = '0' + re
			}

			return re
		},
		// 确认修改纸品
		sureModifyPaper() {
			this.$refs.popup.close()
			this.upDataObj.itemList[this.modifyIndex] = JSON.parse(JSON.stringify(this.addObj))
			this.upDataObj = JSON.parse(JSON.stringify(this.upDataObj))
			this.priceFree()
		},
		// 单价合计
		pricesUnutFee(item) {
			var abs = parseFloat(this.prices.unitFee) * parseFloat(this.prices.gramWeight)
			this.prices.totalPrice = abs.toFixed(2)
		},
		// 单价确认报价
		pricesSure() {
			this.$set(this.upDataObj.itemList[this.pricesIndex], 'otherFee', this.prices.otherFee)
			this.$set(this.upDataObj.itemList[this.pricesIndex], 'unitFee', this.prices.unitFee)
			var abs = parseFloat(this.prices.gramWeight) * parseFloat(this.prices.unitFee)
			this.$set(this.upDataObj.itemList[this.pricesIndex], 'totalPrice', abs.toFixed(2))
			this.upDataObj = JSON.parse(JSON.stringify(this.upDataObj))
			this.$refs.popupPrice.close()
			console.log(this.upDataObj.itemList)
			this.priceFree()
		},
		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)
			}
		},
		//提交报价
		updataQuery() {
			var params = {
				...this.upDataObj,
				userId: this.$store.state.userInfo.userId
			}
			return new Promise((resolve, reject) => {
				updataEnquiryReply(params)
					.then(res => {
						if (res) {
							uni.showToast({
								title: '添加成功',
								icon: 'success'
							})
							setTimeout(() => {
								back()
							}, 800)
						}
					})
					.catch(err => {
						reject(err)
					})
			})
		}
	}
}
</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;
}
.submit-quotation {
	.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: 336rpx;
		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 0rpx 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;
		}
	}
}
</style>
