<template>
  <div class="sdk_container">
    <div class="apass_breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item to="/technical_support">
          技术支持
        </el-breadcrumb-item>
        <el-breadcrumb-item :to="parentPath">
          SDK中心
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          {{ typeText }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="download_action apaas_button" v-if="detail.is_sdk === '是'">
      <span>SDK下载</span>
      <span>版本号：{{ detail.version }}</span>
      <span>发布日期：{{ getTimeText(detail.release_time) }}</span>
      <el-button type="primary" @click="downloadUrl(detail.file_url)">
        下载SDK
      </el-button>
    </div>

    <doc-width-nav
      class="main_container"
      :title="detail.example_name"
      :time="getTimeText(detail.updated)"
      :rich-text="detail.content"
    ></doc-width-nav>
  </div>
</template>

<script>
import helper from "@/services/helper.js";
import DocWidthNav from "@/components/doc-width-nav.vue";

export default {
  components: {
    DocWidthNav,
  },
  props: {
    parentPath: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      detail: {},
    };
  },
  computed: {
    typeText() {
      return this.$route.params.type || "SDK";
    },
    sdkId() {
      return this.$route.params.id;
    },
  },
  created() {
    this.detail = {
      example_name: this.typeText,
    };
    this.getContent();
  },
  methods: {
    getContent() {
      this.$http
        .get("/apaas/support/sdk/example/detail", {
          params: {
            id: this.sdkId,
          },
        })
        .then(({ data }) => {
          if (data.success === 1) {
            this.detail = data.data;
          }
        });
    },
    getTimeText(time) {
      return helper.dateStringTransform(time || "");
    },
    downloadUrl(url) {
      let a = document.createElement("a");

      a.setAttribute("download", "");
      a.setAttribute("href", url);
      a.click();
    },
  },
};
</script>

<style scoped>
.sdk_container {
  height: 100%;
  padding: 0 20px 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  box-sizing: border-box;
}
.main_container {
  flex-grow: 1;
  height: calc(100% - 53px);
  overflow: hidden;
}
.download_action {
  background-color: #fff;
  border-radius: 10px;
  padding: 10px 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
}
.download_action > span:nth-child(1) {
  font-size: 18px;
  font-weight: bold;
  line-height: 36px;
  color: #58617a;
  position: relative;
  padding-left: 15px;
}
.download_action > span:nth-child(1)::before {
  content: "";
  width: 4px;
  height: 18px;
  background-color: #515fe7;
  border-radius: 2px;
  position: absolute;
  top: 10px;
  left: 0;
}
.download_action > span:nth-child(2),
.download_action > span:nth-child(3) {
  font-size: 14px;
  line-height: 24px;
  color: #8890a7;
  padding-left: 20px;
  background-position: left center;
}
.download_action > span:nth-child(2) {
  background-image: url("/../assets/imgs/shop_ic_updatetime.png");
}
.download_action > span:nth-child(3) {
  background-image: url("/../assets/imgs/shop_ic_updatetime.png");
}
.download_action > .el-button {
  margin-left: auto;
}
</style>
