<template>
    <div class="page-article">
        <nav-bar title="文章详情" v-if="!isInHooliApp"/>
        <div v-if="isLoading" id="loading">
            <img src="../assets/imgs/loading.gif" alt="">
        </div>
        <div class="article-wrap" v-if="articleDetail && !isLoading">
            <p class="title">{{articleDetail.title}}</p>
            <p class="time">{{articleDetail.createTime}}</p>
            <ul class="tags">
                <li class="item" v-for="(item,index) in articleDetail.sign" :key="index">{{item}}</li>
            </ul>
            <!-- <p class="banner">
                <img class="banner-img" :src="`${articleDetail.headImg}`"/>
            </p> -->
            <div class="ql-container">
              <div class="content ql-editor" v-html="articleDetail.content"></div>
            </div>
        </div>
        <div v-if="!articleDetail && !isLoading" class="noneData">
          <img src="https://static.hoolihome.com/m/images/serviceError.png" alt="">
          <p>哎呀，文章不存在了</p>
        </div>
    </div>
</template>

<script>
import NavBar from "@/components/common/NavBar";
export default {
  components: {
    NavBar
  },
  data() {
    return {
      isInHooliApp: false,
      isLoading: true,
      articleDetail: null
    };
  },
  created() {
    if (this.$util.checkIsHooliAndroid() || this.$util.checkIsHooliIos())
      this.isInHooliApp = true;
    if (this.$util.checkIsHooliAndroid()) {
      this.env = "android";
    } else if (this.$util.checkIsHooliIos()) {
      this.env = "ios";
    }
    let { articleId } = this.$route.params;
    if (articleId) {
      this.loadDetail(articleId);
    }
  },
  mounted() {},
  methods: {
    loadDetail(articleId) {
      let params = {};
      params.url = this.$apis.api_v3_find_details;
      params.data = {
        id: articleId
      };
      this.$net.req(params, this).then(
        res => {
          this.isLoading = false;
          if (res) {
            let { data } = res;
            if (data) {
              this.articleDetail = data;
              this.dealImgs();
              this.handleAppButton();
              let shareInfo = {
                title: data.share.shareTitle || "hoolihome",
                desc: data.share.shareContent || "",
                link: data.share.shareUrl || "http://m.hoolihome.com",
                img_url: data.share.shareImgUrl || ""
              };
              if (this.$util.checkIsWeixin()) {
                this.$net.wxShare(shareInfo);
              } else if (
                this.$util.checkIsHooliAndroid() ||
                this.$util.checkIsHooliIos()
              ) {
                this.handleAppLogic();
                this.$net.doHooliShare(shareInfo);
              }
            }
          }
        },
        e => {
          this.isLoading = false;
          this.$Toast(e.msg);
          this.$router.push({
            path: "/"
          });
        }
      );
    },
    dealImgs() {
      this.$nextTick(() => {
        let imgs = document.querySelectorAll(".page-article .content img");
        if (imgs && imgs.length > 0) {
          imgs.forEach(val => {
            val.style.width = "100%";
            val.style.height = "auto";
          });
        }
      });
    },
    // 回传 APP
    handleAppButton() {
      if (this.isInHooliApp) {
        let params = {
          type: 9,
          data: {
            title: "文章详情"
          }
        };
        params = encodeURIComponent(JSON.stringify(params));
        if (this.env === "android") {
          window.Android.javaScriptToNative(params);
        } else if (this.env === "ios") {
          window.webkit.messageHandlers.javaScriptToNative.postMessage(params);
        }
      }
    },
    handleAppLogic() {
      window.AppCallback = {}; /* 保存App返回的信息 */
      window.nativeToJavaScript = result => {
        try {
          if (result) {
            result = JSON.parse(decodeURIComponent(result));
            let type = parseInt(result.type);
            let data = result.data;
            if (this.$util.checkIsHooliAndroid()) {
              data = JSON.parse(data);
            }
            window.AppCallback[type] = data;
          }
        } catch (e) {
          // alert(JSON.stringify(e));
        }
      };
    }
  }
};
</script>

<style lang="less" scoped>
.page-article {
  .article-wrap {
    padding: 10px 20px;
    .title {
      font-size: 20px;
      font-family: PingFangSC-Semibold;
      font-weight: 600;
      color: rgba(34, 34, 34, 1);
      line-height: 28px;
    }
    .time {
      height: 18px;
      line-height: 18px;
      margin-top: 6px;
      font-size: 13px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(187, 187, 187, 1);
    }
    .tags {
      display: flex;
      flex-flow: row wrap;
      justify-content: flex-start;
      align-items: center;
      margin-top: 6px;
      .item {
        margin: 0 6px 6px 0;
        padding: 2px 4px;
        font-size: 13px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(255, 179, 85, 1);
        background-color: #fff7ee;
      }
    }
    .banner {
      width: 100%;
      margin-top: 14px;
      .banner-img {
        width: 100%;
      }
    }
    .content {
      width: 100%;
      margin-top: 20px;
      padding: 0;
      img {
        width: 100% !important;
      }
    }
  }
}
.noneData {
  padding: 120px 20px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  img {
    width: 56px;
  }
  p {
    font-size: 12px;
    color: #ccc;
    margin-top: 15px;
  }
}
</style>
