<template>
	<view class="container">
		<view class="body">
			<view class="body-top">
				<view style="z-index: 2;position: relative;">
					<VNavigationBar titleColor="#fff" backgroundColor="rgba(0,0,0,0)">
						<template v-slot:back>
							<image style="width: 56rpx;height: 56rpx;" src="../../static/icons/backIcon.png"
								mode="aspectFit"></image>
						</template>
					</VNavigationBar>
				</view>
				<image class="shopImg" src="" mode="aspectFill"></image>
			</view>
			<view class="shopBody">
				<view class="shopDetail">
					<view class="shopTitle">顺捷汽车维修搭电救援补胎中心</view>
					<view class="rate">
						<view class="rateNumBox">
							<text>4.5</text>
							<image style="width: 28rpx;height: 28rpx;" src="../../static/icons/rateIcon.png"
								mode="aspectFit"></image>
						</view>
						<text>强烈推荐</text>
					</view>
					<view class="shopDetailText">
						<mote-lines-divide :line="3" expandText="全部" foldHint="收起">
							<text class="shopDetailTextLabel">厂家介绍：</text>
							<text class="shopDetailTextValue">
								正安汽车维修服务有限公司成立于1993年10月25日，属东莞市成立最早、规模最大的民营汽修企业之一。现在莞城区及桥头镇开设有二家连锁经营分厂及直属汽车销售部，主要从事汽车销售、售后，
							</text>
						</mote-lines-divide>
					</view>
					<view class="shopDetailFooter">
						<view class="shopAddress">
							<image style="width: 32rpx;height: 32rpx;" src="../../static/icons/order-icon1.png"
								mode="aspectFit"></image>
							<text>济南市历下区福瑞达历下护理院东南门旁</text>
						</view>
						<view class="shopPhone">
							<image style="width: 32rpx;height: 32rpx;" src="../../static/icons/order-icon2.png"
								mode="aspectFit"></image>
							<text>电话</text>
						</view>
					</view>
				</view>
				<view class="busiDetail">
					<view class="busiDetailTitle">顺捷汽车维修搭电救援补胎中心</view>
					<view class="busiList">
						<view v-for="(item, index) in busiList" :key="index" class="busiItem">
							<image class="busiTypeImg" :src="item.image" mode="aspectFill"></image>
							<view class="busiItemInfo">
								<view class="busiItemTitle">{{ item.title }}</view>
								<view class="busiItemDesc">{{ item.desc }}</view>
							</view>
							<view class="busiItemBtn">查看</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="btn" @click="gotoReservation">开始预约</view>
		</view>
	</view>
</template>

