<template>
  <!-- #ifdef APP-ANDROID || APP-IOS -->
  <scroll-view style="flex: 1">
  <!-- #endif -->
  <!-- #ifdef APP-HARMONY -->
  <scroll-view style="flex: 1" type="nested">
  <!-- #endif -->
    <!-- #ifdef APP-HARMONY -->
    <nested-scroll-header>
    <!-- #endif -->
      <share-element :share-key="share_key">
        <view>
          <image class="banner-img" :src="cover"></image>
          <text class="banner-title">{{title}}</text>
        </view>
      </share-element>
    <!-- #ifdef APP-HARMONY -->
    </nested-scroll-header>
    <!-- #endif -->
    <!-- #ifndef APP-HARMONY -->
    <rich-text :nodes="htmlNodes" style="padding: 3px"></rich-text>
    <!-- #endif -->
    <!-- #ifdef APP-HARMONY -->
    <nested-scroll-body style="height: 100%;">
      <scroll-view style="flex:1" associative-container="nested-scroll-view">
        <rich-text :nodes="htmlNodes" style="padding: 3px;flex:1"></rich-text>
      </scroll-view>
    </nested-scroll-body>
    <!-- #endif -->
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script>
  export default {
    data() {
      return {
        htmlNodes: "",
        title: '',
        cover: "",
        post_id: "",
        share_key: ""
      }
    },
    onLoad(event : OnLoadOptions) {
      this.post_id = event["post_id"] ?? "";
      this.cover = event["cover"] ?? ""
      // #ifdef APP-ANDROID
      this.cover = atob(this.cover);
      // #endif
      this.title = event["title"] ?? "";
      this.share_key = event["shareKey"] ?? ""
      this.getDetail();
    },
    methods: {
      getDetail() {
        uni.request({
          url: 'https://unidemo.dcloud.net.cn/api/news/36kr/' + this.post_id,
          success: (data) => {
            if (data.statusCode == 200) {
              const result = data.data as UTSJSONObject
              // console.log(result["content"]);
              this.htmlNodes = result["content"] as string;
            }
          },
          fail: () => {
            console.log('fail');
          }
        });
      },
    }
  }
</script>

<style>
  .banner {
    height: 180px;
    overflow: hidden;
    position: relative;
    background-color: #ccc;
  }

  .banner-img {
    width: 100%;
  }

  .banner-title {
    max-height: 42px;
    overflow: hidden;
    position: absolute;
    left: 15px;
    bottom: 15px;
    width: 90%;
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
    color: white;
  }
</style>
