<template>
  <div class="sevice_detail">
    <div class="sevice_breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>服务超市</el-breadcrumb-item>
        <el-breadcrumb-item>应用商店</el-breadcrumb-item>
        <el-breadcrumb-item>应用详情信息</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <application-info :data="baseInfo"></application-info>

    <service-tabs
      detail-url="yysd"
      provider-url="yysd"
      comments-url="yysd"
      detail-title="应用详情信息"
      comments-title="应用评价信息"
    ></service-tabs>
  </div>
</template>

<script>
import applicationInfo from "@/components/application-info";
import serviceTabs from "@/components/service-tabs";

export default {
  components: {
    applicationInfo,
    serviceTabs,
  },
  data: () => ({
    baseInfo: null,
    detailData: null,
    specification: null,
    provider: null,
  }),
  computed: {
    id() {
      return this.$route.params.id;
    },
  },
  methods: {
    getDataFromApi(_url) {
      return new Promise((resolve, reject) => {
        this.$http
          .get(_url)
          .then((response) => {
            resolve(response.body);
          })
          .catch(function(error) {
            reject(error);
          });
      });
    },
    init() {
      this.getDataFromApi(`/static/serviceBaseInfo.json`).then(
        ({ yysd }) => {
          this.baseInfo = yysd;
        },
        (error) => {
          console.log(error);
        }
      );
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style scoped>
.sevice_detail {
  max-width: 1200px;
  margin: 0 auto;
}
.sevice_breadcrumb > .el-breadcrumb {
  line-height: 42px;
}
</style>
