<template>
	<!-- 布局 flex 组件 view -->
	<view class="addDiver_body">
		<!--  卡片  -->
		<view class="addDiver_card">
			<view class="card_title">
				<view class="tiao"></view>
				<view class="card_title_text">新增调价</view>
			</view>
			<uni-list>
				<uni-list-item @tap="jump" link>
					<view class="list_header" slot="header">
						油站
					</view>
					<view style="" slot="body" class="list_right">
						<view  slot="body" :style="{color:aboutEnterprise.siteName?'#333333':' '}"
							class="list_right list_nosele">
							{{aboutEnterprise.siteName?aboutEnterprise.siteName:'请选择油站'}}
						</view>
					</view>
				</uni-list-item>
				<uni-list-item @click="seleoli" link>
					<view class="list_header" slot="header">
						油号
					</view>
					<view style="" slot="body" class="list_right">
						<view slot="body" :style="{color:aboutEnterprise.oilProductCode?'#333333':' '}"
							class="list_right list_nosele">
							{{aboutEnterprise.oilProductCode?aboutEnterprise.oilProductCode:'请选择油品类型'}}
						</view>
					</view>
				</uni-list-item>
				<uni-list-item>
					<view class="list_header" slot="header">
						调价类型
					</view>
					<view slot="body" class="list_right">
						<u-radio-group iconPlacement="right" v-model="aboutEnterprise.effectiveMode" placement="row"
							@change="groupChange">
							<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1"
								:key="index" :label="item.name" :name="item.value" @change="radioChange">
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</view>
				</uni-list-item>
				<uni-datetime-picker @change="datetimeChange" type="datetime"  :start="start" v-model="aboutEnterprise.subEntryTime" >
					<uni-list-item @click="show=!show" v-if="aboutEnterprise.effectiveMode==1" link>
						<view class="list_header" slot="header">
							预约时间
						</view>
						<view style="" slot="body" class="list_right">
							<view slot="body" :style="{color:aboutEnterprise.subEntryTime?'#333333':' '}"
								class="list_right list_nosele">
								{{aboutEnterprise.subEntryTime?aboutEnterprise.subEntryTime:'请选择预约时间'}}
							</view>
						</view>
					</uni-list-item>
				</uni-datetime-picker>
				<uni-list-item>
					<view class="list_header" slot="header">
						发改委价格 <text v-if="aboutEnterprise.oilProductCode"
							style="font-size: 22rpx; color:#EE0707;margin-left: 30rpx;">
							原价:{{ Number(aboutEnterprise.oilSiteOilsPrices[aboutEnterprise.oloIndex].marketPrice).toFixed(2)}}
						</text>
					</view>
					<view slot="body" class="list_right ">
						<view style="width: 100%;padding-right: 16px !important;display: flex; ">
							<input placeholder="请输入价格" @input="inputFn('marketPrice')" type="digit"
								v-model="aboutEnterprise.marketPrice" class="list_right_input" />
							<text class="yuan">元</text>
						</view>
					</view>
				</uni-list-item>
				<uni-list-item>
					<view class="list_header" slot="header">
						油站价格
						<text v-if="aboutEnterprise.oilProductCode"
							style="font-size: 22rpx; color:#EE0707;margin-left: 30rpx;">
							原价:{{Number(aboutEnterprise.oilSiteOilsPrices[aboutEnterprise.oloIndex].sitePrice).toFixed(2)}}
						</text>
					</view>
					<view slot="body" class="list_right ">
						<view style="width: 100%;padding-right: 16px !important;display: flex; ">
							<input placeholder="请输入价格" @input="inputFn('sitePrice')" type="digit"
								v-model="aboutEnterprise.sitePrice" class="list_right_input" />
							<text class="yuan">元</text>
						</view>
					</view>
				</uni-list-item>
			</uni-list>
		</view>
		<!-- 底部按钮 -->
		<view class="list_footer">
			<button @tap="postFn" class="list_butten ">保存</button>
		</view>
		<popup @confirmFn='confirmFn' @closeFn='closeFn' :styles="{width:'610rpx'}" v-model="isShow.oliType">
			<view slot="coment">
				<view class="olipopup">
					<view @click="olioss(item,index)"
						:class="aboutEnterprise.oilProductCode==item.oilProductCode? 'seleOlipopup_item' : 'olipopup_item' "
						v-for="(item,index) in aboutEnterprise.oilSiteOilsPrices" :key="index">
						{{item.oilProductCode}}
					</view>
				</view>
			</view>
		</popup>
		<!-- <u-picker @confirm='dateConfirm' v-model="show" :params="params" mode="time"></u-picker> -->
		<!-- <uni-datetime-picker type="datetime" v-model="datetimesingle" @change="changeLog" /> -->
	</view>
