parts_shop_ui_LT/pages/device/FileDetails/FileDetails.vue

<template>
	<view>
		<view class="filedetails">

			<view class="cardBox" @click="selectCustomer"
				style="margin-bottom: 0;  border-bottom: 4rpx solid #f5f5f5; border-radius: 12rpx 12rpx 0 0;">
				<!-- @click="pickerShowfun('KH')" -->
				<view class="filedetails_left" style="width: 100%; margin-right: 20rpx;">
					<view style="display: flex;align-items: center;">
						<view class="shebetext" style="display: flex;align-items: center; color: #FD4B09;">
							<u-icon name="account" color="#FD4B09" size="18"></u-icon>
							<text style="font-size: 30rpx; margin-left: 10rpx;">客户</text>
						</view>
						<u--input inputAlign="right" disabled disabledColor="#fff" placeholder="客户" border="none"
							v-model="form.corpName">
						</u--input>
					</view>
				</view>
				<view class="filedetails_right">
					<u-icon name="arrow-right" color="#101010" size="22"></u-icon>
				</view>
			</view>

			<view class="cardBox" style="margin-bottom: 0;  border-bottom: 4rpx solid #f5f5f5; border-radius: 0;">
				<!-- <view class="filedetails_left">
					<view>
						<u--input prefixIcon="account" 
						prefixIconStyle="fontSize:50rpx;" placeholderStyle="fontSize:34rpx;" 
						placeholder="联系人" border="none"
							v-model="form.contacts">
						</u--input>
					</view>
				</view>
				 -->
				<view class="filedetails_left" style="width: 100%; margin-right: 20rpx;">
					<view style="display: flex;align-items: center;">
						<view class="shebetext" style="display: flex;align-items: center; color: #FD4B09;">
							<u-icon name="account" color="#FD4B09" size="18"></u-icon>
							<text style="font-size: 30rpx; margin-left: 10rpx;">联系人</text>
						</view>
						<u--input inputAlign="right" prefixIconStyle="fontSize:50rpx;"
							placeholderStyle="fontSize:34rpx;" placeholder="联系人" border="none" v-model="form.contacts">
						</u--input>
					</view>
				</view>
			</view>

			<view class="cardBox" style="margin-bottom: 0;  border-bottom: 4rpx solid #f5f5f5; border-radius: 0;">
				<!-- <view class="filedetails_left">
					<view>
						<u--input prefixIcon="phone" 
						prefixIconStyle="fontSize:50rpx;" placeholderStyle="fontSize:34rpx;" 
						 placeholder="电话" border="none"
							v-model="form.contactsTel">
						</u--input>
					</view>
				</view> -->

				<view class="filedetails_left" style="width: 100%; margin-right: 20rpx;">
					<view style="display: flex;align-items: center;">
						<view class="shebetext" style="display: flex;align-items: center; color: #FD4B09;">
							<u-icon name="account" color="#FD4B09" size="18"></u-icon>
							<text style="font-size: 30rpx; margin-left: 10rpx;">电话</text>
						</view>
						<u--input inputAlign="right" prefixIconStyle="fontSize:50rpx;"
							placeholderStyle="fontSize:34rpx;" placeholder="电话" border="none"
							v-model="form.contactsTel">
						</u--input>
					</view>
				</view>
			</view>

			<view class="cardBox" style="margin-bottom: 0;  border-bottom: 4rpx solid #f5f5f5; border-radius: 0;">
				<!-- <view class="filedetails_left">
					<view>
						<u--input prefixIcon="home" 
						prefixIconStyle="fontSize:50rpx;" placeholderStyle="fontSize:34rpx;" 
						 placeholder="地址" border="none"
							v-model="form.address">
						</u--input>
					</view>
				</view> -->

				<view class="filedetails_left" style="width: 100%; margin-right: 20rpx;">
					<view style="display: flex;align-items: center;">
						<view class="shebetext" style="display: flex;align-items: center; color: #FD4B09;">
							<u-icon name="account" color="#FD4B09" size="18"></u-icon>
							<text style="font-size: 30rpx; margin-left: 10rpx;">地址</text>
						</view>
						<u--input inputAlign="right" prefixIconStyle="fontSize:50rpx;"
							placeholderStyle="fontSize:34rpx;" placeholder="地址" border="none" v-model="form.address">
						</u--input>
					</view>
				</view>

			</view>

			<view class="cardBox" @click="calendarShowfun(1,1)"
				style="margin-bottom: 0;  border-bottom: 4rpx solid #f5f5f5; border-radius: 0;">
				<!-- <view class="filedetails_left">
					<view>
						<u--input prefixIcon="calendar" 
						prefixIconStyle="fontSize:50rpx;" placeholderStyle="fontSize:34rpx;" 
						disabled disabledColor="#fff" placeholder="请选择合同起" border="none"
							v-model="form.signingDateStart">
						</u--input>
					</view>
				</view>
				<view class="filedetails_right" @click="calendarShowfun(1,1)">
					<u-icon name="arrow-right" color="#101010" size="22"></u-icon>
				</view> -->

				<view class="filedetails_left" style="width: 100%; margin-right: 20rpx;">
					<view style="display: flex;align-items: center;">
						<view class="shebetext" style="display: flex;align-items: center; color: #FD4B09;">
							<u-icon name="calendar" color="#FD4B09" size="18"></u-icon>
							<text style="font-size: 30rpx; margin-left: 10rpx;">合同日期起</text>
						</view>
						<!-- <u--input inputAlign="right" disabled disabledColor="#fff" placeholder="合同日期起" border="none"
							v-model="form.signingDateStart">
						</u--input> -->
						<uni-datetime-picker type="date" placeholder="合同日期起" @change="calendarConfirm" v-model="form.signingDateStart" :border="false"/>
					</view>
				</view>
				<!-- <view class="filedetails_right">
					<u-icon name="arrow-right" color="#101010" size="22"></u-icon>
				</view> -->

			</view>
			<view class="cardBox" style="border-bottom: 4rpx solid #f5f5f5; border-radius: 0 0 12rpx 12rpx;">
				<!-- <view class="filedetails_left">
					<view>
						<u--input prefixIcon="calendar" 
						prefixIconStyle="fontSize:50rpx;" placeholderStyle="fontSize:34rpx;" 
						disabled disabledColor="#fff" placeholder="请选择合同止" border="none"
							v-model="form.signingDateEnd">
						</u--input>
					</view>
				</view>
				<view class="filedetails_right" @click="calendarShowfun(1,2)">
					<u-icon name="arrow-right" color="#101010" size="22"></u-icon>
				</view> -->

				<view class="filedetails_left" style="width: 100%; margin-right: 20rpx;"
					@click="calendarShowfun(1,2)">
					<view style="display: flex;align-items: center;">
						<view class="shebetext" style="display: flex;align-items: center; color: #FD4B09;">
							<u-icon name="calendar" color="#FD4B09" size="18"></u-icon>
							<text style="font-size: 30rpx; margin-left: 10rpx;">合同日期止</text>
						</view>
						<!-- <u--input inputAlign="right" disabled disabledColor="#fff" placeholder="合同日期止" border="none"
							v-model="form.signingDateEnd">
						</u--input> -->
						<uni-datetime-picker type="date" placeholder="合同日期止" @change="calendarConfirm" v-model="form.signingDateEnd" :border="false"/>
					</view>
				</view>
				<!-- <view class="filedetails_right">
					<u-icon name="arrow-right" color="#101010" size="22"></u-icon>
				</view> -->
			</view>

			<view class="cardBox">
				<u-upload :fileList="form.filesList" @afterRead="afterRead($event,1)" @delete="deletePic($event,1)"
					name="1" multiple :maxCount="10"></u-upload>
			</view>



			<view class="cardBox" style="display: flex;align-items: center;">
				<!-- <view class="filedetails_left">
					<view>
						<u--input prefixIcon="file-text" 
						prefixIconStyle="fontSize:50rpx;" placeholderStyle="fontSize:34rpx;" 
						disabled disabledColor="#fff" :placeholder="`设备列表(${form.corpEquipmentArchivesItemList.length})`" border="none">
						</u--input>
					</view>
				</view>
				<view class="filedetails_right" @click="EquipmentAddition">
					<u-icon name="list-dot" color="#101010" size="22"></u-icon>
				</view> -->


				<view class="filedetails_left" style="width: 100%; margin-right: 20rpx;">
					<view style="display: flex;align-items: center;">
						<view class="shebetext" style="display: flex;align-items: center; color: #FD4B09;">
							<u-icon name="list-dot" color="#FD4B09" size="18"></u-icon>
							<text
								style="font-size: 30rpx; margin-left: 10rpx;">设备列表({{form.corpEquipmentArchivesItemList.length}})</text>
						</view>
						<!-- <u--input
						 inputAlign="right"
						disabled disabledColor="#fff" :placeholder="`设备列表(${form.corpEquipmentArchivesItemList.length})`" border="none">
						</u--input> -->
					</view>
				</view>
				<!-- <view class="filedetails_right" @click="EquipmentAddConfirm = true"> -->
					<!-- <u-icon name="file-text" color="#101010" size="22"></u-icon> -->
					<!-- <view style="font-size: 30rpx;
					 width: 150rpx; 
					 height: 44rpx; 
					 background-color: #FD4B09; 
					 border-radius:44rpx; 
					 color: #fff;
					 padding: 10rpx" @click="pickerShowfun('CP',null)">+添加设备</view> -->
					<!-- EquipmentAddConfirm = true -->
				<!-- </view> -->


			</view>

			<view class="cardBox" v-for="(item,index) in form.corpEquipmentArchivesItemList" :key="item.id"
				v-if="form.corpEquipmentArchivesItemList.length">
				<view class="listbox">
					<view class="listbox_title">
						<view class="listbox_titleXh">
							设备{{index+1}}
						</view>
						<view class="listbox_titleDe" @click="DeleteWindow(item,index)">删除</view>
					</view>
					<view class="inputbox" @click="pickerShowfun('CP',index)">
						<!-- <view class="shebetext">设备名称:</view> -->
						<u--input prefixIconStyle="fontSize:60rpx;" placeholderStyle="fontSize:30rpx;" disabled
							disabledColor="#fff" placeholder="请选择设备名称" border="bottom" v-model="item.cname">
							<!-- <template slot="suffix">
								<u-icon @click="pickerShowfun('CP',index)" name="arrow-right" color="#101010" size="20"></u-icon>
							</template> -->
						</u--input>
					</view>
					<view class="inputbox">
						<!-- <view class="shebetext">设备编号:</view> -->
						<u--input prefixIconStyle="fontSize:60rpx;" placeholderStyle="fontSize:30rpx;"
							disabledColor="#fff" placeholder="请输入设备编号" border="bottom" v-model="item.code">
						</u--input>
					</view>
					<view class="inputbox">
						<!-- <view class="shebetext">设备描述:</view> -->
						<u--textarea v-model="item.equipmentDescribe" placeholderStyle="fontSize:30rpx;"
							placeholder="请输入设备描述">
						</u--textarea>
					</view>
					<view class="inputbox" @click="calendarShowfun(2,1,index)">
						<!-- <view class="shebetext">出厂日期:</view> -->
						<!-- <u--input prefixIconStyle="fontSize:60rpx;" placeholderStyle="fontSize:30rpx;" disabled
							disabledColor="#fff" placeholder="请选择出厂日期" border="bottom" v-model="item.exitDate"> -->
							<!-- <template slot="suffix">
								<u-icon @click="calendarShowfun(2,1,index)" name="arrow-right" color="#101010" size="20"></u-icon>
							</template> -->
						<!-- </u--input> -->
						<uni-datetime-picker type="date" placeholder="请选择出厂日期" 
						 v-model="item.exitDate" :border="false"/>
					</view>
					<view class="inputbox" @click="calendarShowfun(2,2,index)">
						<uni-datetime-picker type="date" placeholder="请选择保养日期"
						  v-model="item.maintenanceDate" :border="false"/>
					</view>
					<view class="inputbox" @click="calendarShowfun(2,3,index)">
						<uni-datetime-picker type="date" placeholder="请选择安装日期"
						  v-model="item.installDate" :border="false"/>
					</view>
					
					<view class="inputbox">
						<u--input
							prefixIconStyle="fontSize:60rpx;color:#215476"
							placeholderStyle="fontSize:30rpx;"
							disabledColor="#fff" placeholder="请输入规格" border="bottom"
							v-model="item.specs">
						</u--input>
					</view>
					<view class="inputbox" @click="pickerShowfun('PP',index)">
						<u--input
							prefixIconStyle="fontSize:60rpx;color:#215476"
							placeholderStyle="fontSize:30rpx;"
							disabled disabledColor="#fff" placeholder="请选择品牌" border="bottom"
							v-model="item.brand">
							<template slot="suffix">
								<u-icon name="arrow-right" color="#101010" size="20"></u-icon>
							</template>
						</u--input>
					</view>
					
					<view class="inputbox" style="margin-top: 20rpx;">
						<!-- <view class="shebetext">图片:</view> -->
						<u-upload :fileList="item.filesList" @afterRead="afterRead($event,2,index)"
							@delete="deletePic($event,2,index)" name="1" multiple :maxCount="10"></u-upload>
					</view>



					<!-- <view class="binahao">设备编号：{{item.code}}</view>
					<view class="bottombox">
						<view class="bottombox_img">
							<image :src="item.url" mode="widthFix"></image>
						</view>
						<view class="bottombox_text">
							<view class="bottombox_textleft">
								<view class="bottombox_textTitle">{{item.cname}}</view>
								<view>出厂日期：{{item.exitDate?item.exitDate.slice(0,10):''}}</view>
								<view>报修日期：{{item.repairReportDate?item.repairReportDate.slice(0,10):''}}</view>
							</view>
							<view class="bottombox_textRight">
								<u-icon name="arrow-right" color="#101010" size="20"></u-icon>
							</view>
						</view>
					</view> -->
				</view>
			</view>
			
			<view class="cardBox" style="display: flex;align-items: center;">
				<!-- <view class="filedetails_left">
					<view>
						<u--input prefixIcon="file-text" 
						prefixIconStyle="fontSize:50rpx;" placeholderStyle="fontSize:34rpx;" 
						disabled disabledColor="#fff" :placeholder="`设备列表(${form.corpEquipmentArchivesItemList.length})`" border="none">
						</u--input>
					</view>
				</view>
				<view class="filedetails_right" @click="EquipmentAddition">
					<u-icon name="list-dot" color="#101010" size="22"></u-icon>
				</view> -->
			
			
				<view class="filedetails_left" style="width: 100%; margin-right: 20rpx;">
					<view style="display: flex;align-items: center;">
						<view class="shebetext" style="display: flex;align-items: center; color: #FD4B09;">
							<u-icon name="list-dot" color="#FD4B09" size="18"></u-icon>
							<text
								style="font-size: 30rpx; margin-left: 10rpx;">设备</text>
						</view>
						<!-- <u--input
						 inputAlign="right"
						disabled disabledColor="#fff" :placeholder="`设备列表(${form.corpEquipmentArchivesItemList.length})`" border="none">
						</u--input> -->
					</view>
				</view>
				<view class="filedetails_right" @click="EquipmentAddConfirm = true">
					<!-- <u-icon name="file-text" color="#101010" size="22"></u-icon> -->
					<view style="font-size: 30rpx;
					 width: 150rpx; 
					 background-color: #FD4B09; 
					 border-radius:44rpx; 
					 color: #fff;
					 padding: 10rpx" @click="pickerShowfun('CP',null)">+添加设备</view>
					<!-- EquipmentAddConfirm = true -->
				</view>
			
			
			</view>
			
		</view>

		<view style="height: 100rpx;"></view>
		<view class="bottomButton">
			<view class="savebutton" @click="savefun">保存档案</view>
		</view>

		<u-picker :show="pickerShow" :columns="pickerColumns" keyName="cname" @confirm="pickerConfirm"
			@cancel="pickerCancel"></u-picker>
		<!-- 日期 -->
		<!-- <u-calendar :show="calendarShow" @confirm="calendarConfirm" @close="calendarClose"></u-calendar> -->
		<!-- 提示 -->
		<u-toast ref="uToast"></u-toast>

		<!-- 添加设备弹框 -->
		<!-- <u-modal :show="EquipmentAddConfirm" title="提示" showCancelButton @confirm="EquipmentAddition"
			@cancel="EquipmentAddConfirm = false">
			<view class="slot-content">
				<view class="inputbox" @click="pickerShowfun('CP',index)">
					<u--input
						prefixIconStyle="fontSize:60rpx;"
						placeholderStyle="fontSize:30rpx;" 
						disabled disabledColor="#fff" placeholder="请选择设备名称" border="bottom"
						v-model="machine.cname" >
					</u--input>
				</view>
				<view class="inputbox">
					<u--input
						prefixIconStyle="fontSize:60rpx;"
						placeholderStyle="fontSize:30rpx;"
						 disabledColor="#fff" placeholder="请输入设备编号" border="bottom"
						v-model="machine.code">
					</u--input>
				</view>
				<view class="inputbox">
					<u--textarea v-model="machine.equipmentDescribe" 
					placeholderStyle="fontSize:30rpx;" placeholder="请输入设备描述" >
					</u--textarea>
				</view>
				<view class="inputbox" @click="calendarShowfun(machine.exitDate,2,1,index)">
					<u--input
						prefixIconStyle="fontSize:60rpx;"
						placeholderStyle="fontSize:30rpx;"
						disabled disabledColor="#fff" placeholder="请选择出厂日期" border="bottom"
						v-model="machine.exitDate">
					</u--input>
				</view>
				<view class="inputbox" @click="calendarShowfun(machine.maintenanceDate,2,2,index)">
					<u--input
						prefixIconStyle="fontSize:60rpx;"
						placeholderStyle="fontSize:30rpx;"
						disabled disabledColor="#fff" placeholder="请选择保养日期" border="bottom"
						v-model="machine.maintenanceDate">
					</u--input>
				</view>
				<view class="inputbox" style="margin-top: 20rpx;">
					<view class="shebetext">图片:</view>
					<u-upload
							:fileList="machine.filesList"
							@afterRead="afterRead($event,2,index)"
							@delete="deletePic($event,2,index)"
							name="1"
							multiple
							:maxCount="10"
						></u-upload>
				</view>
			</view>
		</u-modal> -->

		<!-- 删除弹框 -->
		<u-modal :show="EquipmentDeleteConfirm" title="提示" showCancelButton @confirm="DeleteDevicefun"
			@cancel="EquipmentDeleteConfirm = false">
			<view class="slot-content">
				<rich-text nodes="确定要删除该设备吗?"></rich-text>
			</view>
		</u-modal>
		<!-- <u-datetime-picker :show="calendarShow" @confirm="calendarConfirm" @close="calendarShow = false" v-model="optionDate"
			mode="date"></u-datetime-picker>	 -->			
				
		<!-- <u-calendar :show="calendarShow" @confirm="calendarConfirm" @close="calendarClose"></u-calendar> -->

		<u-loading-page style="z-index: 999;" bgColor="rgba(0,0,0,.5)"  :loading="loading"></u-loading-page>
		
	</view>
