<template>
  <div class="detail_contain">
    <p class="now_page_title">我的应用  /  我申请的应用  /   <span>应用详情</span></p>
    <div class="info_contain">
      <service-header
        :data="service_header_arr"
        @applymy="applymy"
        @deploy="deploy"
      ></service-header>
      <div class="type_box">
        <div class="type_title">
          <div
            v-for="(item, index) in service_arr"
            :key="index + 1000"
            class="type_select"
            @click="now_service = index"
            :style="
              now_service == index ? { borderBottom: '4px solid #f5ab4c' } : {}
            "
          >
            {{ item }}
          </div>
        </div>
        <div class="type_box_select">
          <info-list
            :list_arr="now_service == 0?list_arr:servicead_arr
            "
          >
          <mavon-editor v-model="appcode" slot="app_code" :boxShadow="false" :toolbarsFlag="false" :subfield="false" defaultOpen="preview" :editable="false"/>
            <process-card :data="approval_arr3" slot="approval"></process-card>
          </info-list>
          
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import serviceHeader from "@/components/service-header";
import infoList from "@/components/infoList";
import tableUm from "@/components/table/table-um";
import processCard from "@/components/process-card";
import { getRole } from "@/utils/common";
export default {
  props: {},
  components: {
    serviceHeader,
    infoList,
    tableUm,
    processCard,
  },
  data() {
    return {
      now_user: 0, //0：普通用户，1：组织管理员，2：超级管理员
      approval_arr3:[],
      service_arr: ["基本信息", "申请审批信息"],
      service_header_arr: {
        id:"",
        name: "",
        url: "",
        first: [
          {
            "name": "应用类型",
            "text": "数据服务"
          },
          {
            "name": "业务领域",
            "text": "应急领域"
          },
          {
            "name": "在线状态",
            "text": "平台应用"
          }
        ],
        second: [
          {
            "name": "审批状态",
            "text": "审批通过",
            "color":"#515fe7"
          },
          {
            "name": "所属组织",
            "text": "北京比格大数据有限公司"
          },
          {
            "name": "申请时间",
            "text": "2020-02-28 17:59:30"
          }
        ],
        // aqdetail: true,
      },
      now_service: 0,
      list_arr:[
        {
          title: "应用简介：",
          info: "",
        },
        {
          title: "功能简介：",
          info: "",
        },
        {
          title: "应用场景：",
          info: "",
        },
        {
          title: "应用参数：",
          info: "",
          type: "solt",
          solt_name: "app_code",
        }
      ],
      servicead_arr: [
        {
          title: "申请信息",
          prop:"title",
        },
        {
          title: "应用场景：",
          info: "",
        },
        {
          title: "申请文件：",
          info: "",
          url:"1111",
          type:"down"
        },
        {
          title: "申请规格：",
          info: "",
        },
        {
          title: "申请时间：",
          info: "",
        },
        {
          title: "审批信息",
          prop:"title",
        },
        {
          title: "",
          type: "solt",
          solt_name: "approval",
        },
      ],
      appcode:"",
    };
  },
  watch: {},
  computed: {},
  created() {
    this.getServiceInfo();
    this.getreadme();
    this.get_app_code();
    this.getServiceBaseInfo();
    this.getServiceapplyInfo();
  },
  mounted() {},
  methods: {
    get_app_code(){
      this.$http
        .get("/apaas/hubApi/market/values/"+this.$route.params.app_id)
        .then((response) => {
          let data = response.data.data;
          this.appcode = data
        })
        .catch(function(response) {});
    },
    getreadme(){
      this.$http
        .get("/apaas/hubApi/market/app/detail/"+this.$route.params.app_id)
        .then((response) => {
          let data = response.data.data;
          this.$set(this.list_arr[0], "info", data.yyjj);
          this.$set(this.list_arr[1], "info", data.gnjj);
          this.$set(this.list_arr[2], "info", data.cjsl);
        })
        .catch(function(response) {});
    },
    getServiceapplyInfo() {
      this.$http
        .get(`/apaas/hubApi/market/approvalInfo/${this.$route.params.id}`)
        .then((response) => {
          let data = response.data.data;
          if(!(data&&data.length)){
            this.approval_arr3.push({
              title: "一级审批",
              result: "待审批"
            })
            return
          }
          data.forEach(e => {
            this.approval_arr3.push({
              title: e.level==1?"一级审批":'二级审批',
              result: e.apply_type_name,
              arr: [
                {
                  title: "审批时间：",
                  info: e.created,
                },
                {
                  title: "审批单位：",
                  info: e.department_name,
                },
                {
                  title: "审批人：",
                  info: e.user_name,
                },
                {
                  title: "审批意见：",
                  info: e.comments,
                }
              ]
            })
          });
        })
        .catch(function(response) {});
    },
    getServiceBaseInfo() {
      this.$http
        .get("/apaas/hubApi/market/applyDetailInfo/"+this.$route.params.id)
        .then((response) => {
          let data = response.data.data;
          this.$set(this.servicead_arr[1], "info", data.scene);
          this.$set(this.servicead_arr[2], "info", data.apply_file);
          this.$set(this.servicead_arr[2], "url", data.apply_file);
          this.$set(this.servicead_arr[3], "info", data.apply_type_name);
          this.$set(this.servicead_arr[4], "info", data.apply_time);
        })
        .catch(function(response) {});
    },
    deploy(val){
        console.log(val);
    },
    getServiceInfo() {
      this.$http
        .get("/apaas/hubApi/market/applyInfo/"+this.$route.params.id)
        .then((response) => {
          let data = response.data.data;
          this.$set(this.service_header_arr, "id", data.app_id);
          this.$set(this.service_header_arr, "name", data.app_name+' '+'V'+data.version);
          this.$set(this.service_header_arr, "url", data.logo);
          this.$set(this.service_header_arr.first[0], "text", data.type_name);
          this.$set(this.service_header_arr.first[1], "text", data.ywly_name);
          this.$set(this.service_header_arr.first[2], "text", data.online_state_name);
          this.$set(this.service_header_arr.second[0], "text", data.apply_status);
          this.$set(this.service_header_arr.second[1], "text", data.department_name);
          this.$set(this.service_header_arr.second[2], "text", data.time);
        })
        .catch(function(response) {
        });
    },
    applymy(val) {
      console.log(val);
      this.tipsOptions = {
        title: "",
        message: "",
        btnSubmitText: "",
        btnCancelText: "",
        position: "",
      };
      this.tipsOptions.message =
        "申请密钥需要向组织管理员发送通知，由组织管理员在密钥管理中设置应用的密钥。";
      this.tipsOptions.btnSubmitText = "发送通知";
      this.tipsOptions.confirmSubmit = () => {
        console.log("deleteItem - ");
        this.$refs.myConfirm.hideModel();
      };
      this.$refs.myConfirm.showModel();
    },
  },
};
</script>

<style scoped>
.detail_contain {
  width: 100%;
  padding: 0 20px;
  height: calc(100% - 55px);
}
.info_contain {
  padding: 25px 20px;
  background-color: #fff;
  width: 100%;
  box-shadow: 0px 3px 6px 0px #f4f7fc;
  border-radius: 12px;
  min-height: calc(100% - 20px);
  margin-bottom: 20px;
}
.now_page_title {
  margin: 15px 0;
  color: #898d9e;
}
.now_page_title span {
  color: #242c43;
}
.type_box {
  width: 100%;
}
.type_title {
  width: 100%;
  height: 65px;
  line-height: 65px;
  border-bottom: 2px solid #f4f7fc;
}
.type_select {
  float: left;
  width: auto;
  margin-right: 40px;
  height: 65px;
  cursor: pointer;
}
.type_box_select {
  padding: 30px 10px 10px 10px;
  width: 100%;
}
.appcode {
  white-space: pre-wrap;
  width: 100%;
  background-color: #f8f9fd;
  border-radius: 8px;
  padding: 24px;
  color: #58617a;
}
</style>
