<template>
  <div class="service-article-wrap">
    <nav-bar title="问题详情" v-if="!isInHooliApp"/>
    <div v-if="isLoading" id="loading">
        <img src="../../assets/imgs/loading.gif" alt="">
    </div>
    <div class="wrap" v-if="data.title != '' && !isLoading">
      <div class="title" v-html="'Q: ' + data.title"></div>
      <div class="content" v-html="data.content"></div>
    </div>
    <div v-if="data.title == '' && !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 {
  name: "ServiceArticle",
  components: {
    NavBar
  },
  data() {
    return {
      env: "",
      isInHooliApp: false,
      isLoading: true,
      data: {
        title: "",
        content: ""
      }
    };
  },
  created: function() {
    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";
    }
    this.getData();
  },
  methods: {
    // 获取数据
    getData() {
      let params = {};
      params.url = this.$apis.api_v3_find_details;
      params.data = {
        id: this.$route.params.id
      };
      this.$net.req(params, this).then(
        res => {
          this.isLoading = false;
          if (res) {
            let { data } = res;
            if (data) {
              data.content = data.content.replace(/(\r\n)|(\n)/g, "<br />");
              this.data = res.data;
            }
          }
          this.handleAppButton();
        },
        e => {
          this.isLoading = false;
          this.$Toast(e.msg);
        }
      );
    },
    // 回传 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);
        }
      }
    }
  }
};
</script>

<style scoped lang='less'>
.service-article-wrap {
  background: #fff;
  min-height: 100vh;
  .wrap {
    padding: 20px;
    border-top: 10px solid #f9f9f9;
    color: #222;
    .title {
      font-size: 20px;
      margin-bottom: 20px;
      font-weight: bold;
    }
    .content {
      font-size: 14px;
    }
  }
  .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>
