<!-- 发起订单 -->
<template>
	<view class="content">
		<view class="header">
			<view class="top-rail"></view>
			<view class="page-top" :style='{ justifyContent: "center" }'>

				<!-- 返回上一级页面信息 -->
				<view class='go-back-page' @click='pageBack'>返回</view>

				<!-- 人员/车辆/我的组件显示的表头信息 -->
				<view class="other-title-class">
					新增文件
				</view>
			</view>
		</view>
		<view class="dil">
			<view class="tinput" v-if="maneizhi=='2'">
				<view class="text1">
					<text class="hong1">*</text>
					文件路径
				</view>

				<view class="you_file_up">
					<ss-upload v-if="maneizhi==2" ref="ssUpload" @getFile="getFile" @uploadSuccess="uploadSuccess"
						:uploadOptions="uploadOptions" :isUploadServer="isUploadServer" :webviewStyle="webviewStyle"
						:fileInput="fileInput">
						<!-- <text>附件上传</text> -->
					</ss-upload>

				</view>
			</view>
			<view style="padding:24rpx;" v-if="maneizhi=='2'">
				<!-- #ifdef MP-WEIXIN || H5 -->
				<view v-if="files.length">
					<view v-for="item in files">
						<view>名称：{{ item.name }}</view>
						<view>大小：{{ item.size }}</view>
						<view>类型：{{ item.type }}</view>
					</view>
				</view>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS-->
				<view style="margin-top:40rpx">{{ filesApp }}</view>
				<!-- #endif -->
				<!-- 	<view style="margin-top:40rpx;word-break: break-all;" v-if="result">
            上传服务器结果：{{result}}
          </view> -->
			</view>
			<view class="xinput">
				<view class="text1">
					<text class="hong1">*</text>
					分类
				</view>
				<view class="xz">
					<view :class="{'xlan':maneizhi == item.id}" class="kuang" v-for="(item,index) in taplist"
						:key="index" @click="getzhi2(item.id,item.text)">
						<view class="">{{ item.text }}</view>
					</view>
				</view>
			</view>

			<!-- 填空 -->
			<view class="tinput">
				<view class="text1" v-if="maneizhi=='1'">
					<text class="hong1">*</text>
					文件夹名称
				</view>
				<view class="text1" v-else>
					<text class="hong1">*</text>
					文件名称
				</view>
				<view class="you">
					<input type="text" placeholder="请输入名称" v-model="box.fileName">
				</view>
			</view>

			<!-- style="height: 0px; overflow: hidden; display: none;" -->


			<view class="tinput" v-if="maneizhi=='2'">
				<view class="text1">
					<text class="hong1">*</text>
					提醒时间
				</view>
				<view class="you" @click="show = true ">
					<text>{{ time || '' }}</text>
				</view>
			</view>
			<u-datetime-picker :show="show" v-model="value1" @cancel="cancels" @confirm="confirms" mode="date"
				return-type='string'></u-datetime-picker>
			<view class="anniu" @click="getnewsadd()">
				<text>保存</text>
			</view>
			<view style="width: 100%; height: 60px;"></view>
		</view>


	</view>
</template>

