<template>
  <el-dialog
    :title="'应用详情'"
    :visible.sync="visible"
    width="60%"
    :before-close="handleClose"
    @close="cancel"
  >
    <el-form>
      <el-card
        class="box-card"
        shadow="always"
        style="font-size: 20px; width: 800px; margin-left: 80px"
         v-if="true"
      >
        <!-- v-for="item in baseinformData.data.items"
          :key="item.metadata.name"  -->
        <el-form-item class="card-header">应用基本信息</el-form-item>
        <el-form-item
          class="text item"
        
        >
          <el-card shadow="nerver" style="font-size: 15px">
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item>名称:  {{   this.name}}</el-form-item> 
              </el-col>
              <el-col :span="12">
                <el-form-item>版本:  {{ this.version}} </el-form-item >
              </el-col>
               <el-col :span="12">
                <el-form-item>创建时间:  {{ this.createTime}} </el-form-item >
             
              </el-col>
              <el-col :span="12">
                <el-form-item>应用类型:  {{this.applicationType}} </el-form-item >
       
                </el-col>
              <el-col :span="12">
                <el-form-item>所属项目名称:  {{this.parentProjectName}} </el-form-item >
            
              </el-col>
                 <el-col :span="12">
                <el-form-item>应用描述:  {{this.applicationDescription}} </el-form-item >
             
              </el-col>
            </el-row>
          </el-card>
        </el-form-item>
        <el-form-item class="card-header">应用日志</el-form-item>
        <el-form-item
          class="text item"
        
        >
          <el-card shadow="nerver" style="font-size: 15px">
            <div style = "white-space: pre-wrap" v-loading="loading">{{applicationLog}}</div>
          </el-card>
        </el-form-item>
      </el-card>

<!-- 
  现在出现的是：不能正常的显示以下两部分，item中的具体数据结构，
