<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
          @download="download"
            :list_arr="
              now_service == 0
                ? 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: "",
        first: [],
        second: [],
        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.now_user = this.$store.state.role;
    getRole().then((data) => {
      this.now_user = data;
      this.$store.commit("rolefun", data);
      this.getServiceInfo();
      this.getServiceBaseInfo();
      this.getServiceapplyInfo();
      
    });
  },
  mounted() {},
  methods: {
    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("/static/applyappdetail.json")
        .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.appbaseinfo.use);
          this.$set(this.list_arr[4], "info", data.appbaseinfo.person);
          this.$set(this.list_arr[5], "info", data.appbaseinfo.phone);
          
          this.appcode = data.appbaseinfo.appcode;
        })
        .catch(function(response) {});
    },
    deploy(val){
        console.log(val);
    },
    getServiceInfo() {
      this.$http
        .get("/static/applyappdetail.json")
        .then((response) => {
          let data = response.data.data;
          this.$set(this.service_header_arr, "id", data.appInfo.id);
          this.$set(this.service_header_arr, "name", data.appInfo.name);
          this.$set(this.service_header_arr, "first", data.appInfo.first);
          this.$set(this.service_header_arr, "second", data.appInfo.second);
        })
        .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>
