<template>
	<view class="">
		<view class="index">
			<view class="index-top">
				<view class="index-top-tit">
					预计上门安装时间
				</view>
				<view class="index-top-cent" @click="jump">
					<view class="">
						{{timeValue}}
					</view>
					<image :src="imgBgUrl+'rq.png'" mode=""></image>
				</view>
			</view>
			<view class="index-cetn">
				<view class="" style="margin-bottom: 10rpx;">
					上传图片
				</view>
				<com-upload ref="upload" imgType="takePictures" @changeList="changeList"></com-upload>
				<view class="tt">
					请上传材料到厂图，材料清单等证明图片
				</view>
			</view>
		</view>
		<view class="btm">
			<view class="tzqr" @click="jumps" style="width: calc(100% - 200rpx);text-align: center;">
				确认
			</view>
		</view>
		<u-datetime-picker :formatter="formatter" :show="show" v-model="value1" mode="date" @confirm="confirm"
			@cancel="cancel"></u-datetime-picker>
	</view>
</template>

<script>
	import apiBaseConfig from '@/config/index.js';
	import {
		materialArrivalPUT,
		updatePUT
	} from '@/api/workbench/index.js';
	export default {
		data() {
			return {
				imgBgUrl: apiBaseConfig.imgBgUrl,
				globalData: getApp().globalData,
				show: false,
				value1: Number(new Date()),
				timeValue: '',
				factoryImgs: [], // 材料到厂图
				factoryImgsId: 1 // 1新增 2 修改
			};
		},
		onLoad(option) {
			this.contractInfo = JSON.parse(option.contractInfo)
			console.log(this.contractInfo.factoryImgs,'this.contractInfo.factoryImgs=')
			if (this.contractInfo.factoryImgs) {
				this.$refs.upload.fileList6 = this.contractInfo.factoryImgs
				this.timeValue = this.contractInfo.estimatedDoorInstallationTime
				this.factoryImgsId = 2
			} else {
				this.factoryImgsId = 1
			}
		},
		methods: {
			async confirm(e) {
				// console.log(e, 'vvvvvvv')
				const timeFormat = uni.$u.timeFormat;
				let timeValue = await timeFormat(e.value, 'yyyy-mm-dd');
				this.timeValue = timeValue;
				console.log(timeValue);
				this.show = false;
			},
			changeList(v) {
				console.log(v,'this.factoryImgs====')
				this.factoryImgs = v
			},
			cancel() {
				this.show = false;
			},
			jumps() {
				if(!this.timeValue){
					return uni.$u.toast('请选择预计上门安装时间')
				}
				if(this.factoryImgs.length == 0){
					return uni.$u.toast('请先上传图片')
				}
				if (this.factoryImgsId == 2) {
					this.update()
				} else {
					this.materialArrival()
				}
			},
			update() {
				updatePUT({
					contractId: this.contractInfo.contractId,
					factoryImgs: JSON.stringify(this.factoryImgs),
					estimatedDoorInstallationTime: this.timeValue
				}).then((res) => {
					if (res.code == 200) {
						uni.$u.toast('材料到厂修改成功');
						let timer = setInterval(() => {
							this.$uniGo.navigateBack({
								delta: 1
							});
							clearInterval(timer)
						}, 1000)
					}
				})
			},
			materialArrival() {
				materialArrivalPUT({
					contractId: this.contractInfo.contractId,
					factoryImgs: JSON.stringify(this.factoryImgs),
					estimatedDoorInstallationTime: this.timeValue
				}).then((res) => {
					if (res.code == 200) {
						uni.$u.toast('材料到厂确认成功');
						let timer = setInterval(() => {
							this.$uniGo.navigateBack({
								delta: 1
							});
							clearInterval(timer)
						}, 1000)
					}
				})
			},
			// 跳转城市选择
			jump() {
				this.show = true;
			}
		}
	};
</script>

<style>
	page {
		background: #F7F8FA;
	}
</style>
<style lang="scss" scoped>
	.index {
		padding: 30rpx;

		&-top {
			padding: 40rpx 30rpx 30rpx 30rpx;
			background: #FFFFFF;
			border-radius: 34rpx;

			&-tit {
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
			}

			&-cent {
				margin-top: 10rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 34rpx 30rpx;
				background: rgba(143, 146, 161, 0.08);
				border-radius: 20rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;

				>view {
					width: calc(100% - 90);
				}

				>image {
					width: 28rpx;
					height: 28rpx;
				}
			}
		}

		&-cetn {
			margin-top: 30rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
		}
	}

	.btm {
		width: calc(100% - 80rpx);
		padding: 24rpx 40rpx 62rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		bottom: 0rpx;
	}

	.tzqr {
		padding: 24rpx 100rpx;
		border-radius: 45rpx;
		border: 2rpx solid #1572FF;
		font-weight: 500;
		font-size: 30rpx;
		color: #fff;
		background: #1572FF;
	}

	.tt {
		font-weight: 400;
		font-size: 22rpx;
		color: #666666;
		margin-top: 10rpx;
	}
</style>