<script>
	import request from "@/utils/request";
	import config from '@/config'
	import {
		getToken
	} from '@/utils/auth'
	import upload from '@/utils/upload.js'
	import VNavigationBarVue from '../../components/VNavigationBar.vue';

	var wvCurrent;
	export default {
		components: {
			VNavigationBarVue
		},
		data() {
			return {
				time: '请选择提醒时间',
				value1: '2023-10-10',
				baseUrl: this.$baseUrl,
				show: false,
				maneizhi: 2,
				type: 'add',
				fileId: null,
				id: 1,

				taplist: [{
						text: '文件夹',
						id: 1
					},
					{
						text: '文件',
						id: 2
					},
				],
				box: {
					type: 2,
					fatherId: '',
					filePath: '',
					fileName: '',
					warnTime: '',
				},
				fileLists: null,
				files: [],
				filesApp: '',
				isUploadServer: true,
				uploadOptions: {},
				webviewStyle: {
					height: '40px',
					width: '90px',
					background: 'transparent',
					/* position: 'absolute',
					top: '140px',
					right: '20px', */
					position: 'absolute',
					top: '17%',
					right: '5%',
					transform: 'translateY(-50%)',
				},
				fileInput: { //设置app端html里面input样式与内容
					fileStyle: {

						borderRadius: '10px',
						backgroundColor: '#1975F7',
						color: '#fff',
						fontSize: '16px',
					},
					fileTitle: '附件上传'
				},
				fileInputs: { //设置app端html里面input样式与内容
					fileStyle: {

						borderRadius: '10px',
						backgroundColor: '#1975F7',
						color: '#fff',
						fontSize: '20px',
					},
					fileTitle: '上传附件'
				},
				result: '',
				uploadWaiting: true,

			}
		},
		onLoad(option) {
			this.type = option.type
			this.fileId = option.fileId
			this.uploadOptions = {
				// 上传服务器地址，此地址需要替换为你的接口地址
				url: this.$baseUrl + '/common/upload', //仅为示例，非真实的接口地址,
				//请求方式，get,post
				type: 'post',
				// 上传附件的key
				name: 'file',
				// 根据你接口需求自定义请求头
				header: {
					"Authorization": 'Bearer ' + getToken()
				},
				// 根据你接口需求自定义body参数
				formData: config.formData
			}
		},
		mounted() {},
		onShow() {
			if (this.type == 'edit') this.getDetail();
		},
		methods: {
			async getDetail() {

				let res = await request({
					url: '/inspectionFile/inspectionFile/' + this.fileId,
					method: 'get'
				})
				if (res.code == 200) {
					this.box = res.data
					this.maneizhi = this.box.type
					this.time = this.box.warnTime
				}
			},
			cancels() {
				this.show = false
			},
			confirms(e) {
				var timestamp = e.value;
				var date = new Date(timestamp);
				var year = date.getFullYear();
				var month = ("0" + (date.getMonth() + 1)).slice(-2);
				var day = ("0" + date.getDate()).slice(-2);
				var formattedDate = year + "-" + month + "-" + day;
				this.box.warnTime = formattedDate
				this.time = formattedDate
				this.show = false

			},
			//发布按钮
			async getnewsadd() {
				if (this.maneizhi == '2') {
					console.log('this.box.fileName', this.box.fileName)
					console.log('this.box.warnTime', this.box.warnTime)
					if (this.box.fileName == '' || this.box.warnTime == '') {
						uni.showToast({
							title: '必填项不能有空！',
							icon: 'none'
						})
						return
					}
					if (!this.uploadWaiting) {
						uni.showToast({
							title: '请等待上传完成！',
							icon: 'none'
						})
						return
					}
					if (this.box.filePath == '') {
						console.log('this.box.filePath', this.box.filePath)
						uni.showToast({
							title: '必填项不能有空！',
							icon: 'none'
						})
						return
					}
				} else {
					if (this.box.fileName == '') {
						uni.showToast({
							title: '必填项不能有空！',
							icon: 'none'
						})
						return
					}
				}
				this.uploadWaiting = false
				this.box.servicePackageId = "jiuyuan"
				if (this.type == 'add') {

					this.box.fatherId = this.fileId
					console.log('box', this.box)
					let res = await request({
						url: '/inspectionFile/inspectionFile/add',
						method: 'post',
						data: this.box
					})
					if (res.code == 200) {
						uni.showToast({
							title: '发布成功'
						})
						setTimeout(() => {
							uni.navigateBack();
						}, 1000);
					}
				}
				if (this.type == 'edit') {
					let res = await request({
						url: '/inspectionFile/inspectionFile/edit',
						method: 'post',
						data: this.box
					})
					if (res.code == 200) {
						uni.showToast({
							title: '发布成功'
						})
						setTimeout(() => {
							//返回并刷新页面
							uni.navigateBack();
						}, 1000);

					}
				}

			},

			getback() {
				uni.navigateBack({
					delta: 1,
				})
			},

			getzhi2(id, text) {
				if (this.type == 'add') {
					this.maneizhi = id
					this.value = text
					this.box.type = id
				}

			},
			uploadFile() {
				setTimeout(() => {
					this.$refs.ssUpload.uploadFile()
				})
			},
			//获取文件
			getFile(result) {

				//#ifdef H5 || MP-WEIXIN
				this.files = result.tempFiles
				// #endif
				// #ifdef APP-PLUS
				this.filesApp = result
				// #endif
			},
			uploadSuccess(result) {
				console.log(result, '返回结果')
				this.result = result
				this.box.filePath = result[0]
				console.log(this.box.filePath, '图片路径11111111111111111')
				this.uploadWaiting = true
				uni.showToast({
					title: '上传完成',
					icon: 'none'
				})
			},
			pageBack() {
				uni.navigateBack({
					delta: 1 // delta值为1时表示返回的页面层数
				});
			},

		}

	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: calc(100vh);
		background-color: #F6F6F6;
		box-sizing: border-box;
		// padding-top: 45px;
	}

	.dil {
		box-sizing: border-box;
		background-color: #F6F6F6;
		padding: 0px 12px;

	}

	.top-icon {
		margin-bottom: 45px;
	}

	.c-top {
		width: 100%;
		box-sizing: border-box;
		padding: 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: white;
		padding-top: 40px;
	}

	.c-title {
		font-size: 18px;
		font-weight: bold
	}

	.top {
		box-sizing: border-box;
		padding: 0px 15px;
		width: 100%;
		background-color: white;
	}

	.top-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 20px 0px;
	}

	.tb-left {
		height: 100%;
		width: 80%;
		display: flex;
		align-items: center;
	}

	.uicon {
		width: 18px;
		height: 18px;
		border-radius: 4px;
		color: white;
		background: orangered;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 12px;
		font-weight: bold;
		margin-right: 6px;

	}

	.tb-right {
		width: 20px;
		height: 26px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.text1 {
		font-size: 16px;
		font-weight: bold;
		color: #363636;
	}

	.hong1 {
		margin-top: 5px;
		font-size: 12px;
		font-weight: 400;
		color: #FF5453;
	}

	.hong2 {
		margin-top: 5px;
		font-size: 12px;
		font-weight: 400;

	}

	.tinput {
		width: 100%;
		display: flex;
		background: white;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 16px;
		margin-top: 14px;
		margin-bottom: 14px;
	}

	.xinput {
		width: 100%;
		background: white;
		box-sizing: border-box;
		padding: 16px;
		margin-top: 14px;
	}

	.you {
		text-align: right;


	}

	.you_file_up {
		position: relative;
		/* 为绝对定位的WebView提供参照 */
		display: inline-block;
		background-color: #fff;
	}

	.you_file_up text {
		display: inline-block;
		padding: 10px 20px;
		background-color: #1975F7;
		color: white;
		border-radius: 10px;
		cursor: pointer;
	}

	.you text {
		display: inline-block;
		padding: 10px 20px;
		background-color: #1975F7;
		color: white;
		border-radius: 10px;
		cursor: pointer;
	}

	.xz {
		margin-top: 10px;
		display: flex;
		align-items: center;

	}

	.kuang {
		width: 80px;
		height: 23px;
		background: #ECECEC;
		border-radius: 5px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #666666;
		font-size: 14px;
		margin-right: 15px;
	}

	.xlan {
		background: #CDE7FF !important;
		color: #1D62FF !important;
		border: 1px solid #2A96FE;
	}

	.anniu {
		width: 100%;
		background: linear-gradient(180deg, #327DFB 0%, #327DFB 100%);
		border-radius: 50px;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #542F0E;
		margin-top: 20px;
		color: white;

	}


	button::after {
		border: none;
	}

	.top-rail {
		height: 60rpx;
		width: 100%;
		background-color: #054DF3;
	}

	.page-top {
		flex-shrink: 0;
		width: 100%;
		height: 160rpx;
		display: flex;
		align-items: center;
		color: white;
		flex-shrink: 0;
		background: linear-gradient(180deg, #054DF3 0%, #55A3FF 100%);

		.go-back-page {
			position: absolute;
			left: 20rpx;
		}
	}
</style>