<template>
  <div id="aboutUs" :class="{ app: true, block: type === 1 }">
    <van-sticky :offset-top="0" v-if="!version">
      <van-nav-bar left-arrow @click-left="onClickLeft" title="关于我们" />
    </van-sticky>
    <div class="head" v-if="version">
      <van-image width="80" height="80" :src="logo" />
      <br />
      <div class="version">v{{ version }}</div>
      <br />
    </div>
    <div class="sk" v-if="!content">
      <br />
      <van-skeleton title :row="10" />
    </div>
    <news v-if="content" :item="{ content: content }" />
  </div>
</template>

<script>
import {
  Image as vanImage,
  NavBar as vanNavBar,
  Skeleton as vanSkeleton,
  Sticky as vanSticky
} from "vant";
import { currentUrlToParams, setToken } from "@/utils/common.js";
import "vant/lib/image/style";
import "vant/lib/nav-bar/style";
import "vant/lib/skeleton/style";
import news from "@/components/Detail/news.vue";
import logo from "@/assets/image/0.jpg";

export default {
  name: "app",
  data: function() {
    return {
      logo,
      content: "",
      version: "",
      type: undefined
    };
  },
  methods: {
    onClickLeft() {
      history.go(-1);
    }
  },
  mounted() {
    let _this = this;
    this.$pageParams = currentUrlToParams();
    this.type = this.$pageParams.pattern - 0;
    this.version = this.$pageParams.version || "";
    setToken(this.$pageParams.token || "");
    window.aboutUs = function(html) {
      _this.content = html;
    };
  },
  beforeDestroy: function() {},
  components: { news, vanImage, vanNavBar, vanSticky, vanSkeleton }
};
</script>
<style lang="scss">
#aboutUs {
  height: 100%;
  overflow-y: scroll;
  .head {
    text-align: center;
    padding-bottom: 1em;
    padding-top: 0.5rem;
    .van-image {
      margin: 0 auto;
    }
  }
}
</style>