</template>

<script>
	import {
		corpequipmentarchivesDetail,
		corpequipmentarchivesSubmit,
		goodsdescDescList,
		corpequipmentarchivesitemRemove,
		corpequipmentarchivesfilesRemove,
		brandDescListAll
	} from '@/api/device/index.js'
	import {
		corpsDescList
	} from '@/api/views/sale/index.js'
	import {
		queryDetail
	} from '@/api/views/customer/index.js'
	import http from '@/http/api.js'
	import {
		clientId,
		clientSecret
	} from '@/common/setting'
	export default {
		data() {
			return {
				loading:false,
				// 弹框
				// 设备添加
				EquipmentAddConfirm: false,
				// 设备删除
				EquipmentDeleteConfirm: false,
				EquipmentDeleteRow: {},
				EquipmentDeleteIndex: -1,
				// 传递过来的id
				id: null,
				// 绑定的数据
				form: {
					corpEquipmentArchivesItemList: [],
					filesList: []
				},
				// 弹窗的开启和管理
				pickerShow: false,
				// 弹窗的数据配置 数组嵌套
				pickerColumns: [],
				// 日期弹窗
				calendarShow: false,
				// 当前打开弹窗的状态
				calendarType: {
					type: null,
					sort: null,
					index: null
				},
				// 当前打开的弹窗的状态
				pickerType: {},
				// 设备弹窗
				machine: {},
				optionDate: 0
			}
		},
		onLoad(e) {
			this.id = e.id
			if (e.id) {
				this.corpequipmentarchivesDetailfun()
			}
		},
		onShow() {

		},
		methods: {
			disabledDate(time) {
				return time.getTime() > Date.now() - 8.64e7
			},
			// 保存新增
			savefun() {
				if (!this.form.corpName) {
					return this.$refs.uToast.show({
						type: 'warning',
						message: '客户名称不能为空',
					})
				}
				if (!this.form.contacts) {
					return this.$refs.uToast.show({
						type: 'warning',
						message: '联系人不能为空',
					})
				}
				if (!this.form.contactsTel) {
					return this.$refs.uToast.show({
						type: 'warning',
						message: '电话不能为空',
					})
				}
				if (!this.form.address) {
					return this.$refs.uToast.show({
						type: 'warning',
						message: '地址不能为空',
					})
				}
				// if (!this.form.corpEquipmentArchivesItemList.length > 0){
				//  	return this.$refs.uToast.show({
				//  		type: 'warning',
				//  		message: '请添加一条设备',
				//  	})
				// }

				this.form.corpEquipmentArchivesItemList.map(item => {
					if (!item.cname) {
						if (!item.equipmentDescribe) {
							return this.$refs.uToast.show({
								type: 'warning',
								message: '请维护设备描述',
							})
						}
						return
					}
					item.id = item.id ? item.id : null
					item.exitDate = item.exitDate ? item.exitDate + ' 00:00:00' : null
					item.repairReportDate = item.repairReportDate ? item.repairReportDate + ' 00:00:00' : null
					item.maintenanceDate = item.maintenanceDate ? item.maintenanceDate + ' 00:00:00' : null
				})
				
				const obj = {
					...this.form,
					id: this.form.id ? this.form.id : null,
					sysNo: this.form.sysNo ? this.form.sysNo : null,
					equipmentNumber: this.form.corpEquipmentArchivesItemList.length,
					maintenanceSecond: this.form.maintenanceSecond ? this.form.maintenanceSecond : null,
					signingDateStart: this.form.signingDateStart ? this.form.signingDateStart + ' 00:00:00' : null,
					signingDateEnd: this.form.signingDateEnd ? this.form.signingDateEnd + ' 00:00:00' : null,
					remarks: this.form.remarks ? this.form.remarks : null
				}
				this.loading = true
				this.corpequipmentarchivesSubmitfun(obj)
				// setTimeout(()=>{
				//   this.corpequipmentarchivesSubmitfun(obj)
				// }, 1000);
			},
			// 保存数据接口
			corpequipmentarchivesSubmitfun(obj) {
				corpequipmentarchivesSubmit(obj).then(res => {
					this.loading = false
					if (res.code == 200) {
						this.$refs.uToast.show({
							type: 'success',
							message: '操作成功',
						})
						this.form = res.data
						this.form.corpEquipmentArchivesItemList.map(item=>{
							item.exitDate = item.exitDate ? item.exitDate.slice(0,10) : null
							item.repairReportDate = item.repairReportDate ? item.repairReportDate.slice(0,10) : null
							item.maintenanceDate = item.maintenanceDate ? item.maintenanceDate.slice(0,10) : null
						})
					} else {
						this.$refs.uToast.show({
							type: 'error',
							message: res.msg,
						})
					}
				})
			},
			// 跳转选择用户
			selectCustomer() {
				this.$u.route('/pages/views/salesSlip/selectCustomer', {
					corpType: 'KH'
				});
			},
			// 选中用户赋值
			otherFun(user) {
				console.log(user);

				queryDetail({
					id: user.id
				}).then(res => {
					this.$set(this.form, 'address', res.data.corpsAddrList[0].detailedAddress)
					this.form.corpId = user.id
					this.form.corpName = res.data.cname
					this.form.contacts = res.data.attn
					this.form.contactsTel = res.data.tel
				})

			},
			// 设备新增
			EquipmentAddition() {
				this.form.corpEquipmentArchivesItemList.push({
					cname: '',
					cname: '',
					code: '',
					brand: '',
					specs: '',
					category: '',
					categoryitem: '',
					url: '',
					goodsTypeId: '',
					exitDate: '',
					repairReportDate: '',
					brandId: '',
					maintenanceDate: '',
					factoryId: '',
					factoryName: '',
					equipmentDescribe: '',
					maintenanceSecond: '',
					filesList: [],
				})

				this.EquipmentAddConfirm = false
			},
			// 弹窗的开启
			pickerShowfun(type, index) {
				this.pickerColumns = []
				if (type == 'KH') {
					this.pickerType.type = type
					this.pickerType.index = null
					corpsDescList({
						corpType: 'KH'
					}).then(res => {
						this.pickerColumns = [res.data]
					})
					this.pickerShow = true
				} else if (type == 'CP') {
					if (index == null) {
						this.pickerType.type = type
						this.pickerType.index = this.form.corpEquipmentArchivesItemList.length

						this.form.corpEquipmentArchivesItemList.push({
							cname: '',
							cname: '',
							code: '',
							brand: '',
							specs: '',
							category: '',
							categoryitem: '',
							url: '',
							goodsTypeId: '',
							exitDate: '',
							repairReportDate: '',
							brandId: '',
							maintenanceDate: '',
							factoryId: '',
							factoryName: '',
							equipmentDescribe: '',
							maintenanceSecond: '',
							filesList: [],
						})

						this.$u.route('/pages/device/FileDetails/selectMachine', {
							corpType: 'KH'
						});
					} else {
						this.pickerType.type = type
						this.pickerType.index = index
						this.$u.route('/pages/device/FileDetails/selectMachine', {
							corpType: 'KH'
						});
					}

				}else if (type == 'PP') {
					this.pickerType.type = type
					this.pickerType.index = index
					this.loading = true
					brandDescListAll({type: type}).then(res=>{
						this.loading = false
						this.pickerColumns = [res.data]
						this.pickerShow = true
					}).finally(err=>{
						this.loading = false
					})
				}else {}

			},
			machineOtherFun(form) {
				this.form.corpEquipmentArchivesItemList[this.pickerType.index].cname = form.cname
				// this.form.corpEquipmentArchivesItemList[this.pickerType.index].code = form.code
				this.form.corpEquipmentArchivesItemList[this.pickerType.index].brand = form.brand
				this.form.corpEquipmentArchivesItemList[this.pickerType.index].brandId = form.brandId
				this.form.corpEquipmentArchivesItemList[this.pickerType.index].specs = form.specs
				this.form.corpEquipmentArchivesItemList[this.pickerType.index].remarks = form.remarks
				this.form.corpEquipmentArchivesItemList[this.pickerType.index].goodsTypeId = form.goodsTypeId
				this.form.corpEquipmentArchivesItemList[this.pickerType.index].goodsTypeName = form.goodsTypeName
				this.form.corpEquipmentArchivesItemList[this.pickerType.index].maintenanceSecond = form.maintenanceSecond ?
					form.maintenanceSecond : null
				this.form.corpEquipmentArchivesItemList[this.pickerType.index].repairReportDate = form.repairReportDate
				this.form.corpEquipmentArchivesItemList[this.pickerType.index].factoryId = form.factoryId ? form
					.factoryId : null
				this.form.corpEquipmentArchivesItemList[this.pickerType.index].factoryName = form.factoryName ? form
					.factoryName : null
				this.form.corpEquipmentArchivesItemList[this.pickerType.index].categoryitem = form.categoryitem
				// this.form.corpEquipmentArchivesItemList[this.pickerType.index].equipmentDescribe = form.cname
				this.pickerType.index = null

			},
			// 弹窗点击确认按钮
			pickerConfirm(val) {
				if (this.pickerType.type == 'KH') {
					this.form.corpId = val.value[0].id
					this.form.corpName = val.value[0].cname
					queryDetail({
						id: val.value[0].id
					}).then(res => {
						this.$set(this.form, 'address', res.data.corpsAddrList[0].detailedAddress)
						this.form.contacts = res.data.attn
						this.form.contactsTel = res.data.tel
					})
				} else if (this.pickerType.type == 'CP') {
					this.form.corpEquipmentArchivesItemList[this.pickerType.index].cname = val.value[0].cname
					// this.form.corpEquipmentArchivesItemList[this.pickerType.index].code = val.value[0].code
					this.form.corpEquipmentArchivesItemList[this.pickerType.index].brand = val.value[0].brand
					this.form.corpEquipmentArchivesItemList[this.pickerType.index].brandId = val.value[0].brandId
					this.form.corpEquipmentArchivesItemList[this.pickerType.index].specs = val.value[0].specs
					this.form.corpEquipmentArchivesItemList[this.pickerType.index].remarks = val.value[0].remarks
					this.form.corpEquipmentArchivesItemList[this.pickerType.index].goodsTypeId = val.value[0].goodsTypeId
					this.form.corpEquipmentArchivesItemList[this.pickerType.index].goodsTypeName = val.value[0]
						.goodsTypeName
					this.form.corpEquipmentArchivesItemList[this.pickerType.index].maintenanceSecond = val.value[0]
						.maintenanceSecond ? val.value[0].maintenanceSecond : null
					this.form.corpEquipmentArchivesItemList[this.pickerType.index].repairReportDate = val.value[0]
						.repairReportDate
					this.form.corpEquipmentArchivesItemList[this.pickerType.index].factoryId = val.value[0].factoryId ? val
						.value[0].factoryId : null
					this.form.corpEquipmentArchivesItemList[this.pickerType.index].factoryName = val.value[0].factoryName ?
						val.value[0].factoryName : null
					this.form.corpEquipmentArchivesItemList[this.pickerType.index].categoryitem = val.value[0].categoryitem
					// this.form.corpEquipmentArchivesItemList[this.pickerType.index].equipmentDescribe = val.value[0].cname
				} else if(this.pickerType.type == 'PP') {
					this.form.corpEquipmentArchivesItemList[this.pickerType.index].brand = val.value[0].cname
					this.form.corpEquipmentArchivesItemList[this.pickerType.index].brandId = val.value[0].id
				}else {}
				this.pickerShow = false

			},
			// 弹窗点击取消按钮
			pickerCancel() {
				this.pickerShow = false
			},
			// 日历弹窗的开启
			calendarShowfun(type, sort, index) {
				
				// if (date != null && date != "") {
				// 	console.log("赋值");
				// 	console.log(date);
				// 	this.optionDate = Date.parse(date);
				// 	console.log(this.optionDate);
				// }
				this.calendarType.type = type
				this.calendarType.sort = sort
				this.calendarType.index = index
				this.calendarShow = true
			},
			// 日历关闭触发
			calendarClose() {
				this.calendarShow = false
			},
			// 日历选择完成触发
			calendarConfirm(val) {
				// var timer = new Date(val.value)
        //
				// const year = timer.getFullYear()
				// const month = timer.getMonth() + 1 // 由于月份从0开始，因此需加1
				// const day = timer.getDate()
				// const hour = timer.getHours()
				// const minute = timer.getMinutes()
				// const second = timer.getSeconds()
				// var data = `${this.pad(year, 4)}-${this.pad(month)}-${this.pad(day)}`

				if (this.calendarType.type == 1) {
					if (this.calendarType.sort == 1) {
						this.form.signingDateStart = val[0]
					} else {
						this.form.signingDateEnd = val[0]
					}
				} else {
					if (this.calendarType.sort == 1) {
						this.form.corpEquipmentArchivesItemList[this.calendarType.index].exitDate = val[0]
					} else {
						this.form.corpEquipmentArchivesItemList[this.calendarType.index].maintenanceDate = val[0]
					}
				}

				this.calendarShow = false
			},
			pad(timeEl, total = 2, str = '0') {
				return timeEl.toString().padStart(total, str)
			},
			// 详情接口
			corpequipmentarchivesDetailfun() {
				corpequipmentarchivesDetail({
					id: this.id
				}).then(res => {
					this.form = res.data
					this.form.corpEquipmentArchivesItemList.map(item=>{
						item.maintenanceDate = item.maintenanceDate.slice(0,10)
						item.exitDate = item.exitDate.slice(0,10)
						item.brand = item.brand?item.brand:''
						item.specs = item.specs?item.specs:''
					})
				})
			},

			// 删除弹窗
			DeleteWindow(row, index) {
				this.EquipmentDeleteRow = row;
				this.EquipmentDeleteIndex = index;
				this.EquipmentDeleteConfirm = true;
			},

			// 删除设备
			DeleteDevicefun() {
				var row = this.EquipmentDeleteRow
				var index = this.EquipmentDeleteIndex
				if (row.id) {
					this.form.corpEquipmentArchivesItemList.splice(index, 1)
					this.corpequipmentarchivesitemRemovefun(row.id)
				} else {
					this.form.corpEquipmentArchivesItemList.splice(index, 1)
				}

				this.EquipmentDeleteRow = null;
				this.EquipmentDeleteIndex = -1;
				this.EquipmentDeleteConfirm = false;
			},
			// 删除接口
			corpequipmentarchivesitemRemovefun(id) {
				corpequipmentarchivesitemRemove({
					ids: id
				}).then(res => {
					this.$refs.uToast.show({
						type: 'success',
						message: '操作成功',
					})
				})
			},
			// 新增图片
			async afterRead(event, type, index) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				console.log(event);
				console.log(lists, 394);
				if (type == 1) {
					let fileListLen = this.form.filesList.length
					lists.map((item) => {
						this.form.filesList.push({
							...item,
						})
					})
					let sort = this.form.filesList.length

					for (let i = 0; i < lists.length; i++) {
						const result = await this.uploadFilePromise(lists[i].url)
						let item = this.form.filesList[fileListLen]
						this.form.filesList.splice(fileListLen, 1, Object.assign(item, {
							sort: sort,
							fileName: JSON.parse(result).data.originalName,
							url: JSON.parse(result).data.link,
							typeFiles:this.form.filesList.length == 1? '主图' : '附图'
						}))
						fileListLen++
					}
				} else if (type == 2) {
					let fileListLen = this.form.corpEquipmentArchivesItemList[index].filesList.length
					lists.map((item) => {
						this.form.corpEquipmentArchivesItemList[index].filesList.push({
							...item,
						})
					})
					let sort = this.form.corpEquipmentArchivesItemList[index].filesList.length

					for (let i = 0; i < lists.length; i++) {
						const result = await this.uploadFilePromise(lists[i].url)
						let item = this.form.corpEquipmentArchivesItemList[index].filesList[fileListLen]
						this.form.corpEquipmentArchivesItemList[index].filesList.splice(fileListLen, 1, Object.assign(
							item, {
								sort: sort,
								fileName: JSON.parse(result).data.originalName,
								url: JSON.parse(result).data.link,
								typeFiles:this.form.corpEquipmentArchivesItemList[index].filesList.length == 1? '主图' : '附图'
							}))
						fileListLen++
					}
				} else {}


			},
			// 上传附件接口
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: http.config.baseURL +
							'/blade-resource/oss/endpoint/put-file', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						header: {
							// 客户端认证参数
							'Authorization': 'Basic ' + Base64.encode(clientId + ':' + clientSecret),
							'Blade-Auth': 'bearer ' + uni.getStorageSync('accessToken')
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data)
							}, 1000)
						}
					});
				})
			},
			// 删除图片
			deletePic(e, type, index) {
				if (type == 1) {
					this.form.filesList.splice(e.index, 1)
					this.corpequipmentarchivesfilesRemovefun(e.file)
				} else if (type == 2) {
					this.form.corpEquipmentArchivesItemList[index].filesList.splice(e.index, 1)
					this.corpequipmentarchivesfilesRemovefun(e.file)
				} else {}
			},
			// 附件删除接口
			corpequipmentarchivesfilesRemovefun(row){
				this.loading = true
				corpequipmentarchivesfilesRemove({ids:row.id}).then(res=>{
					this.loading = false
					this.$refs.uToast.show({
						type: 'success',
						message: '删除成功',
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.filedetails {
		padding: 20rpx;
		box-sizing: border-box;

		.listbox {
			width: 100%;

			.inputbox {
				display: flex;
				align-items: center;

				.shebetext {
					width: 140rpx;
					font-size: 32rpx;
					color: #215476;
					text-align: right;
					margin-right: 10rpx;
				}
			}

			.listbox_title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.listbox_titleXh {
					font-size: 28rpx;
					background: #dd451b;
					width: 90rpx;
					height: 90rpx;
					color: #fff;
					text-align: center;
					line-height: 90rpx;
					border-radius: 50%;
				}

				.listbox_titleDe {
					font-size: 30rpx;
					border: 2rpx solid #dd451b;
					border-radius: 12rpx;
					padding: 5rpx 20rpx;
					color: #dd451b;
				}

			}

			.binahao {
				font-size: 30rpx;
				color: #101010;
				margin-bottom: 10rpx;
			}

			.bottombox {
				width: 100%;
				display: flex;
				align-content: center;

				.bottombox_img {
					// width: 35%;
					width: 220rpx;
					height: 220rpx;
				}

				.bottombox_text {
					margin-left: 20rpx;
					width: 65%;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.bottombox_textleft {
						font-size: 30rpx;

						.bottombox_textTitle {
							font-size: 34rpx;
							color: #2d4a6a;
							font-weight: 500;
							margin-bottom: 20rpx;
							width: 400rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}

					.bottombox_textRight {}
				}
			}
		}
	}

	.cardBox {
		background: #fff;
		border-radius: 12rpx;
		width: 100%;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		align-content: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.bottomButton {
		position: fixed;
		bottom: 0;
		width: 100%;
		padding: 20rpx 30rpx;
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		z-index: 98;

		.savebutton {
			border-radius: 30rpx;
			// color: #3f7cef;
			color: #fff;
			font-size: 34rpx;
			// border: 2rpx solid #3f7cef;
			border: 2rpx solid #FD4B09;
			background: #FD4B09;
			padding: 10rpx 40rpx;
			font-weight: 500;
		}
	}

	image {
		width: 100%;
	}
</style>