<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/app_store_list/12">
          应用商店
        </el-breadcrumb-item>
        <el-breadcrumb-item>应用详情信息</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

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

    <service-tabs
      :detail-data="detailData"
      :provider-data="providerData"
      :comments-url="commentsUrl"
      :is_app_detail="true"
    ></service-tabs>
  </div>
</template>

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

export default {
  components: {
    appInfo,
    serviceTabs,
  },
  data: () => ({
    baseInfo: null,
    detailData: null,
    providerData: null,
  }),
  computed: {
    id() {
      return this.$route.params.id;
    },
    commentsUrl() {
      return `/apaas/hubApi/market/comments/${this.id}`;
    },
  },
  methods: {
    init() {
      this.$http
        .get("/apaas/hubApi/market/baseInfo", {
          params: {
            id: this.id,
          },
        })
        .then(({ data }) => {
          this.baseInfo = data.data;
        })
        .catch(function(error) {
          console.log(error);
        });

      this.$http
        .get(`/apaas/hubApi/market/readme/${this.id}`)
        .then(({ data }) => {
          this.detailData = [
            {
              name: "获取流程",
              type: "step",
              value: ["服务申请", "信息填写", "审核确认", "服务获取"],
            },
            {
              name: "富文本",
              type: "rich-text",
              value: data.data,
            },
          ];
        })
        .catch(function(error) {
          console.log(error);
        });

      this.$http
        .get(`/apaas/hubApi/appShop/orgInfo/${this.id}`)
        .then(({ data }) => {
          this.providerData = {
            organization_name: data.department_name,
            picture_path: data.picture_path,
            user_name: data.user_name,
            phone: data.phone,
          };
        })
        .catch(function(error) {
          console.log(error);
        });
    },
  },
  mounted() {
    this.init();
  },
};
</script>
