<template>
  <view class="park-detail-page" v-if="flag">
	  <tn-navbar
	    fixed
	    bg-color="rgba(255, 255, 255, 0.01)"
	    :bottom-shadow="false"
	    :placeholder="false"
	  />
  	<!-- 园区概况 -->
  	  <view class="park-summary" 
  		:style="{'background':'url('+ parkSummary.image +') no-repeat','backgroundPosition':'center center','backgroundSize':'100% 100%'}"
  	>
  	    <view class="summary-content">
  	      <view class="summary-info">
  	        <view class="title">{{ parkSummary.title }}</view>
  	        <view class="desc">{{ parkSummary.desc }}</view>
  	      </view>
  	    </view>
  	  </view>
  	
  	  <!-- 园区详情 -->
  	  <view class="park-detail">
		  <view class="title tn-text-2xl tn-mb-xl">
			  {{parkSummary.title}}简介
		  </view>
		  
  		<view class="introduction-content tn-gradient-bg__grey-light tn-p-sm tn-radius">
  			<mp-html :content="parkSummary.content"/>
  	    </view>
  	  </view>
  </view>
</template>
<script lang="ts" setup>
	import { ref } from 'vue';
	import baseUrl from '@/config/config';
	import { onLoad } from "@dcloudio/uni-app"
	import onShare from '@/utils/share';
	
	const { onShareAppMessage,onShareTimeline } = onShare()
	
	const shareTitle = ref()
	
	const shareParam = ref()
	
	interface ParkSummary {
	  title?: string
	  desc?: string
	  image?: string
	  content?: string
	}
	
	const flag = ref(false);
	
	const parkSummary = ref<ParkSummary>();
	
	const getInfo = (id:number) => {
		uni.request({
			url:baseUrl + '/front/parks/' + id,
			success: (res:any) => {
				if(res.data.code === 0){
					parkSummary.value = res.data.data
					shareTitle.value = res.data.data.title
					shareParam.value = res.data.data.parkId
				}else{
					uni.showToast({
						title:res.data.message,
						icon:'none'
					})
					return
				}
				flag.value = true;
			}
		})
	}
	
	onShareAppMessage(() => {
		return {
			title:shareTitle.value,
			path:'/pages/park/index?id=' + shareParam.value
		}
	})
	
	onShareTimeline(() => {
		return {
			title:shareTitle.value,
			path:'/pages/park/index?id=' + shareParam.value
		}
	})
	
	onLoad((option)=>{
		getInfo(option.id)
	})
	
</script>
<style lang="scss" scoped>
.park-summary {
  position: relative;
  width: 100%;
  height: 450rpx;
  z-index: 2;

  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.4) 0%,
      rgba(0, 0, 0, 0) 100%
    );
    z-index: 1;
  }

  .summary-content {
    position: absolute;
    left: 0;
    bottom: 80rpx;
    width: 100%;
    padding: 0rpx 30rpx;
    z-index: 2;
    display: flex;
    align-items: center;

    .summary-info {
      flex: 1;
      color: #fff;

      .title {
        font-size: 52rpx;
        font-weight: bold;
        letter-spacing: 8rpx;
        text-shadow: 4rpx 4rpx 10rpx #585858;
      }
      .desc {
        font-size: 34rpx;
        margin-top: 20rpx;
        margin-bottom: 16rpx;
        text-shadow: 4rpx 4rpx 10rpx #585858;
      }
    }
  }
}
/* end */

/* start */
.park-detail {
  position: relative;
  top: -40rpx;
  border-radius: 40rpx 40rpx 0 0;
  background-color: #fff;
  padding: 50rpx 30rpx 20rpx 30rpx;
  z-index: 10;
  .title{
	  text-align: center;
	  line-height: 2em;
	  font-weight: bold;
  }
	.introduction-content{
		font-size: 34rpx;
		line-height: 2em;
		letter-spacing: 4rpx;
		text-align: justify;
	}
  .topic-item {
    & + .topic-item {
      margin-top: 36rpx;
    }
  }
}
/* 话题列表 end */

</style>
