<template>
	<view style="position: relative;">
		<view>
			<image src="../../static/shop_details_back_icon.png"
				style="position: absolute;left: 0;top: 62rpx; z-index: 2;width: 60rpx;height: 60rpx;left: 35rpx;">
			</image>
			<image style="height: 600rpx; z-index: 1;" mode="heightFix" :src="imageUrl">
			</image>
		</view>

		<view
			style="width: 100vw; background-color: #FFFFFF;border-top-left-radius: 20rpx; border-top-right-radius: 20rpx; z-index: 999;position: absolute;top: 560rpx;">
			<view class="title_text">{{shopDetail.name}}</view>
			<view class="flex align-start"
				style="background-color: #FAF6F1; border-radius: 15rpx;margin-top: 50rpx;margin-left: 20rpx;margin-right: 20rpx;">
				<image mode="aspectFill"
					style="width: 145rpx;height: 116rpx; border-radius: 10rpx;margin-top: 37rpx;margin-bottom: 37rpx;margin-left: 20rpx;"
					:src="imageUrl"></image>

				<view style="margin-top: 35rpx;margin-left: 21rpx; margin-right: 20rpx;width: 100%;">
					<view>
						<text class="wb_hide_2"
							style="font-size: 26rpx;font-weight: bold;color: #111111;">{{shopDetail.merchantName}}</text>
					</view>
					<view class="flex align-center justify-between">
						<text class="age_tag" style="margin-top: 12rpx;">{{shopDetail.storeAge}}年店龄</text>
						<text
							style="margin-top: 18rpx;font-size: 24rpx;color: #D09A6C;">成交{{shopDetail.orderCount}}单</text>
					</view>
					<view class="flex align-center justify-between">
						<view class="flex align-center " style="margin-top: 10rpx;">
							<text style="font-size: 22rpx;color: #FC6035;">综合评分：</text>
							<text
								style="font-size: 24rpx; color: #FC6035;font-weight: bold;">{{shopDetail.score}}</text>
							<view v-for="index of parseInt(shopDetail.score)"
								style="margin-top: 2rpx;margin-left: 5rpx;">
								<image src="../../static/shop_star_icon.png"
									style="width: 24rpx;height: 24rpx; margin-left: 2rpx;"></image>
							</view>

						</view>
						<view class="good_comment" style="margin-top: 10rpx;" v-if="shopDetail.rate">
							好评率{{shopDetail.rate}}%
						</view>


					</view>
				</view>
			</view>
			<view class="flex align-center justify-between"
				style="margin-left: 30rpx;margin-right: 45rpx;margin-top: 43rpx;padding-bottom: 38rpx;border-bottom: #EEEEEE 1rpx solid;">
				<view>
					<view class="flex align-center">
						<image src="../../static/shop_address_icon.png" style="width: 30rpx;height: 30rpx;"></image>
						<text
							style="margin-left: 17rpx;font-size: 26rpx;color: #111111;">{{shopDetail.merchant.detail}}{{shopDetail.merchant.houseNumber}}</text>
					</view>

					<view class="flex align-center" style="margin-top: 24rpx;">
						<image src="../../static/shop_range_icon.png" style="width: 30rpx;height: 30rpx;"></image>
						<text style="margin-left: 17rpx;font-size: 26rpx;color: #111111;">查看范围 ></text>
					</view>

				</view>
				<a :href="'tel:'+shopDetail.merchant.merchantPhone">
					<image style="width: 74rpx; height: 74rpx;" src="../../static/shop_phone_icon.png"></image>
				</a>
				
			</view>

			<view style="margin-top: 32rpx;margin-left: 34rpx;">
				<text style="font-size: 34rpx;font-weight: bold;color: #111111;">公司简介</text>
				<view style="margin-top: 33rpx;" >
					<u-read-more show-height="145" :toggle="true" closeText="展开" color="#666666">
						<rich-text :nodes="shopDetail.merchant.merchantDesc"></rich-text>
					</u-read-more>
				</view>
			</view>



		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				shopDetail: {
					score: 2
				},
				imageUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F3%2F59acfca299212.jpg%3Fdown&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643881861&t=ef9d38a179c4f1ee10d75af21996eafb',
				commentScore: 5.0,
				introContent: '题服务主题服务主题服务主题服务主题服务主题服务主题服题服务主题服务主题服务主题服务主题服务主题服务主题服题服务主题服务主题服务题服务主题服务主题服务主题服务主题服务主题服务主题服题服务主题服务主题服务主题服务主题服务主题服务主题服题服务主题服务主题服务题服务主题服务主题服务主题服务主题服务主题服务主题服题服务主题服务主题服务主题服务主题服务主题服务主题服题服务主题服务主题服务'
			}
		},
		onLoad() {
			this.getMerchantGoods()
		},
		methods: {
			//获取商品主体信息
			getMerchantGoods() {
				this.$u.api.merchantGoods({
					goodsId: 1, //商品id
					bizType: 1 //业务类型（1：家政；2：维修）
				}).then(res => {
					console.log(res.data)
					if (res.code == 200) {
						this.shopDetail = res.data
						this.shopDetail.score = 2
						this.shopDetail.merchant.merchantDesc = this.introContent
						this.shopDetail.merchant.merchantPhone = '12345678901'
						this.shopDetail.merchant.detail = '苏州中心'
						this.shopDetail.merchant.houseNumber='2103'
					}
				}).catch(error => {
					console.log(error)
				})
			},
			
		}
	}
</script>
<style lang="scss" scoped>
	.title_text {
		padding: 41rpx 36rpx 0rpx 36rpx;
		font-size: 34rpx;
		font-weight: bold;
		color: #111111;
	}

	.wb_hide_2 {
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-word;
		white-space: normal !important;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.age_tag {
		width: 98rpx;
		height: 32rpx;
		background: linear-gradient(269deg, #E7C2A1 0%, #E7C2A1 0%, #F4EBE1 100%, #F4EBE1 100%);
		border-radius: 8rpx;
		opacity: 1;
		color: #78341C;
		text-align: center;
		font-size: 22rpx;
		font-weight: 500;
	}

	.good_comment {
		font-size: 22rpx;
		color: #FF1414;
		padding-left: 14rpx;
		padding-right: 14rpx;
		padding-top: 6rpx;
		padding-bottom: 6rpx;
		border: 1px solid #FF9999;
		border-radius: 8rpx;
	}
</style>
