<!-- 发起订单 -->
<template>
	<view class="content">
		<!-- <view class="top-rail"></view>
		<view class="c-top" :style='{ justifyContent: "center" }'>
			<view class="go-back-page" @click="getback()">返回</view>
			<view class="c-title" v-if="type == 'add'">新增设备</view>
			<view class="c-title" v-if="type == 'edit'">编辑设备</view>
			<view class=""></view>
		</view> -->
		<!-- <headersVue :titles="pageName" style="position: static !important;">
			<u-icon name="arrow-left" color="#fff" size="18"></u-icon>
		</headersVue> -->
		<VNavigationBar style="position: relative;z-index: 99;" homeHeaderPaddingTop="0" backgroundColor="#fff"
			title-color="#000" :title="pageName"></VNavigationBar>
		<view class="dil">
			<view class="tinput">

				<view class="text1">
					<text class="hong1">*</text>
					设备名称
				</view>
				<view class="you">
					<input type="text" placeholder="请输入设备名称" v-model="box.equName">
				</view>
			</view>
			<view class="tinput">

				<view class="text1">
					<text class="hong1">*</text>
					设备型号
				</view>
				<view class="you">
					<input type="text" placeholder="请输入设备型号" v-model="box.equModel">
				</view>
			</view>
			<view class="tinput">

				<view class="text1">
					<text class="hong1">*</text>
					设备编号
				</view>
				<view class="you">
					<input type="text" placeholder="请输入设备编号" v-model="box.equNumber">
				</view>
			</view>
			<view class="tinput" @click="typeShow = true">
				<view class="text1">
					设备类别
				</view>
				<view class="you">
					<input type="text" disabled placeholder="请选择设备类别" v-model="typeName">
				</view>
			</view>
			<view class="tinput">

				<view class="text1">
					<text class="hong1">*</text>
					设备检定周期
				</view>
				<view class="you">
					<input type="text" placeholder="请输入设备检定周期" v-model="box.equZq">
				</view>
			</view>
			<view class="tinput">

				<view class="text1">
					<text class="hong1">*</text>
					上次检定单位
				</view>
				<view class="you">
					<input type="text" placeholder="请输入上次检定单位" v-model="box.lastUnit">
				</view>
			</view>


			<view class="tinput">
				<view class="text1">
					<text class="hong1">*</text>
					有效期
				</view>
				<!-- validTime -->
				<view class="you" @click="show = true ">
					<text>{{ time || '--' }}</text>
				</view>
			</view>
			<view class="tinput">
				<view class="text1">
					<text class="hong1">*</text>
					下次检定时间
				</view>
				<!-- nextCheckTime -->
				<view class="you" @click="show1 = true ">
					<text>{{ time1 || '--' }}</text>
				</view>
			</view>

			<view class="tinput" v-if="type == 'edit'">
				<view class="text1">
					<text class="hong1">*</text>
					设备附件
				</view>
				<view class="lan_" @click="goFile">查看附件
					<image src="../../static/icons/internal/add.png" mode=""></image>
				</view>
			</view>
			<u-datetime-picker :show="show" v-model="box.validTime" @cancel="cancels" @confirm="confirms" mode="date"
				return-type='string'></u-datetime-picker>
			<u-datetime-picker :show="show1" v-model="box.nextCheckTime" @cancel="cancels1" @confirm="confirms1"
				mode="date" return-type='string'></u-datetime-picker>

			<u-picker :show="typeShow" :columns="columns" @confirm="confirmsType" @cancel="typeShow = false"
				keyName="label"></u-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 {
		getDictByCode,
		getDictDataByType
	} from "../../utils/utils";
	import VNavigationBar from "@/components/VNavigationBar.vue";

	var wvCurrent;
	export default {
		components: {
			VNavigationBar
		},
		data() {
			return {

				time: '请选择有效期',
				time1: '请选择下次检定时间',
				value1: '2023-10-10',
				baseUrl: this.$baseUrl,
				show: false,
				show1: false,
				fileId: null,
				id: '',
				type: 'add',
				box: {},
				typeShow: false,
				columns: [],
				typeName: null,
				//附件列表
				fileList3: [],
				pageName: '新增设备',
				baseImageUrl: config.baseImageUrl,
			}
		},
		onLoad(option) {
			this.type = option.type
			if (option.type == 'edit') {
				this.box.id = option.id
				this.pageName = '编辑设备'
			}
			this.getInsType()
		},

		onShow() {
			if (this.type == 'edit') this.getDetail();
		},
		methods: {
			confirmsType(e) {
				console.log(e)
				this.box.type = e.value[0].value
				this.typeName = e.value[0].label
				this.typeShow = false
			},
			async getInsType() {
				if (!this.columns || this.columns.length === 0) {
					this.columns = [await getDictByCode("repair_equ_type")]
				}
				console.log(this.columns)
			},
			async getDetail() {
				let res = await request({
					url: '/admin-api/system/equInfo/' + this.box.id,
					method: 'get'
				})
				if (res.code == 200) {
					this.box = res.data
					if (this.box.fileList) {
						this.fileList3 = this.box.fileList
						// 在回显时给 URL 加上域名
						this.fileList3 = this.fileList3.map(file => {
							// 如果是相对路径，添加域名
							file.url = this.baseImageUrl + '/' + file.url;
							return file;
						});
					}
					// this.maneizhi = this.box.type
					this.time = this.box.validTime
					this.time1 = this.box.nextCheckTime
				}
				if (this.box.type) {
					const data = this.columns[0]
					const index = data.findIndex(item => item.value === this.box.type)
					if (index !== -1) {
						this.typeName = data[index].label
					}
				}
			},
			cancels() {
				this.show = false
			},
			cancels1() {
				this.show1 = 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.validTime = formattedDate
				this.time = formattedDate
				this.show = false

			},
			confirms1(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.nextCheckTime = formattedDate
				this.time1 = formattedDate
				this.show1 = false

			},
			//发布按钮
			async getnewsadd() {
				this.box.fileList = this.fileList3.map(file => {
					// 去掉域名，返回相对路径
					if (file.url && file.url.startsWith(this.baseImageUrl)) {
						file.url = file.url.replace(this.baseImageUrl, '');
					}
					return file;
				});
				if (this.type == 'add') {
					this.box.servicePackageId = 'wexiu'
					let res = await request({
						url: '/admin-api/system/equInfo/add',
						method: 'post',
						data: this.box
					})
					if (res.code == 200) {
						uni.showToast({
							title: '发布成功'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 1000);
					}
				}
				if (this.type == 'edit') {
					let res = await request({
						url: '/admin-api/system/equInfo/edit',
						method: 'post',
						data: this.box
					})
					if (res.code == 200) {
						uni.showToast({
							title: '发布成功'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 1000);

					}
				}

			},

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

			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: "success",
							message: "",
							url: result,
						})
					);
					fileListLen++;
				}
				console.log('现在文件集合', this[`fileList${event.name}`])
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					upload({
						url: '/common/upload',
						filePath: url,
					}).then((res) => {
						resolve(res.data.url);
					})
				});
			},

			goFile() {
				if (!this.box.id) {
					uni.showToast({
						title: '请先新建设备',
						icon: 'none'
					})
					return
				}
				if (!this.box.folderId) {
					console.log('当前员工没有文件加')
					//给当前设备创建一个文件夹
					request({
						url: '/admin-api/system/equInfo/addDeviceFolder',
						method: 'post',
						params: {
							id: this.box.id,
							servicePackageId: 'jiuyuan',
							defaultKey: 'jy_equipment'
						},
					}).then(res => {
						this.box.folderId = res.data
						uni.navigateTo({
							url: '/pages-internal/dataManagement/deviceManage?type=staff&folderId=' + this
								.box
								.folderId
						})
					})
				} else {
					uni.navigateTo({
						url: '/pages-internal/dataManagement/deviceManage?type=staff&folderId=' + this.box.folderId
					})
				}

			},
		}

	}
</script>

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

	.dil {
		/* box-sizing: border-box;
		background-color: #F6F6F6;
		padding: 0px 12px; */
		box-sizing: border-box;
		background-color: #F6F6F6;
		padding: 0px 12px;
		flex: 1;
		overflow-y: auto;

	}

	.lan_ {
		font-size: 28rpx;
		color: #327DFB;
		display: flex;
		align-items: center;

		image {
			width: 36rpx;
			height: 36rpx;
			margin-left: 15rpx;
		}
	}

	.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;

	}

	.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, #3F61C0 0%, #0D2E8D 100%);
		color: #0174F6;
		border-radius: 50px;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		//color: #542F0E;
		border: 1px solid #0174F6;
		margin-top: 20px;

	}


	button::after {
		border: none;
	}
</style>