<template>
	<view>
		<!-- <view class="uni-common-mt">
			<view class="uni-list">
				 <view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in list" :key="index">
					  <view class="uni-padding-wrap">
							<view class="uni-flex uni-row">
								<view class="mydefineText" style="width: 200upx;">{{item.name}}</view>
								<view class="mydefineText rightText">{{item.value}}</view>
							 </view>
					  </view>
				 </view>
			 </view>
		</view> -->
		<view class="uni-common-mt">
			<view class="uni-list">
				<view class="uni-list-cell" hover-class="uni-list-cell-hover">
					<view class="uni-padding-wrap">
						<view class="uni-flex uni-row">
							<view class="mydefineText" style="width: 200upx;"><text class="red">*</text>设备编号</view>
							<view class="mydefineText rightText">{{deviceInfo.serialno}}</view>
						</view>
					</view>
				</view>
				<view class="uni-list-cell" hover-class="uni-list-cell-hover">
					<view class="uni-padding-wrap">
						<view class="uni-flex uni-row">
							<view class="mydefineText" style="width: 200upx;"><text class="red">*</text>设备名称</view>
							<view class="mydefineText rightText">{{deviceInfo.name}}</view>
						</view>
					</view>
				</view>
				<view class="uni-list-cell" hover-class="uni-list-cell-hover">
					<view class="uni-padding-wrap">
						<view class="uni-flex uni-row">
							<view class="mydefineText" style="width: 200upx;"><text class="red">*</text>设备类别</view>
							<view class="mydefineText rightText">{{deviceInfo.type_mes}}</view>
						 </view>
					</view>
				 </view>
			</view>
		</view>
		<view class="uni-common-mt">
			<view class="uni-list">
				<view class="uni-list-cell" hover-class="uni-list-cell-hover">
					<view class="uni-padding-wrap">
						<view class="uni-flex uni-row">
							<view class="mydefineText" style="width: 200upx;">品牌</view>
							<view class="mydefineText rightText">{{deviceInfo.factory}}</view>
						</view>
					</view>
				</view>
				<view class="uni-list-cell" hover-class="uni-list-cell-hover">
					<view class="uni-padding-wrap">
						<view class="uni-flex uni-row">
							<view class="mydefineText" style="width: 200upx;">规格型号</view>
							<view class="mydefineText rightText">{{deviceInfo.model}}</view>
						</view>
					</view>
				</view>
				<view class="uni-list-cell" hover-class="uni-list-cell-hover">
					<view class="uni-padding-wrap">
						<view class="uni-flex uni-row">
							<view class="mydefineText" style="width: 200upx;">主设备</view>
							<view class="mydefineText rightText">[{{deviceInfo.parent_serialno}}]{{deviceInfo.parent_name}}</view>
						 </view>
					</view>
				 </view>
			</view>
		</view>
		<view class="uni-common-mt">
			<view class="uni-list">
				<view class="uni-list-cell" hover-class="uni-list-cell-hover">
					<view class="uni-padding-wrap">
						<view class="uni-flex uni-row">
							<view class="mydefineText" style="width: 200upx;">设备来源</view>
							<view class="mydefineText rightText">{{deviceInfo.souce_name}}</view>
						</view>
					</view>
				</view>
				<view class="uni-list-cell" hover-class="uni-list-cell-hover">
					<view class="uni-padding-wrap">
						<view class="uni-flex uni-row">
							<view class="mydefineText" style="width: 200upx;">购置时间</view>
							<view class="mydefineText rightText">{{deviceInfo.buy_time}}</view>
						</view>
					</view>
				</view>
				<view class="uni-list-cell" hover-class="uni-list-cell-hover">
					<view class="uni-padding-wrap">
						<view class="uni-flex uni-row">
							<view class="mydefineText" style="width: 200upx;">使用年限</view>
							<view class="mydefineText rightText">{{deviceInfo.service_year||''}}年</view>
						 </view>
					</view>
				 </view>
				 <view class="uni-list-cell" hover-class="uni-list-cell-hover">
				 	<view class="uni-padding-wrap">
				 		<view class="uni-flex uni-row">
				 			<view class="mydefineText" style="width: 200upx;">启用时间</view>
				 			<view class="mydefineText rightText">{{deviceInfo.using_time}}</view>
				 		 </view>
				 	</view>
				  </view>
				  <view class="uni-list-cell" hover-class="uni-list-cell-hover">
				  	<view class="uni-padding-wrap">
				  		<view class="uni-flex uni-row">
				  			<view class="mydefineText" style="width: 200upx;">预计报废时间</view>
				  			<view class="mydefineText rightText">{{deviceInfo.end_year}}</view>
				  		 </view>
				  	</view>
				   </view>
				   <view class="uni-list-cell" hover-class="uni-list-cell-hover">
				   	<view class="uni-padding-wrap">
				   		<view class="uni-flex uni-row">
				   			<view class="mydefineText" style="width: 200upx;">报修到期时间</view>
				   			<view class="mydefineText rightText">{{deviceInfo.repair_end}}</view>
				   		 </view>
				   	</view>
				    </view>
			</view>
		</view>
		<view class="uni-common-mt">
			<view class="uni-list">
				<view class="uni-list-cell" hover-class="uni-list-cell-hover">
					<view class="uni-padding-wrap">
						<view class="uni-flex uni-row">
							<view class="mydefineText" style="width: 200upx;">使用单位</view>
							<view class="mydefineText rightText">{{deviceInfo.service_name}}</view>
						</view>
					</view>
				</view>
				<view class="uni-list-cell" hover-class="uni-list-cell-hover">
					<view class="uni-padding-wrap">
						<view class="uni-flex uni-row">
							<view class="mydefineText" style="width: 200upx;">使用部门</view>
							<view class="mydefineText rightText">{{deviceInfo.dept_name}}</view>
						</view>
					</view>
				</view>
				<view class="uni-list-cell" hover-class="uni-list-cell-hover">
					<view class="uni-padding-wrap">
						<view class="uni-flex uni-row">
							<view class="mydefineText" style="width: 200upx;">安装地点</view>
							<view class="mydefineText rightText">{{deviceInfo.site}}</view>
						 </view>
					</view>
				 </view>
			</view>
		</view>
		<view class="uni-common-mt">
			<view class="uni-list">
				<view class="uni-list-cell" hover-class="uni-list-cell-hover">
					<view class="uni-padding-wrap">
						<view class="uni-flex uni-row">
							<view class="mydefineText" style="width: 200upx;"><text class="red">*</text>负责人</view>
							<view class="mydefineText rightText">{{deviceInfo.user_name}}</view>
						</view>
					</view>
				</view>
				<view class="uni-list-cell" hover-class="uni-list-cell-hover">
					<view class="uni-padding-wrap">
						<view class="uni-flex uni-row">
							<view class="mydefineText" style="width: 200upx;"><text class="red">*</text>使用情况</view>
							<view class="mydefineText rightText">{{deviceInfo.status_name}}</view>
						</view>
					</view>
				</view>
				<view class="uni-list-cell" hover-class="uni-list-cell-hover">
					<view class="uni-padding-wrap">
						<view class="uni-flex uni-row">
							<view class="mydefineText" style="width: 200upx;">设备用途</view>
							<view class="mydefineText rightText">{{deviceInfo.use_name}}</view>
						 </view>
					</view>
				 </view>
			</view>
		</view>
		<view class="uni-common-mt">
			<view class="uni-list">
				<view class="uni-list-cell" hover-class="uni-list-cell-hover">
					<view class="uni-padding-wrap">
						<view class="uni-flex uni-row">
							<view class="mydefineText" style="width: 200upx;">生产商</view>
							<view class="mydefineText rightText">{{deviceInfo.factory_name}}</view>
						</view>
					</view>
				</view>
				<view class="uni-list-cell" hover-class="uni-list-cell-hover">
					<view class="uni-padding-wrap">
						<view class="uni-flex uni-row">
							<view class="mydefineText" style="width: 200upx;">生产商地址</view>
							<view class="mydefineText rightText">{{deviceInfo.factory_address}}</view>
						</view>
					</view>
				</view>
				<view class="uni-list-cell" hover-class="uni-list-cell-hover">
					<view class="uni-padding-wrap">
						<view class="uni-flex uni-row">
							<view class="mydefineText" style="width: 200upx;">联系人</view>
							<view class="mydefineText rightText">{{deviceInfo.factoryLinkmanName}}</view>
						 </view>
					</view>
				 </view>
				 <view class="uni-list-cell" hover-class="uni-list-cell-hover">
				 	<view class="uni-padding-wrap">
				 		<view class="uni-flex uni-row">
				 			<view class="mydefineText" style="width: 200upx;">联系电话</view>
				 			<view class="mydefineText rightText">{{deviceInfo.factory_phone}}</view>
				 		 </view>
				 	</view>
				  </view>
			</view>
		</view>
		<view class="uni-common-mt">
			<view class="uni-list">
				<view class="uni-list-cell" hover-class="uni-list-cell-hover">
					<view class="uni-padding-wrap">
						<view class="uni-flex uni-row">
							<view class="mydefineText" style="width: 200upx;">供应商</view>
							<view class="mydefineText rightText">{{deviceInfo.supplier_name}}</view>
						</view>
					</view>
				</view>
				<view class="uni-list-cell" hover-class="uni-list-cell-hover">
					<view class="uni-padding-wrap">
						<view class="uni-flex uni-row">
							<view class="mydefineText" style="width: 200upx;">供应商地址</view>
							<view class="mydefineText rightText">{{deviceInfo.supplieraddress}}</view>
						</view>
					</view>
				</view>
				<view class="uni-list-cell" hover-class="uni-list-cell-hover">
					<view class="uni-padding-wrap">
						<view class="uni-flex uni-row">
							<view class="mydefineText" style="width: 200upx;">联系人</view>
							<view class="mydefineText rightText">{{deviceInfo.supplierLinkmanName}}</view>
						 </view>
					</view>
				 </view>
				 <view class="uni-list-cell" hover-class="uni-list-cell-hover">
				 	<view class="uni-padding-wrap">
				 		<view class="uni-flex uni-row">
				 			<view class="mydefineText" style="width: 200upx;">联系电话</view>
				 			<view class="mydefineText rightText">{{deviceInfo.supplier_phone}}</view>
				 		 </view>
				 	</view>
				  </view>
			</view>
		</view>
		<view class="uni-common-mt">
			<view class="uni-list">
				<view class="uni-list-cell" hover-class="uni-list-cell-hover">
					<view class="uni-padding-wrap">
						<view class="uni-flex uni-row">
							<view class="mydefineText" style="width: 200upx;">服务商</view>
							<view class="mydefineText rightText">{{deviceInfo.service_name}}</view>
						</view>
					</view>
				</view>
				<view class="uni-list-cell" hover-class="uni-list-cell-hover">
					<view class="uni-padding-wrap">
						<view class="uni-flex uni-row">
							<view class="mydefineText" style="width: 200upx;">服务商地址</view>
							<view class="mydefineText rightText">{{deviceInfo.service_address}}</view>
						</view>
					</view>
				</view>
				<view class="uni-list-cell" hover-class="uni-list-cell-hover">
					<view class="uni-padding-wrap">
						<view class="uni-flex uni-row">
							<view class="mydefineText" style="width: 200upx;">联系人</view>
							<view class="mydefineText rightText">{{deviceInfo.serviceLinkmanName || ''}}</view>
						 </view>
					</view>
				 </view>
				 <view class="uni-list-cell" hover-class="uni-list-cell-hover">
				 	<view class="uni-padding-wrap">
				 		<view class="uni-flex uni-row">
				 			<view class="mydefineText" style="width: 200upx;">联系电话</view>
				 			<view class="mydefineText rightText">{{deviceInfo.service_phone}}</view>
				 		 </view>
				 	</view>
				  </view>
			</view>
		</view>
		<view class="goHome" @click='goMain()'>
			<img src="../../static/img/gohome.png">
		</view>
	</view>
