<template>
	<view >
		<uni-forms ref="form"  :model="datainfo">
			<view class="check">
			<view class="cbox">
				<view class="chmain">
					<uni-forms-item label="资产类型" name="phonenumber">
						<uni-data-picker :map="map" :disabled="isdisabled" placeholder="请选择" popup-title="请选择" :localdata="assetTree" v-model="datainfo.assetId"
							@change="onchange" >
						</uni-data-picker>
					</uni-forms-item>
					<!-- @nodeclick="onnodeclick" @popupopened="onpopupopened" @popupclosed="onpopupclosed" -->
				</view>
			</view>
			<view class="cbox" style="flex: 1;">
				<view class="chmain">
					<uni-forms-item label="资产名称" required name="equipmentName">
						<view class="flexc">
							<uni-easyinput type="textarea"  :disabled="isdisabled" autoHeight v-model="datainfo.equipmentName" :inputBorder='false' />
							<view class="rimg"><image :src="rimg"></image></view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="资产编号" name="equipmentNumber">
						<view class="flexc">
							<uni-easyinput type="textarea" :disabled="isdisabled" autoHeight v-model="datainfo.equipmentNumber" :inputBorder='false' />
							<view class="rimg"><image :src="rimg"></image></view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="资产型号" name="equipmentModel">
						<view class="flexc">
							<uni-easyinput type="textarea" :disabled="isdisabled" autoHeight v-model="datainfo.equipmentModel" :inputBorder='false' />
							<view class="rimg"><image :src="rimg"></image></view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="存放位置或使用位置" name="equipmentLocation">
						<view class="flexc">
							<uni-easyinput type="textarea" :disabled="isdisabled" autoHeight v-model="datainfo.equipmentLocation" :inputBorder='false' />
							<view class="rimg"><image :src="rimg"></image></view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="购买价格" name="equipmentPrice">
						<view class="flexc">
							<uni-easyinput type="textarea" :disabled="isdisabled" autoHeight v-model="datainfo.equipmentPrice" :inputBorder='false' />
							<view class="rimg"><image :src="rimg"></image></view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="购买时间" name="purchaseDate">
						<picker mode="date" :disabled="isdisabled"  @change='bindDateChangea'>
							<view class="flexc">
								<view class="flex1 txr f13"  :class="datainfo.purchaseDate?'co27':'coa'">{{datainfo.purchaseDate||"请选择购买时间"}}</view>
								<view class="rimg"><image :src="rimg"></image></view>
							</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item label="资产状态" name="equipmentStatus">
						<picker range-key='dictLabel' :disabled="isdisabled" :value="sbztidx" :range="sbztList"   @change='bindDateChange'>
							<view class="flexc">
								<view class="flex1 txr f13 co27" v-if="datainfo.equipmentStatus&&!sbzt">{{statusFormats(datainfo.equipmentStatus,sbztList,'sbzt')}}</view>
								<view class="flex1 txr f13" v-else :class="sbzt?'co27':'coa'">{{sbzt||"请选择设备状态"}}</view>
								<view class="rimg"><image :src="rimg"></image></view>
							</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item label="用途描述" name="equipmentPurpose">
						<view class="flexc">
							<uni-easyinput type="textarea" :disabled="isdisabled" autoHeight v-model="datainfo.equipmentPurpose" :inputBorder='false' />
							<view class="rimg"><image :src="rimg"></image></view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="车牌号" name="plateNumber">
						<view class="flexc">
							<uni-easyinput type="textarea" :disabled="isdisabled" autoHeight v-model="datainfo.plateNumber" :inputBorder='false' />
							<view class="rimg"><image :src="rimg"></image></view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="备注信息" name="remark">
						<view class="flexc">
							<uni-easyinput type="textarea" :disabled="isdisabled" autoHeight v-model="datainfo.remark" :inputBorder='false' />
							<view class="rimg"><image :src="rimg"></image></view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="设备封面" name="remark">
						<view class="imgs">
							<block v-if="fmphofile&&fmphofile.length">
								<view class="img" v-for="(ite,idx) in fmphofile" :key="idx" @click="getPreview(idx,fmphofile)">
									<image :src="baseUrl+ite" class="pimg"></image>
									<image :src="del" class="del" @click.stop="getDelFn(idx,'fm')"></image>
								</view>
							</block>
							<view class="addbox" @click="getaddImage('fm')">
								<image :src="photo"></image>
								<view>添加图片</view>
							</view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="设备图片" name="remark">
						<view class="imgs">
							<block v-if="phofile&&phofile.length">
								<view class="img" v-for="(ite,idx) in phofile" :key="idx" @click="getPreview(idx,phofile)">
									<image :src="baseUrl+ite" class="pimg"></image>
									<image :src="del" class="del" @click.stop="getDelFn(idx,'tp')"></image>
								</view>
							</block>
							<view class="addbox" @click="getaddImage('tp')">
								<image :src="photo"></image>
								<view>添加图片</view>
							</view>
						</view>
					</uni-forms-item>
				</view>
			</view>
			<view class="rfbtn" @click="getEditFn" v-if="isdisabled">修改</view>
			<view class="rfbtn" @click="getSubmit" v-else>发布</view>
			<loading></loading>
			</view>
		</uni-forms>
	</view>
