<template>
	<view>
		<view class="top" v-if="info.image_list && info.image_list.length>0">
			<u-swiper :list="info.image_list" @click="click" height="240"></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="" v-if="info.type == 3">
					<image src="/static/chushou.png" style="width: 56rpx;height: 32rpx;margin-right: 8rpx;" mode="" v-else-if="info.type == 4">
					<image src="/static/need2.png" style="width: 56rpx;height: 32rpx;margin-right: 8rpx;" mode=""  v-else-if="info.type == 1">
					<image src="/static/need.png" style="width: 56rpx;height: 32rpx;margin-right: 8rpx;" mode="" v-else>
					</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;" v-if="info.is_license == 1" 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" style="">
						{{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="" @click="call">
					<u-button text="立即联系" type="primary"></u-button>
				</view>
			</view>
			<view class="box">
				<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" v-if="item.type == 3 || item.type == 4"></item>
					<item-sell v-else :info="item"></item-sell>
				</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>

					<button class="sharestyle" open-type="share" @click="goshare">

					</button>
				</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;" @click="goTs">
					<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;" @click="gophone">
				<u-button text="马上咨询" color="linear-gradient(to right, #FFC773,#ED681D)"
					></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'
	import ItemSell from '@/component/sellItem/sellItem.vue'
	export default {
		components: {
			item,
			ItemSell
		},
		data() {
			return {
				info: {},
				show: false,
				isShowAddGroup: false,
				list1: [],
				images: [],
				isFill: false,
				resList: [],
				call2: '',
				call1: '',
				phone: "",
			}
		},
		methods: {
			//咨询
			gophone() {
				uni.makePhoneCall({
					phoneNumber: this.call1 //仅为示例
				});
			},
			onClose() {

			},
			//立即联系
			call(val) {
				uni.makePhoneCall({
					phoneNumber: this.call2 //仅为示例
				});
			},
			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()
				})
			},
			appShare(scene) {
				let that = this
				let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
				let curRoute = routes[routes.length - 1].$page.fullPath // 获取当前页面路由，也就是最后一个打开的页面路由
				uni.share({
					provider: "weixin", //分享服务提供商（即weixin|qq|sinaweibo）
					type: 0, //分享形式
					href: `${HTTP_IP_URL}${curRoute}&spread=${that.uid}`, //跳转链接
					title: that.storeInfo.storeName, //分享内容的标题
					summary: that.storeInfo.storeInfo, //分享内容的摘要
					imageUrl: that.storeInfo.image, //图片地址
					success: function(res) {
						that.posters = false; //成功后关闭底部弹框
					},
					fail: function(err) {
						uni.showToast({
							title: '分享失败',
							icon: 'none',
							duration: 2000
						})
						that.posters = false;
					}
				});
			},
			goTs(){
				uni.navigateTo({
					url:'/pages/subPages/ad'
				})
			},
			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.phone = res.data.contract
					this.resList = res.data.rec_list.data
					this.call2 = res.data.contract
					this.call1 = res.data.ask_phone || res.data.contract
					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">
	.top {
		height: 480rpx;
	}

	.addGroup1 {
		background: url('http://equiphappy.shs.broing.cn/assets/miniprogram');
		width: 622rpx;
		height: 950rpx;
		position: relative;
	}

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

	.sharestyle {
		position: absolute;
		left: -10;
		top: -10;
		width: 100rpx;
		height: 100rpx;
		background-color: transparent !important;

		&:after {
			border: none;
		}
	}

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

		.imgbox {
			image {
				width: 100%;
			}
		}
	}

	.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;
		min-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>