<template>
  <div class="sevice_detail">
    <div class="apass_breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item to="/shop">服务超市</el-breadcrumb-item>
        <el-breadcrumb-item to="/shop/data_service_list">
          数据服务
        </el-breadcrumb-item>
        <el-breadcrumb-item>服务详情信息</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

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

    <service-tabs
      detail-url="sjfw"
      specification-url="sjfw"
      provider-url="sjfw"
      comments-url="sjfw"
    ></service-tabs>
  </div>
</template>

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

export default {
  components: {
    serviceInfo,
    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(
        ({ sjfw }) => {
          this.baseInfo = sjfw;
        },
        (error) => {
          console.log(error);
        }
      );
    },
  },
  mounted() {
    this.init();
  },
};
</script>