</template>

<script>
	import config from '@/config'
	import editorBox from "@/manage/components/editor/editor.vue"
	import {checkPermi,checkRole} from "@/utils/permission"; // 权限判断函数
	import {uploadmore,selectValueKey,selectValue} from '@/utils/common.js'
	import {getDictionaryFn} from "@/api/system/user.js"
	import {assetsAdd,assetTypeTree,assetsPut,assetsDet} from "@/api/work/manage.js"
	export default {
		components: {editorBox},
		data() {
			return {
				rimg: require('@/people/static/people/rimg.png'),
				photo:require("@/service/static/service/photo.png"),
				car:require('@/car/static/car/carico.png'),
				del:require('@/service/static/service/rdel.png'),
				baseUrl: config.baseUrl,
				datainfo: {
					// "communityAssetId":"",//资产ID
					"assetId":"",//资产类型id
					"assetName":"",//资产类型，如设备、车辆等
					"equipmentName":"",//设备名称
					"equipmentCoverPhoto":"",//设备封面照片的存储路径
					"equipmentNumber":"",//设备编号
					// "equipmentQrCode":"",//设备二维码的存储路径或内容
					"equipmentStatus":"",//设备状态，如正常、维修中、报废等
					"equipmentModel":"",//设备型号
					"purchaseDate":"",//设备购买时间
					"equipmentPurpose":"",//设备用途描述
					"equipmentLocation":"",//设备存放位置或使用位置
					"equipmentPrice":"",//设备购买价格
					// "storageTime":"",//设备入库时间
					// "storagePerson":"",//入库操作人
					// "outboundTime":"",//设备出库时间
					// "outboundPerson":"",//出库操作人
					"plateNumber":"",//车牌号（如果是车辆类资产）
					// "equipmentPhotos":"",//设备照片的存储路径
					// "maintenanceDate":"",//最近维护日期
					// "maintenancePerson":"",//维护操作人
					// "warrantyPeriod":"",//保修期（月）
					// "depreciationRate":"",//折旧率（百分比）
					"remark":'',//备注
				},
				assetTree:[],
				sbzt:'',
				sbztidx:0,
				sbztList:[],//
				map:{text:'label',value:'id'},
				fmphofile:[],
				phofile:[],
				id:'',
				ptype:"add",
				isdisabled:false,
			}
		},
		onLoad: function(e) {
			this.init()
			if(e.id){
				this.id=e.id;
				this.ptype='edit';
				// this.isdisabled=true;
				this.getDetailFn()
			}
		},
		methods: {
			checkPermi,
			checkRole,
			getEditFn(){
				this.isdisabled=false;
			},
			statusFormats(data, list,type) {
				var aite=selectValueKey(list, data);
				if(type=='sbzt'){
					this.sbztidx=aite.key
				}
				return aite.actions;
			},
			init(){
				assetTypeTree().then(res=>{
					if(res.code==200){
						this.assetTree=res.data;
					}
				})
				//设备状态
				getDictionaryFn('shebei_status').then(res=>{
					if(res.code==200){
						if(res.data){
							this.sbztList = res.data.map(v => {
								return {
									dictLabel: v.dictLabel,
									dictValue: v.dictValue
								}
							})
						}
					}
				})	
			},
			onchange(e){
				var list=e.detail.value;
				var id=this.datainfo.assetId
				var name=selectValue(list,id)
				this.datainfo.assetName=name;
			},
			getDetailFn(){
				var that=this;
				assetsDet(this.id).then(res=>{
					if(res.code==200){
						this.datainfo=res.data;
						if(res.data.equipmentCoverPhoto){
							this.fmphofile=res.data.equipmentCoverPhoto.split(',')
						}
						if(res.data.equipmentPhotos){
							this.phofile=res.data.equipmentPhotos.split(',')
						}
					}
				})
			},
			getSubmit(){
				var that=this;
				this.$refs.form.validate().then(res => {
					var params=JSON.parse(JSON.stringify(this.datainfo))
					var phofile=JSON.parse(JSON.stringify(this.phofile))
					if(phofile&&phofile.length){
						params.equipmentPhotos=this.phofile.join(',');
					}
					var fmphofile=JSON.parse(JSON.stringify(this.fmphofile))
					if(fmphofile&&fmphofile.length){
						params.equipmentCoverPhoto=this.fmphofile.join(',');
					}
					if(!params.assetId){
						this.$toast('请选择资产类型')
						return
					}
					if(!params.equipmentName){
						this.$toast('请输入资产名称')
						return
					}
					if(!params.equipmentNumber){
						this.$toast('请输入资产编号')
						return
					}
					if(this.ptype=='add'){
						assetsAdd(params).then(res=>{
							if(res.code==200){
								this.$toast("新增成功")
								setTimeout(function(){
									uni.$emit("assetsList")
									uni.navigateBack({
										delta:1
									})
								},1500)
							}
						})
					}else{
						assetsPut(params).then(res=>{
							if(res.code==200){
								this.$toast("修改成功")
								setTimeout(function(){
									uni.$emit("assetsList")
									uni.navigateBack({
										delta:1
									})
								},1500)
							}
						})
					}	
				})
			},
			bindDateChange(e){
				var val=e.detail.value;
				this.datainfo.equipmentStatus=this.sbztList[val].dictValue;
				this.sbzt=this.sbztList[val].dictLabel;
			},
			bindDateChangea(e){
				var val=e.detail.value;
				this.datainfo.purchaseDate=val;
			},
			bindDateChangeb(e){
				var val=e.detail.value;
				this.datainfo.storageTime=val;
			},
			bindDateChangec(e){
				var val=e.detail.value;
				this.datainfo.outboundTime=val;
			},
			getPreview(idx,arr) {
				var newArr=[];
				arr.forEach(ite=>{
					var ds=this.baseUrl+ite
					newArr.push(ds)
				})
				uni.previewImage({
					urls: newArr,
					current:idx,
					success: function(data) {},
					fail: function(err) {}
				});
			},
			getDelFn(idx,type){
				var that=this;
				uni.showModal({
					title: '确认删除',
					content: "是否确认删除",
					cancelText: '取消',
					confirmText: '确认',
					success: function(res) {
						if (res.confirm) {
							if(type=='fm'){
								that.fmphofile.splice(idx,1)
							}else{
								that.phofile.splice(idx,1)
							}
							
						} else if (res.cancel) {
						}
					}
				});
			},
			getaddImage(type){
				if(this.isdisabled){
					return
				}
				let that = this;
				let file =[],count=9
				uni.chooseImage({
					success:function(res){
						let img= res.tempFilePaths;
						if(img.length + file.length > count){
							uni.showToast({
								title: '最多上传'+count+'张图片',
								icon: 'none',
								duration: 2000
							})
						}else{
							let imglen = res.tempFilePaths.length;
							var fuwufile = [];
							uploadmore('/common/upload',img,0,0,0,imglen,fuwufile,function(rs){
								if(type=="fm"){
									that.fmphofile = that.fmphofile.concat(rs);
								}else{
									that.phofile = that.phofile.concat(rs);
								}
							})	
						}
					}
				});
			},
		}
	}
