<template>
	<view class="content">
		<view class="header">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="(item,index) in swiperList" :key="index" class="swiper-item">
					<image class="img-swiper" :src="item"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="device-con">
			<view class="device-tip">设备名称</view>
			<view class="device-content">{{device.equipmentName}}</view>
			<view class="device-tip">设备信息</view>
			<view class="device-content"  v-html="device.equipmentContent"></view>
			<view class="device-tip">设备所在场所</view>
			<view class="device-content">{{device.equipmentLocationName}}</view>
			<view class="device-tip">设备位置</view>
			<view class="device-content">{{device.equipmentPostion}}</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				deviceId:'',
				swiperList: [],
				device:{}
			}
		},
		methods:{
			async getDetail() {
				const res = await this.$myRequest({
					url: '/system/equipment/' + this.deviceId,
				})
				if(res.data.code == 200){
					this.device = res.data.data;
					if(res.data.data.equipmentPic !=null && res.data.data.equipmentPic != '' && res.data.data.equipmentPic.includes(',')){
						var list = [];
						list = res.data.data.equipmentPic.split(',')
						for (let i = 0; i < list.length; i++) {
							list[i] = this.baseUrl + list[i]
						}
						this.swiperList = list;
					}else{
						this.swiperList.push(this.baseUrl + res.data.data.equipmentPic) 
					}
				}
				
			},
		},
		onLoad(option){
			this.swiperList = [];
			this.deviceId = option.id;
			this.getDetail();
		}
	}
</script>

<style lang="less">
	.content{
		.header {
			width: 90%;
			margin: 0 auto;
			margin-top: 20rpx;
			height: 360rpx;
		
			.swiper {
				width: 100%;
				height: 100%;
				border-radius: 12rpx;
				.swiper-item{
					width: 100%;
					height: 100%;
					border-radius: 12rpx;
					.img-swiper {
						width: 100%;
						height: 100%;
						border-radius: 12rpx;
					}
				}
				
			}
		
			image {
				width: 100%;
				height: 100%;
			}
		}
		.device-con{
			    margin: 10px 10px;
			    padding: 10px;
				    line-height: 25px;
					    padding-bottom: 20px;
					    border-radius: 10px;
				.device-title{
					font-size: 20px;
					    font-weight: bold;
						word-break: break-word;
				}
				.device-content{
						white-space: pre-wrap;
						    word-break: break-word;
					    font-weight: 600;
					        font-size: 14px;
							border-bottom: 1px solid #ECF2FE;
							    padding-bottom: 5px;
						&.info{
							  color: #333;
							  font-weight: 500;
							      font-size: 13px;
						}
				}
				.device-tip{
					    font-size: 13px;
					    color: #888;
					    font-weight: 500;
					    margin-top: 10px;
				}
		}
	}
</style>