在network中可以显示收到的数据，但是太乱了，我不知道这里的数据具体
是哪个,解决
 -->

      <!-- <el-card
        class="box-card"
        shadow="always"
        style="font-size: 20px; width: 800px; margin-left: 80px"
        v-if="ingressesVisible"
      >

        <el-form-item class="card-header">应用路由</el-form-item>
        <el-form-item
          class="text item"
          v-for="item in ingressesData.data.items"
          :key="item.metadata.name">
        
          <el-card shadow="nerver" style="font-size: 15px">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item>名称:{{ item.metadata.name }}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  >命名空间:{{ item.metadata.namespace }}</el-form-item
                >
              </el-col>
              <el-col :span="12">
                <el-form-item
                  >Url:
                  {{ item.spec.rules[0].http !== "" ? "http://" : "https://"
                  }}{{ item.spec.rules[0].host }}
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
        </el-form-item>
      </el-card>


      <el-card
        class="box-card"
        shadow="always"
        style="font-size: 20px; width: 800px; margin-left: 80px"
        v-if="serviceVisible"
      >
        <el-form-item class="card-header">服务</el-form-item>
        <el-form-item
          class="text item"
          v-for="(item, index) in serviceData.data.items"
          :key="index"
        >
          <el-card shadow="nerver" style="font-size: 15px">
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item>服务名称:{{ item.metadata.name }}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  >命名空间:{{ item.metadata.namespace }}</el-form-item
                >
              </el-col>
              <el-col :span="12">
                <el-form-item label="映射端口(NodePort)">
                  {{item.spec.ports[0].port}}:{{item.spec.ports[0].nodePort}}/{{item.spec.ports[0].protocol}}
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
        </el-form-item>
      </el-card>
       <el-card
        class="box-card"
        shadow="always"
        style="font-size: 20px; width: 800px; margin-left: 80px"
        v-if="eventsVisible"
      >
        <el-form-item class="card-header">事件监控</el-form-item>
        <el-form-item
          class="text item"
          v-for="(item, index) in eventsData.data.items"
          :key="index"
        >
          <el-card shadow="nerver" style="font-size: 15px">
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item>应用可用性状态:{{ appAvaliable }}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item>
                  应用创建进程:{{ appProcess }}</el-form-item
                >
              </el-col>
       
            </el-row>
            <el-row> 
              <el-col>
                 <el-form-item>事件消息:{{ appeventMessage }}</el-form-item>
              </el-col>
              
            </el-row>
          </el-card>
        </el-form-item>
      </el-card> -->
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      //定义可见性，即获取数据成功与否后再可见
      visible: false,
      timer:null,
      applicationLog: "正在读取...",
      ingressesVisible: false,
      serviceVisible: false,
      eventsVisible:false,
      name: "",
      version: "",
      createTime:"",
      applicationType:"",
      applicationDescription:"",
      parentProjectName:"",
      serviceName:"",//用于保存应用的服务名，主要是为了事件获取所设置
      appAvaliable:"",//用于存储应用可使用性
      appProcess:"",
      appeventMessage:"",
      baseinformData:[],//应用基本信息数据结构体
      ingressesData: [],
      serviceData: [],
      eventsData:[],//定义应用事件数据结构体
    };
  },
  methods: {
    init(name, version,createTime,applicationType,applicationDescription,parentProjectName) {
      this.name = name;
      this.version = version;//版本号
      this.applicationLog="正在读取...";
      this.visible = true;
      this.createTime=createTime;
      this.applicationType=applicationType;
      this.applicationDescription=applicationDescription;
      this.parentProjectName=parentProjectName;
      this.$nextTick(() => {
        // 获取路由
        this.$http({
          url: "/kubesphereApi/apis/extensions/v1beta1/namespaces/mkcloud/ingresses",
          method: "get",
          params: {
            labelSelector: `app.kubernetes.io/name=${this.name},app.kubernetes.io/version=${this.version}`,
          },
// 
        })
          .then((res) => {
            this.ingressesData = res;
            this.ingressesVisible = true;
            console.log("ingressesData", this.ingressesData);
          })
          .catch((error) => {
            console.log("获取路由错误", error);
          });
        
        // 获取服务
        this.$http({
          url: "/kubesphereApi/api/v1/namespaces/mkcloud/services",
          method: "get",
// 
          params: {
            labelSelector:
              `app.kubernetes.io/name=${this.name},app.kubernetes.io/version=${this.version}`,
          },
        })
          .then((res) => {
            this.serviceData = res;
            this.serviceVisible = true;
           this.serviceName=res.data.items[0].metadata.name;
            console.log("serviceData", this.serviceData);
            console.log("serviceName",this.serviceName);


                //以下是写发生事件的一些api
          //获取服务中 的工作负载中发生的事件
           this.$http({
          url: "/kubesphereApi/apis/apps/v1/namespaces/mkcloud/deployments",
          method: "get",
          params: {
            labelSelector: 
            `app=${this.serviceName},app.kubernetes.io/name=${this.name},app.kubernetes.io/version=${this.version}`,
          },

        })
          .then((res) => {
           this.eventsData = res;
          this.eventsVisible = true;
          console.log("serviceName4353",`app=${this.serviceName},app.kubernetes.io/name=${this.name},app.kubernetes.io/version=v1`);
          console.log("name",this.name);
            console.log("eventsData",this.eventsData);
            this.formatMessage();
            console.log("appA",this.appAvaliable);
           
          })
          .catch((error) => {
            console.log("获取应用服务负载事件错误", error);
          });
         
            
          })
          .catch((error) => {
            console.log("获取服务错误", error);
          });

        //   //以下是写发生事件的一些api
        //   //获取服务中 的工作负载中发生的事件
        //    this.$http({
        //   url: "/kubesphereApi/apis/apps/v1/namespaces/mkcloud/deployments",
        //   method: "get",
        //   params: {
        //     labelSelector: 
        //     `app=${this.serviceName},app.kubernetes.io/name=${this.name},app.kubernetes.io/version=${this.version}`,
        //   },

        // })
        //   .then((res) => {
        //    this.eventsData = res;
        //   this.eventsVisible = true;
        //   console.log("serviceName4353",`app=${this.serviceName},app.kubernetes.io/name=${this.name},app.kubernetes.io/version=v1`);
        //   console.log("name",this.name);
        //     console.log("eventsData",this.eventsData);
        //     this.formatMessage();
        //     console.log("appA",this.appAvaliable);
           
        //   })
        //   .catch((error) => {
        //     console.log("获取应用服务负载事件错误", error);
        //   });
         


      });
      this.timer=window.setInterval(()=>{
      setTimeout(()=>{
        console.log("执行定时任务");
        this.getOutput();
      },0)
      },1000);
    },
    formatMessage(){
    var item=this.eventsData.data.items[0].status;
    var message="";
    
      if(item.conditions[0].status=="True"){
           this.appAvaliable="应用可用";
           message="应用可用，无事件发生！"
//this.appAvaliable=`应用出现事件不可用,事件出现的原因为：${item.conditions[0].reason}`
      }
      else{
          this.appAvaliable="应用不可用";
        message=`                         应用不可用,出现的原因为：${item.conditions[0].reason}，发出的提示消息为：${item.conditions[0].message}                 `
      };
      if(item.conditions[1].status=="True"){
        this.appProcess="应用创建进度完成！"
         this.appeventMessage=message+"     应用创建正常，无事件发生！"
      }else{
        this.appProcess="应用创建失败！"
        this.appAvaliable="应用不可用";
        this.appeventMessage=message+`     应用创建进程失败，原因为：${item.conditions[1].reason}`
      }

  

    },
    getOutput(){
      this.$http({
          url: this.$http.adornUrl(
            `/generator/applications/appRunningLog/${this.name}`
          ),
          method: "get",
          //
        })
          .then((res) => {
            if(res.data.code==500){
                
            }
            
            this.applicationLog=res.data.log;
          })
          .catch((error) => {
            console.log("获取日志信息错误", error);
          });
    },
    handleClose(){
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
        
      }
      this.visible=false;
    },
    cancel() {
      this.visible = false;
      this.timer=null;
      this.ingressesVisible = false;
      this.serviceVisible = false;
      this.eventsVisible=false;
      this.baseinformData=[];
      this.ingressesData = [];
      this.serviceData = [];
      this.eventsData=[];
      this.name = "";
      this.version = "";
      this.applicationLog="正在读取...";
    },
    //切换路由时，清楚定时器
    beforeRouteLeave(to, from, next){
      next();
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
  },
};
</script>

