<template>
  <view class="">
    <van-toast id="van-toast" />
    <view class="detail-con">
      <view class="title">{{ detailData.Title }}</view>
      <view class="info flex flex_start_center">
        <image class="headimg" :src="detailData.Ico ? detailData.Ico : logo" />
        <view class="createname">{{ detailData.CreateByName }}</view>
        <view class="time">{{ detailData.CreateTime }}</view>
      </view>
      <view v-html="richtext"></view>
    </view>
    <!-- <web-view :src="detailData.LinkUrl"></web-view> -->
  </view>
</template>

<script>
import { reactive, toRefs, getCurrentInstance, onMounted } from "vue";
import { getLearningGardenDetail } from "../../api/index";
export default {
  setup(props, context) {
    let data = reactive({
      logo: "http://staticfile.oytour.com/new/upload/edu/logo.png",
      pageTitle: "日语学习园地",
      msg: {
        Id: 0,
      },
      richtext: "",
      detailData: {},
    });
    let methods = {
      back() {
        uni.navigateBack();
      },
      jumpPage() {
        uni.reLaunch({
          url: "/pages/index/index",
        });
      },
      async getData() {
        let res = await getLearningGardenDetail(data.msg);
        if (res) {
          data.detailData = res.Data;
          let tempRichtext = "";
          tempRichtext = data.detailData.Content.replace(
            /<img [^>]*data-src=['"]([^'"]+)[^>]*>/gi,
            (match, capture) => {
              match = match.replace(/data-src/gi, "src");
              match = match.replace(
                /style=\"(.*)\"/gi,
                'style="max-width:100% !important"'
              );
              return match;
            }
          );
          data.richtext = tempRichtext;
          console.log(45, data.richtext);
        }
      },
      getDateStr(date) {},
    };
    onMounted(() => {});
    let that = methods;
    return {
      ...toRefs(data),
      ...methods,
    };
  },
  onLoad(options) {
    uni.setNavigationBarTitle({
      title: this.pageTitle,
    });
    this.msg.Id = options.Id;
    this.getData();
  },
};
</script>

<style scoped>
.detail-con {
  box-sizing: border-box;
  padding: 15rpx 30rpx;
  height: 100vh;
  overflow-y: auto;
}
.title {
  font-size: 36rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #111111;
  margin: 15rpx 0;
}
.info {
  margin: 15rpx 0;
}
.headimg {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(36, 36, 36, 0.2);
  margin-right: 15rpx;
}
.createname {
  font-size: 26rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #111111;
  margin-right: 30rpx;
}
.time {
  font-size: 26rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
}
</style>
