<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">
          <mavon-editor v-model="list_arr" :boxShadow="false" :toolbarsFlag="false" :subfield="false" defaultOpen="preview" :editable="false" v-if="now_service == 0"/>
          <info-list
          v-if=" now_service == 1"
          @download="download"
            :list_arr="servicead_arr
            "
          >
            <div class="appcode" v-html="appcode" slot="app_code"></div>
            <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_arr: [
        {
          title: "一级审批",
          result: "审批通过",
          arr: [
            {
              title: "审批时间：",
              info: "2020-02-28 15:23:45",
            },
            {
              title: "审批单位：",
              info: "某某某城管局",
            },
            {
              title: "审批人：",
              info: "张先生",
            },
            {
              title: "审批意见：",
              info: "同意",
            },
          ],
        },
        {
          title: "二级审批",
          result: "审批通过",
          arr: [
            {
              title: "审批时间：",
              info: "2020-02-28 15:23:45",
            },
            {
              title: "审批单位：",
              info: "某某某城管局",
            },
            {
              title: "审批人：",
              info: "张先生",
            },
            {
              title: "审批意见：",
              info: "同意",
            },
          ],
        },
      ],
      approval_arr1: [
        {
          title: "一级审批",
          result: "审批通过",
          arr: [
            {
              title: "审批时间：",
              info: "2020-02-28 15:23:45",
            },
            {
              title: "审批单位：",
              info: "某某某城管局",
            },
            {
              title: "审批人：",
              info: "张先生",
            },
            {
              title: "审批意见：",
              info: "同意",
            },
          ],
        },
        {
          title: "二级审批",
          result: "审批未通过",
          arr: [
            {
              title: "审批时间：",
              info: "2020-02-28 15:23:45",
            },
            {
              title: "审批单位：",
              info: "某某某城管局",
            },
            {
              title: "审批人：",
              info: "张先生",
            },
            {
              title: "审批意见：",
              info: "不同意，驳回。",
            },
          ],
        },
      ],
      approval_arr2: [
        {
          title: "一级审批",
          result: "审批未通过",
          arr: [
            {
              title: "审批时间：",
              info: "2020-02-28 15:23:45",
            },
            {
              title: "审批单位：",
              info: "某某某城管局",
            },
            {
              title: "审批人：",
              info: "张先生",
            },
            {
              title: "审批意见：",
              info: "不同意，驳回。",
            },
          ],
        },
      ],
      approval_arr3:[
        {
            title: "一级审批",
            result: "审批中",
        },
      ],
      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",
      //   },
      //   {
      //     title: "联系人：",
      //     info: "",
      //   },
      //   {
      //     title: "联系电话：",
      //     info: "",
      //   },
      // ],
      servicead_arr: [
        {
          title: "申请信息",
          prop:"title",
        },
        {
          title: "应用场景：",
          info: "",
        },
        {
          title: "申请文件：",
          info: "",
          url:"1111",
          type:"down"
        },
        {
          title: "申请规格：",
          info: "",
        },
        {
          title: "审批信息",
          prop:"title",
        },
        {
          title: "",
          type: "solt",
          solt_name: "approval",
        },
      ],
      appcode:"",
    };
  },
  watch: {},
  computed: {},
  created() {
    this.getServiceInfo();
    this.getreadme();
    // this.getServiceBaseInfo();
    this.getServiceapplyInfo();
  },
  mounted() {},
  methods: {
    getreadme(){
      this.$http
        .get("/apaas/hubApi/market/readme/"+this.$route.params.app_id)
        .then((response) => {
          let data = response.data.data;
          this.list_arr = data
        })
        .catch(function(response) {});
    },
    download(val){
        console.log(val);
    },
    getServiceapplyInfo() {
      this.$http
        .get("./static/applyappdetail.json")
        .then((response) => {
          let data = response.data.data;
          this.$set(this.servicead_arr[1], "info", data.appapplyinfo.scene);
          this.$set(this.servicead_arr[2], "info", data.appapplyinfo.filename);
          this.$set(this.servicead_arr[2], "url", data.appapplyinfo.fileurl);
          this.$set(this.servicead_arr[3], "info", data.appapplyinfo.size);
        })
        .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.list_arr[0], "info", data.appbaseinfo.intorduce);
    //       this.$set(this.list_arr[1], "info", data.appbaseinfo.action);
    //       this.$set(this.list_arr[2], "info", data.scene);
    //       this.$set(this.list_arr[4], "info", data.contact_person);
    //       this.$set(this.list_arr[5], "info", data.contact_number);
          
    //       this.appcode = data.appbaseinfo.appcode;
    //     })
    //     .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>
