<template>
	<view >
		<view class="top">
			<u-swiper :list="info.image_list" @change="change" @click="click"></u-swiper>
		</view>
		<view class="main" style="margin: 24rpx 24rpx 220rpx 24rpx;">
			<view class="" style="margin-bottom: 24rpx;" @click="goQun">
				<image src="http://equiphappy.shs.broing.cn/assets/miniprogram/qun.png" style="height: 152rpx; width: 100%;" mode=""></image>
			</view>
			<view class="box">
				<view class="flexBox" style="margin-bottom: 24rpx;">
					<image src="../../static/chuzu.png" style="width: 56rpx;height: 32rpx;margin-right: 8rpx;" mode="">
					</image>
					<p style=" color: #000000e6;font-size: 34rpx;font-weight: 500;">{{info.category.name + info.brand.name + info.xinghao.name}}</p>
				</view>
				<view class="flexBox" style="justify-content: space-between;">
					<view class="flexBox">
						<image src="/static/logo.png" style="width: 164rpx;height: 44rpx; margin-right: 16rpx;" mode="">
						</image>
					<view  style="display: flex; align-items: center;" >
						<view style="margin:0 5rpx " v-for="item in info.tag_list">
							<u-tag :text="item.name" plain size="mini" type="info"></u-tag>
						</view>
					</view>
					</view>
					<view class="" style="color:#E63D27">
						{{info.price}}/月
					</view>
				</view>
				<view class="flexBox" style="justify-content: space-evenly;margin-top: 40rpx;">
					<view class="itembox"  >
						<p class="itembox_title">{{info.brand.name|| '-'}}</p>
						<p class="itembox_desc">设备品牌</p>
					</view>
					<view class="itembox"  >
						<p class="itembox_title">{{info.year || '-'}}</p>
						<p class="itembox_desc">出厂时间</p>
					</view>
					<view class="itembox"  >
						<p class="itembox_title">{{info.xinghao.name || '-'}}</p>
						<p class="itembox_desc">设备型号</p>
					</view>
					<view class="itembox"  >
						<p class="itembox_title">{{info.hours || '-'}}</p>
						<p class="itembox_desc">表显小时数</p>
					</view>
					
				</view>
			</view>
			<view class="box" style="height: auto;">
				<!-- <view class="flexBox" style="justify-content: space-between;">
					<view class="flexBox">
						<image src="../../static/col.png" style="width: 40rpx; height: 40rpx;margin-right: 16rpx;" mode=""></image>
						<p style=" color: #000000e6;font-size: 32rpx;font-weight: 500;">设备规格</p>
					</view>
					<view class="" style=" color: #00000066;font-size: 26rpx;font-weight: 400;">
						更多参数 >
					</view>
				</view> -->
				<!-- <view class="flexBox" style="flex-direction: column;margin-top: 32rpx	;">
					<view class="flexBox" style="justify-content: space-between; width: 100%;">
						<view class="flexBox">
							<p class="title">铲斗容量</p>
							<p class="desc">123</p>
						</view>
						<view class="flexBox" >
							<p class="title">铲斗容量</p>
							<p class="desc">123</p>
						</view>
					</view>
					<view class="flexBox" style="justify-content: space-between; width: 100%;">
						<view class="flexBox">
							<p class="title">铲斗容量</p>
							<p class="desc">123</p>
						</view>
						<view class="flexBox">
							<p class="title">铲斗容量</p>
							<p class="desc">123</p>
						</view>
					</view>
				</view> -->
				<view class="">
					<view class="flexBox" style="margin-bottom: 24rpx;">
						<image src="../../static/col.png" style="width: 40rpx; height: 40rpx;margin-right: 16rpx;" mode=""></image>
						<p style=" color: #000000e6;font-size: 32rpx;font-weight: 500;">设备亮点</p>
					</view>
					<view class="fBox">
						{{info.bright}}
					</view>
				</view>
			</view>
			<view class="box flexBox" style="height: 128rpx;display: flex;justify-content: space-between;">
				<view class="" style="display: flex; flex-direction: column;">
					<p style=" color: #000000e6;font-size: 28rpx;font-weight: 500;">设备乐管家</p>
					<p style=" color: #00000066;font-size: 24rpx;font-weight: 400;">专注建筑工程设备经理</p>
				</view>
				<view class="">
					<u-button  text="立即联系" type="primary" @click="call(call)"></u-button>
				</view>
			</view>
			<view class="box" style="height: 872rpx;">
				<view class="flexBox" style="margin-bottom: 24rpx;">
					<image src="../../static/col.png" style="width: 40rpx; height: 40rpx;margin-right: 16rpx;" mode=""></image>
					<p style=" color: #000000e6;font-size: 32rpx;font-weight: 500;">设备图片</p>
				</view>
				<view class="imgbox" v-for="item in info.image_list">
					<image :src="item" mode=""></image>
				</view>
			</view>
			<p style="color: #000000e6;font-size: 32rpx;font-weight: 500;margin-bottom: 24rpx;" >相似设备</p>
			<view class="" v-if="resList && resList.length>0">
				<view class="" v-for="item in resList ">
					<item  :info="item" :isBtn="false"></item>
				</view>
			</view>
			<view class="box" v-else>
				<u-empty
				>
				</u-empty>
			</view>
		</view>
		<view class="fixB flexBox" style="justify-content: space-around;">
			<view class="flexBox" >
				<view class="flexBox" style="flex-direction: column; margin: 0 24rpx;">
					<image src="../../static/share.png" style="width: 48rpx;height: 48rpx;" mode=""></image>
					<text style=" color: #000000e6;font-size: 22rpx;font-weight: 400;">分享</text>
				</view>
				<view class="flexBox" style="flex-direction: column; margin: 0 24rpx;" @click="goStar">
					<image src="../../static/star.png" v-if="info.is_follow !== 1" style="width: 48rpx;height: 48rpx;" mode=""></image>
					<image src="../../static/starsFill.png" v-else style="width: 48rpx;height: 48rpx;" mode=""></image>
					
					<text style=" color: #000000e6;font-size: 22rpx;font-weight: 400;"  v-if="info.is_follow !== 1" >收藏</text>
					<text style=" color: #FFB629;font-size: 22rpx;font-weight: 400;" v-else >已收藏</text>
				</view>
				<view class="flexBox" style="flex-direction: column; margin: 0 24rpx;">
					<image src="../../static/warn.png" style="width: 48rpx;height: 48rpx;" mode=""></image>
					<text style=" color: #000000e6;font-size: 22rpx;font-weight: 400;">投诉	</text>
				</view>
			</view>
			<view  style="width: 348rpx;" >
				<u-button  text="马上咨询"  color="linear-gradient(to right, #FFC773,#ED681D)"
					@click="call(call1)"></u-button>
			</view>
		</view>
		<u-popup :show="isShowAddGroup" round="true" closeable="true" @close="onClose">
			<view class="addGroup1">
				<image src="../../static/code1.png"
					style="width: 354rpx;height: 354rpx; position: absolute; top: 330rpx; left: 134rpx;" mode="">
				</image>
			</view>
		</u-popup>
		
		
		<u-overlay :show="show" @click="show = false">
			<view class="warp">
				<image src="http://equiphappy.shs.broing.cn/assets/miniprogram/Group1822@2x.png" mode="" style=""></image>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	import item from '@/component/listItem/listItem.vue'
	export default {
		components: {
			item
		},
		data() {
			return {
				info:{},
				show: false,
				isShowAddGroup: false,
				list1: [
				],
				images:[],
				isFill:false,
				resList:[],
				call:'',
				call1:''
			}
		},
		methods: {
			onClose() {

			},
			call(val){
				wx.makePhoneCall({
					phoneNumber:val
				})
			},
			goQun(){
				this.show = true
			},
			goStar(){
				uni.$u.http.post('/api/common/favorite',{equip_id: this.info.id}).then(res => {
					uni.showToast({
						title:res.msg
					})
					this.getList()
				})
			},
			getList(){
				uni.$u.http.post('/api/equip/get_detail',{id: this.info.id, lat:'',lng:''}).then(res => {
					console.log(res);
					this.info = res.data.data
					this.resList = res.data.rec_list.data
					this.call = res.data.contract
					this.call1 = res.data.ask_phone
					let imgs = JSON.parse(res.data.data.images_json)
					this.isFill = res.data.data
					imgs.forEach(item => {
					   this.images.push(Object.values(item))	
					})
					console.log(this.images.flat(Infinity));
					this.images = this.images.flat(Infinity).filter(item =>  item!=='')
				}).catch(err => {
					console.log(err);
					uni.showToast({
						title: err.msg
					})
				})
			}
		},
		onLoad(option) {
			this.info.id = option.id
			this.getList()
		}
	}