<script>
	import VNavigationBar from '@/components/VNavigationBar.vue'
	export default {
		components: {
			VNavigationBar
		},
		data() {
			return {
				busiList: [{
					title: '钣金喷漆维修',
					desc: '钣金喷漆维修是一个汽车修理的技术手段，此方面汽车钣金等于汽车钣金修理，指汽车发生碰撞后要对车身进行修复，也即除对车身进行防腐和装饰的喷涂工作外其余的所有工作。如汽车车身损伤的分析，汽车车身的测量，汽车车身钣金的整形，拉伸矫正，去应力焊接，以及汽车车身附件装配，调整等工作。',
					image: ''
				}, {
					title: '钣金喷漆维修',
					desc: '钣金喷漆维修是一个汽车修理的技术手段，此方面汽车钣金等于汽车钣金修理，指汽车发生碰撞后要对车身进行修复，也即除对车身进行防腐和装饰的喷涂工作外其余的所有工作。如汽车车身损伤的分析，汽车车身的测量，汽车车身钣金的整形，拉伸矫正，去应力焊接，以及汽车车身附件装配，调整等工作。',
					image: ''
				}, {
					title: '钣金喷漆维修',
					desc: '钣金喷漆维修是一个汽车修理的技术手段，此方面汽车钣金等于汽车钣金修理，指汽车发生碰撞后要对车身进行修复，也即除对车身进行防腐和装饰的喷涂工作外其余的所有工作。如汽车车身损伤的分析，汽车车身的测量，汽车车身钣金的整形，拉伸矫正，去应力焊接，以及汽车车身附件装配，调整等工作。',
					image: ''
				}, {
					title: '钣金喷漆维修',
					desc: '钣金喷漆维修是一个汽车修理的技术手段，此方面汽车钣金等于汽车钣金修理，指汽车发生碰撞后要对车身进行修复，也即除对车身进行防腐和装饰的喷涂工作外其余的所有工作。如汽车车身损伤的分析，汽车车身的测量，汽车车身钣金的整形，拉伸矫正，去应力焊接，以及汽车车身附件装配，调整等工作。',
					image: ''
				}, ]
			};
		},
		methods: {
			// 去预约
			gotoReservation() {
				uni.navigateTo({
					url: '/pages/myReservation/addReservation'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.container {
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #fff;
		padding-top: env(safe-area-inset-top);
		padding-bottom: env(safe-area-inset-bottom);

		.body {
			flex: 1;
			height: 0;
			overflow: auto;
		}

		.body-top {
			position: relative;
			width: 750rpx;
			height: 468rpx;

			.shopImg {
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				background-color: #eee;
			}

			.back {}
		}

		.shopBody {
			position: relative;
			top: -50rpx;
			overflow: auto;
			padding-bottom: 20rpx;
		}

		.shopDetail {
			position: relative;
			z-index: 2;
			padding: 30rpx 32rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(10, 54, 104, 0.1);
			border-radius: 32rpx 32rpx 0rpx 0rpx;

			.shopTitle {
				font-weight: bold;
				font-size: 36rpx;
				color: #333333;
			}

			.rate {
				margin: 30rpx 0;
				box-sizing: border-box;
				width: 282rpx;
				height: 56rpx;
				background: #FFF1DB;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				padding-right: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				font-weight: 500;
				font-size: 28rpx;
				color: #E8A321;

				.rateNumBox {
					width: 120rpx;
					height: 56rpx;
					background: linear-gradient(180deg, #FFD187 0%, #FEB33A 100%);
					border-radius: 30rpx 30rpx 30rpx 30rpx;

					display: flex;
					align-items: center;
					justify-content: center;
					column-gap: 4rpx;

					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 1.5;
				}
			}

			.shopDetailText {
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid #EEEEEE;
				margin-bottom: 30rpx;

				.shopDetailTextLabel {
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
				}

				.shopDetailTextValue {
					font-size: 28rpx;
					color: #666666;
				}
			}

			.shopDetailFooter {
				display: flex;
				align-items: center;

				.shopAddress {
					flex: 1;
					width: 0;
					display: flex;
					align-items: center;
					column-gap: 8rpx;
					font-size: 28rpx;
					color: #666666;
					border-right: 1rpx solid #EEEEEE;
					margin-right: 20rpx;
				}

				.shopPhone {
					flex-shrink: 0;
					display: flex;
					flex-direction: column;
					align-items: center;
					row-gap: 4rpx;
					font-size: 24rpx;
					color: #333333;
				}
			}

		}

		.busiDetail {
			padding: 30rpx 32rpx;
			background: #FFFFFF;

			.busiDetailTitle {
				font-weight: bold;
				font-size: 36rpx;
				color: #333333;
			}

			.busiList {
				.busiItem {
					padding: 30rpx 0;
					display: flex;
					align-items: center;
					border-bottom: 1rpx solid #DDDDDD;
					column-gap: 20rpx;
				}

				.busiTypeImg {
					width: 112rpx;
					height: 112rpx;
					background-color: #eee;
				}

				.busiItemInfo {
					flex: 1;
					width: 0;
				}

				.busiItemTitle {
					font-size: 28rpx;
					color: #333333;
				}

				.busiItemDesc {
					font-size: 24rpx;
					color: #858BA0;

					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					word-break: break-all;
				}

				.busiItemBtn {
					width: 100rpx;
					height: 48rpx;
					background: #0174F6;
					border-radius: 24rpx 24rpx 24rpx 24rpx;

					font-size: 28rpx;
					color: #FFFFFF;
					
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}

		.footer {
			padding: 12rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -8rpx 16rpx 0rpx rgba(10, 54, 104, 0.1);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			position: relative;

			.btn {
				width: 510rpx;
				height: 76rpx;
				margin: 0 auto;
				background: #0174F6;
				border-radius: 38rpx 38rpx 38rpx 38rpx;

				display: flex;
				align-items: center;
				justify-content: center;

				font-size: 32rpx;
				color: #FFFFFF;
			}
		}
	}
</style>