<template>
  <!-- #ifdef H5 -->
	<zj-page-layout>
		<view class="head"><span style="font-size: 24rpx;">￥</span>{{ detail.leasePrice }}<span style="font-size: 26rpx;"> 元/月</span></view>
		<view class="content">
			<view class="item">
				<image :src="detail.categoryUrl" mode="aspectFill"></image>
				<view class="right">
					<view class="name">{{detail.name}}</view>
					<view class="name remark">{{detail.repairRemark}}</view>
				</view>
			</view>
			<view class="title">商品详情</view>
			<view class="html-content html-parse1">
				<u-parse :content="detail.content"></u-parse>
			</view>
		</view>
		<view class="footer">
		  <!-- <view class="left">
		  	<view class="">立即咨询</view>
		  </view> -->
		  <u-button type="primary" shape="circle" color="#428dff" text="我要租赁" @click="toTenancy"></u-button>
		</view>
	</zj-page-layout>
  <!-- #endif -->
  <!-- #ifndef H5 -->
  <web-view :src="webViewHref(`/packageHome/pages/service/tenancyDetail`, pam,crossPagePam)" @message="crossPage.$listener"></web-view>
  <!-- #endif -->
</template>

<script>
  // #ifdef H5
	export default {
		data() {
			return {
				detail: {},
				id: ''
			}
		},

		onLoad({id}) {
			this.id = id
			this.getDetail(id)
		},

		methods: {
			// 获取品牌列表
			getDetail(id) {
				this.$api.post('/goods/lease/detail',{
					id
				}).then(res => {
					this.detail = res.data;
				})
			},
			toTenancy(){
				this.$navToPage({
				  url: `/packageHome/pages/service/confirmTenancyOrder?id=${this.id}`
				})
			}
		}
	}
  // #endif
  // #ifndef H5
  export default {
    data() {
      return {
        pam: {},
      }
    },

    onLoad(pam) {
      this.pam = pam;
    },
  }
  // #endif
</script>

<style scoped lang="scss">
	.html-parse1{
		
	}
	
	.html-parse1 ::v-deep ._root{
		overflow: hidden !important;
	}

.head{
	margin: 30rpx;
	padding: 20rpx 30rpx 60rpx 30rpx;
	background-image: linear-gradient(to top right, #f87e2f, #fb6b39);
	color: #ffffff;
	font-size: 44rpx;
	font-weight: bold;
	border-radius: 30rpx;
	box-sizing: border-box;
}
.content{
	width: 100%;
	min-height: 90vh;
	background-color: #ffffff;
	border-radius: 50rpx;
	position: absolute;
	top: 120rpx;
	left: 0;
	z-index: 99;
	padding: 30rpx;
	padding-bottom: 120rpx;
	box-sizing: border-box;
	.item{
		display: flex;
		align-items: center;
		padding: 20rpx;
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #dddddd;
		box-sizing: border-box;
		image {
			width: 140rpx;
			height: 140rpx;
			margin-right: 20rpx;
		}
		.right{
			.name{
				font-weight: bold;
				color: #000000;
				font-size: 32rpx;
				line-height: 40rpx;
				margin-bottom: 20rpx;
			}
			.remark{
				font-size: 26rpx;
				color: #59a7ff;
			}
		}
	}
	.title{
		font-weight: bold;
		color: #000000;
		font-size: 32rpx;
		text-align: center;
		margin: 30rpx 0;
	}
}
.html-content{
	overflow: hidden;
	image{
		width: 100%;
		display: block;
	}
}
.footer{
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 999;
	background-color: #ffffff;
	padding: 20rpx;
	box-sizing: border-box;
	display: flex;
	.left{
		width: 300rpx;
	}
}
</style>