</template>

<script>
	/*
	 * 奕 2022/1/25
	 */
	import tool from '@/utils/tool'
	import addDirver from '@/api/addDirver'
	import priceAdjustment from '@/api/priceAdjustment'
	export default {
		data() {
			return {
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
				shows: {
					img: false,
					footer: false
				},
				show: false,
				disabled: false,
				start:'',
				aboutEnterprise: {
					siteName: '',
					siteId: '',
					oilProductCode: '',
					effectiveMode: 0,
					oloIndex: '',
					subEntryTime: '',
					applyStatus: 0,
					marketPrice: '',
					sitePrice: '',
					oldMarketPrice: '',
					oldSitePrice: '',
					siteOilsPriceId: '',
					createSource: 'OMS-MINIAPP'
				},
				isShow: {
					oliType: false
				},
				radiolist1: [{
						name: '立即',
						value: 0
					},
					{
						name: '预约',
						value: 1
					},
				],
			}
		},
		onLoad() {
			let that = this
			uni.$on('serviceStation', function(e) {
				console.log('%c 油站参数更新↓', 'font-size:50px;color:red')
				that.aboutEnterprise = Object.assign(that.aboutEnterprise, e)
				that.aboutEnterprise.siteId = that.aboutEnterprise.id
				that.clearFn()
				console.log(e)
			})
			let start = new Date()
			start.setMinutes(start.getMinutes()+35)
			this.start = `${start.getFullYear()}-${start.getMonth()+1}-${start.getDate()} ${start.getHours()}:${start.getMinutes()}`
			console.log(this.start,'---')
		},
		methods: {
			clearFn(){
				this.aboutEnterprise.oldMarketPrice = ''
				this.aboutEnterprise.oloIndex=''
				this.aboutEnterprise.oilProductCode=''
				this.aboutEnterprise.oldSitePrice=''
				this.aboutEnterprise.siteOilsPriceId=''
				this.aboutEnterprise.marketPrice = ''
				this.aboutEnterprise.sitePrice = ''
			},
			datetimeChange(e){
				console.log(e,'*-*-*')
			},
			//后端要的乱七八糟的字段和值 逼事太多 直接合对象凑字段了
			olioss(e, index) {
				this.aboutEnterprise.oilProductCode = e.oilProductCode;
				this.aboutEnterprise.oloIndex = index
				this.aboutEnterprise.oldMarketPrice = JSON.parse(JSON.stringify(this.aboutEnterprise.oilSiteOilsPrices[this.aboutEnterprise.oloIndex].marketPrice))
				this.aboutEnterprise.oldSitePrice = JSON.parse(JSON.stringify(this.aboutEnterprise.oilSiteOilsPrices[this.aboutEnterprise.oloIndex].sitePrice))
				this.aboutEnterprise = Object.assign(this.aboutEnterprise, this.aboutEnterprise.oilSiteOilsPrices[this.aboutEnterprise.oloIndex])
				this.aboutEnterprise.siteOilsPriceId = this.aboutEnterprise.id
			},
			closeFn() {
				this.aboutEnterprise.oilProductCode = ''
				this.isShow.oliType = false
			},
			confirmFn() {
				this.isShow.oliType = false
			},
			seleoli() {
				if (!this.aboutEnterprise.oilSiteOilsPrices || this.aboutEnterprise.oilSiteOilsPrices.length == 0) {
					uni.showToast({
						title: '请选择则正确油站',
						icon: 'none'
					})
					return
				}
				this.isShow.oliType = true
			},
			dateConfirm(e) {
				this.aboutEnterprise.subEntryTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:00`
				console.log(e)
			},
			inputFn(e) {
				console.log(this.aboutEnterprise[e])
				if (this.aboutEnterprise[e].indexOf('.') != -1) {
					if (this.aboutEnterprise[e].split('.')[1].length > 2) {
						uni.showToast({
							title: '最多保留小数点后两位',
							icon: 'none'
						})
						this.$nextTick(function() {
							this.aboutEnterprise[e] = Number(this.aboutEnterprise[e]).toFixed(2)
						})
					}
				}
			},
			postFn() {
				let checkPage = {
					siteName: {
						tacitly: '',
						WrongText: '请选择油站'
					},
					oilProductCode: {
						tacitly: '',
						WrongText: '请选择油号'
					},
					marketPrice: {
						tacitly: '',
						WrongText: '发改委价格不能为空'
					},
					sitePrice: {
						tacitly: '',
						WrongText: '油站价格不能为空'
					}
				}
				let check = tool.checkFn(this.aboutEnterprise, [], checkPage)
				if (!check.result) {
					uni.showToast({
						title: check.WrongText,
						icon: 'none'
					})
					return
				}
				// aboutEnterprise.oilSiteOilsPrices[aboutEnterprise.oloIndex].marketPrice==aboutEnterprise.marketPrice
				// aboutEnterprise.oilSiteOilsPrices[aboutEnterprise.oloIndex].sitePrice==aboutEnterprise.sitePrice
				if(this.aboutEnterprise.oilSiteOilsPrices[this.aboutEnterprise.oloIndex].marketPrice==this.aboutEnterprise.marketPrice&&this.aboutEnterprise.oilSiteOilsPrices[this.aboutEnterprise.oloIndex].sitePrice==this.aboutEnterprise.sitePrice){
					uni.showToast({
						title: '请变动价格后提交',
						icon: 'none'
					})
					return
				}
				this.aboutEnterprise.createSource = 'OMS-MINIAPP'
				priceAdjustment.save(this.aboutEnterprise).then(res => {
					if (res.code !== 20000) return
					setTimeout(() => {
						uni.navigateBack()
					}, 500)
					console.log(res)
				})
			},
			jump(e) {
				uni.navigateTo({
					url: '/driverManagement/serviceStation/serviceStation'
				})
			},
			open() {
				this.show = !this.show
			},
			change() {
				this.aboutEnterprise.shareCompanyQuota = this.switchOpen ? 1 : 0
				console.log(this.switchOpen)
			},
			radioChange(e) {
				if (!e) {
					this.aboutEnterprise.subEntryTime = ''
				}
				console.log(e)
			},
			groupChange() {}
		}
	}
</script>

<style lang="scss">
	.olipopup {
		padding: 47rpx 43rpx;
		display: flex;
		flex-wrap: wrap;
		gap: 12rpx;
		font-size: 30rpx;
	}

	.olipopup_item {
		width: 167rpx;
		height: 60rpx;
		border: 1px solid #999999;
		border-radius: 4rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999999;
	}

	.seleOlipopup_item {
		width: 167rpx;
		height: 60rpx;
		border-radius: 4rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
		background-color: #2866FF;
	}

	.clear {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #BBBBBB;
		display: flex;
		align-items: center;
	}

	.yuan {
		font-size: 28rpx;
		margin-left: 10rpx;
	}

	.popup_body {
		padding: 20rpx;
	}

	.list_right_input {
		font-size: 28rpx;
	}

	.list_footer {
		padding-bottom: 57rpx;
		margin-top: 57rpx;
	}

	.list_butten {
		height: 100rpx;
		background: #2866FF;
		border-radius: 10rpx;
		color: #FFFFFF;
		font-size: 36pxr;
	}

	.fg {
		.uni-list-item__container {
			padding-bottom: 0px !important;
		}
	}

	.list_nosele {
		font-size: 28rpx;
		font-family: PingFang SC;
		color: #999999;
	}

	.uni-icon-wrapper {
		padding: 0px !important;
	}

	.uni-list-item__container {
		padding: 12px 0 !important;
	}

	.tiao {
		width: 8rpx;
		height: 34rpx;
		background: #2866FF;
	}

	.card_title_text {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-left: 10rpx;
	}

	.card_title {
		display: flex;
		border-bottom: 1px solid #F0F0F0;
		align-items: center;
		padding-bottom: 17rpx;
		height: 86rpx;
	}

	.list_header {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		display: flex;
		align-items: center;
		padding-left: 16px;
		position: relative;
		height: fit-content;
	}

	.list_right_input {
		width: 100%;
		color: #333333;
		text-align: end !important;
		font-size: 28rpx;
		text-align: right !important;
		padding-left: 90rpx;
		box-sizing: border-box;
	}

	.list_right {
		flex: 1;
		display: flex;
		justify-content: flex-end;
	}

	.addDiver_body {
		padding: 0 40rpx;
	}

	.addDiver_card {

		background: #FFFFFF;
		box-shadow: 0px 3px 9px 0px rgba(88, 88, 88, 0.2);
		border-radius: 20rpx;
		margin-top: 38rpx;
		overflow: hidden;
		/* padding-top: 19rpx; */
		padding: 19rpx 20rpx 0 20rpx;
		box-sizing: border-box;
	}
</style>
