<template><page-meta
  :page-font-size="$baseFontSize() + 'px'"
  :root-font-size="$baseFontSize() + 'px'"
></page-meta>
  <view class="container">
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>
    <z-nav-bar :title="prescriptDetail.title" bgColor="#3AB3AE" fontColor="#fff"></z-nav-bar>
    <view
      class="contentBox"
      v-if="prescriptDetail.content && prescriptDetail.contentType == 1"
    >
      <view class="content">
        <!-- <uni-section class="mb-10" titleFontSize="18px" title="标题" type="line"> -->
        <view class="item title-center">
          {{ prescriptDetail.title }}
        </view>
        <!-- </uni-section> -->
        <!-- <uni-section class="mb-10" titleFontSize="18px" title="内容" type="line"> -->
        <view class="item" v-html="prescriptDetail.content"> </view>
        <!-- </uni-section> -->
        <!-- <view class="item" v-html="prescriptDetail.content">
				</view> -->
      </view>
    </view>
    <view class="fullscreen-webview" v-else>
      <web-view :src="prescriptDetail.url"> </web-view>
    </view>
    <music-play :playData="playData"></music-play>
  </view>
</template>

<script>
import musicPlay from "@/components/music.vue";
import $http from "@/config/requestConfig.js";
export default {
  data() {
    return {
      playData: {},
      prescriptDetail: {
        images: [],
      },
      id: null,
      indicatorDots: true,
      autoplay: true,
      interval: 5000,
      duration: 500,
    };
  },
  onLoad(e) {
    this.id = e.id;
  },
  onShow() {
    this.getDetail();
  },
  methods: {
    // 放大图片
    previewImage(url) {
      console.log(url);
      uni.previewImage({
        urls: [url],
        longPressActions: {
          itemList: ["很抱歉，暂不支持保存图片到本地"],
          success: function (res) {
            // console.log(res,'+++++')
          },
        },
      });
    },
    // 方剂详情
    getDetail() {
      $http
        .request({
          url: "book/generalArticle/getArticleById?id=" + this.id,
          method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
          data: {
            // loadAnimate: 'none', // 请求加载动画
            // 'prescriptId': this.prescriptId
          },
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json",
          },
        })
        .then((res) => {
          console.log(res, "内容获取成功");
          if (res.code == 0) {
            this.prescriptDetail = res.result;
            if (
              this.prescriptDetail.content &&
              this.prescriptDetail.contentType == 1
            ) {
              this.prescriptDetail.content = res.result.content.replace(
                /<img/g,
                '<img style="max-width: 100%;"'
              );
            }
            // if (this.prescriptDetail.image) {
            // 	this.prescriptDetail.images = this.prescriptDetail.image.split(';');
            // }
          }
        })
        .catch((e) => {
          // this.titleList = []
          console.log(e);
        });
    },
  },
  components: {
    musicPlay,
  },
};
</script>

<style lang="scss" scoped>
.contentBox {
  padding-bottom: 20rpx;
}
.contentBoxwebwiew {
  height: 100%;
  // .webwiew{
  // 	height: 100%;
  // }
}
.fullscreen-webview {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.mb-10 {
  margin-bottom: 10px;
}

.content {
  font-size: 28rpx;
}

.swiper-item {
  image {
    margin: 0 auto;
    height: 250rpx;
  }
}

.uni-margin-wrap {
  margin-bottom: 20rpx;
  padding-top: 20rpx;
  background-color: #fff;
}

.container {
  padding: 10rpx;

  // background-color: #fff;
  .item {
    // color: #666;
    padding: 10rpx 20rpx;
    padding-bottom: 20rpx;
    line-height: 46rpx;
  }
  .title-center {
    text-align: center;
    font-size: 32rpx;
    font-weight: 700 !important;
  }
}

.flexbox {
  display: flex;
}

/deep/ .uni-section-header__decoration.line {
  background-color: #18bc37;
}
</style>