<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);
        });

      let detailData = [
        {
          name: "获取流程",
          type: "step",
          value: ["应用申请", "信息填写", "审核确认", "应用获取"],
        },
      ];
      Promise.all([
        this.$http.get(`/apaas/hubApi/market/app/detail/${this.id}`),
        this.$http.get(`/apaas/hubApi/market/values/${this.id}`),
      ])
        .then((response) => {
          let data1 = response[0].data.data;
          let data2 = response[1].data.data;

          detailData.push(
            {
              name: "应用简介",
              type: "text",
              value: data1.yyjj,
            },
            {
              name: "功能简介",
              type: "text",
              value: data1.gnjj,
            },
            {
              name: "应用场景",
              type: "text",
              value: data1.cjsl,
            },
            {
              name: "应用参数",
              type: "rich-text",
              value: data2,
            }
          );
          this.detailData = detailData;
        })
        .catch(function(error) {
          console.log(error);
        });

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