<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 :datas="baseInfo"></app-info>

    <service-tabs
      :detail-data="detailData"
      detail-title="应用详情信息"
      :provider-data="providerData"
      :comments-url="commentsUrl"
      comments-title="应用评价信息"
      :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: {
      app_id: "",
      app_name: "",
      apply_id: "",
      apply_times: "",
      apply_type_name: "",
      create_date: "",
      deploy_times: "",
      logo: "",
      online_state: "",
      online_state_name: "",
      source: "",
      state: "",
      type_name: "",
      up_deploy_status: "",
      up_platform_status: "",
      up_userid: "",
      username: "",
      version: "",
      view_count: "",
      ywly_name: "",
      yyjj: "",
      price: "",
    },
    detailData: [
      {
        name: "获取流程",
        type: "step_app",
        value: ["应用申请", "信息填写", "审核确认", "应用获取"],
      },
      {
        name: "应用信息",
        type: "app-list",
        value: {},
      },
      {
        name: "功能简介",
        type: "text",
        value: "",
      },
      {
        name: "应用场景",
        type: "text",
        value: "",
      },
      {
        name: "应用参数",
        type: "rich-text",
        value: "",
      },
    ],
    providerData: {
      organization_name: "",
      picture_path: "",
      user_name: "",
      phone: "",
      serviceRequestSpcsTable: [],
    },
  }),
  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,
            is_shop: 1,
          },
        })
        .then(({ data }) => {
          this.$api.serviceShop
            .getExtendedInfo({ id: this.id })
            .then((response) => {
              this.baseInfo.app_id = data.data.app_id;
              this.baseInfo.app_name = data.data.app_name;
              this.baseInfo.apply_id = data.data.apply_id;
              this.baseInfo.apply_times = data.data.apply_times;
              this.baseInfo.apply_type_name = data.data.apply_type_name;
              this.baseInfo.create_date = data.data.create_date;
              this.baseInfo.deploy_times = data.data.deploy_times;
              this.baseInfo.logo = data.data.logo;
              this.baseInfo.online_state = data.data.online_state;
              this.baseInfo.online_state_name = data.data.online_state_name;
              this.baseInfo.source = data.data.source;
              this.baseInfo.state = data.data.state;
              this.baseInfo.type_name = data.data.type_name;
              this.baseInfo.up_deploy_status = data.data.up_deploy_status;
              this.baseInfo.up_platform_status = data.data.up_platform_status;
              this.baseInfo.up_userid = data.data.up_userid;
              this.baseInfo.username = data.data.username;
              this.baseInfo.version = data.data.version;
              this.baseInfo.view_count = data.data.view_count;
              this.baseInfo.ywly_name = data.data.ywly_name;
              this.baseInfo.price = response.data.data.price;
              this.baseInfo.price_style = response.data.data.price_style;
              this.baseInfo.sale = response.data.data.sale;
              this.baseInfo.star = response.data.data.star;
            });
          this.detailData[1].value = {
            online_state_name: data.data.online_state_name,
            type_name: data.data.type_name,
            ywly_name: data.data.ywly_name,
            create_date: data.data.create_date,
          };
        })
        .catch(function (error) {
          console.log(error);
        });
      this.$http
        .get(`/apaas/hubApi/market/appSpecification?id=${this.id}`)
        .then((res) => {
          if (res.data.success) {
            var data = res.data.data;
            this.providerData.serviceRequestSpcsTable = [
              {
                type: "申请获取应用镜像部署权限",
                spce: `${data.price}金币`,
                times: "按月",
                specifications: data.specifications,
              },
            ];
          }
        });
      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;
          this.detailData[2].value = data1.gnjj;
          this.detailData[3].value = data1.cjsl;
          this.detailData[4].value = data2;
          this.baseInfo.yyjj = data1.yyjj;
        })
        .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;
          this.providerData.picture_path = data.data.picture_path;
          this.providerData.user_name = data.data.user_name;
          this.providerData.phone = data.data.phone;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
  mounted() {
    this.init();
  },
};
</script>