</template>

<script>
	export default {  
		data() {
			return {
				deviceId:'',
				deviceInfo:{}
			}
		},
		onLoad(options) {
			//获取当前设备的详情方法。
			this.$http.request({
				url: '/apis/device/detail',
				params:{
					deviceId: options.deviceId 
			},
			}).then(res=>{
				if(res.data.code == 0 && res.data.data){
					var useTime = res.data.data.using_time;  //开始使用时间。
					var service_year = res.data.data.service_year;	//使用年限。
					var end_year = '';
					if(useTime && service_year){
						end_year = this.addDate(useTime,'y',service_year);
					}
					this.deviceInfo = res.data.data;
					this.deviceInfo.end_year = end_year;
				}
			}).catch(err=>{
			});
		},
		methods: {
			    /**
			     * 对日期进行加减操作 该方法不会修改传入的Date对象
			     * @param date 如果为null 则表示为当前日期
			     * @param unit 单位 y:年 M:月 d:日 h:小时 m:分钟 s:秒
			     * @param value 增加的数值 可以为负数
			     * @return 返回值为修改后的新的Date对象
			     */
			    addDate:function(date,unit,value){
					date =  new Date(date.replace(/-/g, "/"));
			        var units = {
			            y:'FullYear',
			            M:'Month',
			            d:'Date',
			            h:'Hours',
			            m:'Minutes',
			            s:'Seconds'
			        }
			
			        try{
			            if(units[unit]){
			                date['set'+units[unit]](date['get'+units[unit]]() + parseInt(value));
			            }
			        }catch (e){
			            console.error(e);
			        }  
					var day1 = new Date();
					var time = date.getFullYear()+"-" + this.minTenAndZero(date.getMonth()+1) + "-" + this.minTenAndZero(date.getDate())+
						 " " + this.minTenAndZero(date.getHours()) + ":" + this.minTenAndZero(date.getMinutes()) + ":" + this.minTenAndZero(date.getSeconds()); 
			        return time;
			    },
				minTenAndZero:function(value){
				    return value<10?('0'+value):value;
				}
		}
	}
</script>

<style>
	.mydefineText {
		margin: 7px 5px;
		height: 70upx;
		line-height: 70upx;
		color: #999;
		font-size: 28upx;
	}
	.rightText{
		text-align: right;
		color: #333;
		-webkit-flex: 1;
		flex: 1;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden
	}
	.red{color: #f00;}
</style>