</script>
<style>
	page{background: #F3F3F0;}
</style>
<style lang="scss" scoped>
.check /deep/ .uni-forms-item{min-height: 106rpx;box-sizing: border-box;display: flex;align-items: center;margin-bottom: 0;border-bottom: 2rpx solid #E6E6E6;padding:10rpx 0;}
.check .cbox /deep/ .uni-forms-item:last-child{border: none;}
.check /deep/ .uni-forms-item__label{font-weight: bold;font-size: 26rpx;color: #222327;flex: 0 0 auto;width: auto !important;}
.check /deep/ .uni-easyinput{flex: 1;text-align: right;font-size: 26rpx;color: #222327;}
.check /deep/ .uni-easyinput__content-textarea{min-height: 40rpx;font-size: 26rpx;}
.check /deep/ .uni-easyinput__placeholder-class{font-size: 26rpx;color: #AAAAAA;}
.check /deep/ .uni-easyinput__content-input{padding-left: 0 !important;}
.check /deep/ .uni-input-input{font-size: 26rpx;}
.check /deep/ .uni-textarea-textarea{font-size: 26rpx;}
.check /deep/ .is-disabled{color: #222327;background-color: #ffffff !important;}
.check /deep/ .uni-data-checklist .checklist-group .checklist-box{margin:10rpx 8rpx 10rpx 16rpx;}
.check /deep/ .uni-data-checklist{flex: 0 0 auto;}
.check{min-height: 100vh;padding: 20rpx 18rpx 110rpx;box-sizing: border-box;box-sizing: border-box;display: flex;flex-direction: column;}
.cbox{background: #FFFFFF;border-radius: 20rpx;flex: 1;margin-bottom: 24rpx;display: flex;flex-direction: column;flex:0 0 auto;
	.chmain{
		padding: 0 32rpx;
		.rimg{width: 16rpx;height: 28rpx;flex: 0 0 auto;margin-left: 20rpx;
			image{width: 100%;height: 100%;}
		}
		.checkimg{width: 80rpx;height: 40rpx;margin-right: 8rpx;}
		.imgs{display: flex;align-items: center;flex-wrap: wrap;margin-top: 60rpx;
			.img{width: 142rpx;height:142rpx;border-radius: 20rpx;margin: 0 28rpx 20rpx 0;position: relative;
			&:nth-of-type(4n){margin-right: 0;}
			}
			.pimg{width: 100%;height: 100%;border-radius: 20rpx;}
			.del{width: 24rpx;height: 24rpx;position: absolute;right: 0;top: 0;}
		}
		.addbox{background: #F0F0F0;border-radius: 20rpx;display: flex;align-items: center;flex-direction: column;width: 142rpx;height:142rpx;justify-content: center;margin-bottom: 20rpx;
			image{width: 48rpx;height: 42rpx;margin-bottom: 12rpx;}
			view{font-weight: 500;font-size: 24rpx;color: #666666;}
		}
	}
	
}
</style>