</script>

<style scoped lang="scss">
	.addGroup1 {
		background: url('http://equiphappy.shs.broing.cn/assets/miniprogram');
		width: 622rpx;
		height: 950rpx;
		position: relative;
	}

	.flexBox {
		display: flex;
		align-items: center;
	}

	.box {
		height: 324rpx;
		margin-bottom: 24rpx;
		border-radius: 12rpx;
		padding: 24rpx;
		opacity: 1;
		background: #ffffffff;
	}

	.itembox {
		width: 152rpx;
		height: 112rpx;
		border-radius: 8rpx;
		opacity: 1;
		border: 1rpx solid #0000001a;
		background: #f7f8faff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		&_title{
			 color: #000000e6;
			 font-size: 24rpx;
			 font-weight: 500;
			 margin-bottom: 4rpx;
		}
		&_desc{
			 color: #00000066;
			 font-size: 22rpx;
			 font-weight: 400;
		}
	}
	.title{
		color: #00000066;
		 font-size: 26rpx;
		 font-weight: 400;
		 margin-right: 24rpx;
		 margin-bottom: 24rpx;
	}
	.fBox{
		width: 654rpx;
		height: 168rpx;
		border-radius: 12rpx;
		border: 1rpx solid #fff5e6ff;
		background: linear-gradient(180deg, #fef5ecff 0%, #ffffffff 100%);
	}
	.fixB{
		position: fixed;
		bottom:0;
		width: 100%;
		height: 176rpx;
		opacity: 1;
		background: #ffffffff;
	}
	.desc{
		 color: #000000e6;
		 font-size: 26rpx;
		 font-weight: 400;
		 margin-bottom: 24rpx;
	}
	.warp{
		display: flex;
		
		justify-content: center;
		margin-top: 15%;
	}
</style>