<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>

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

    <service-tabs type="zhyyfw"></service-tabs>
  </div>
</template>

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

export default {
  components: {
    serviceInfo,
    serviceTabs,
  },
  data: () => ({
    baseInfo: null,
  }),
  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(
        ({ zhyyfw }) => {
          this.baseInfo = zhyyfw;
        },
        (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>
