<template>
  <div class="detail_contain">
      <p class="now_page_title">
      我的应用 / 部署的应用 / 应用详情 /
      <span>应用调试</span>
    </p> 
    <div class="search_header">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="工作区域">
                <el-select v-model="formInline.area" @change="get_app_list(false)" placeholder="工作区域">
                    <el-option :label="item.text" :value="item.value" v-for="(item,index) in area_arr" :key="index+7800"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="应用">
                <el-select v-model="formInline.name" placeholder="应用">
                    <el-option :label="item.deploy_name" :value="item.deploy_name" v-for="(item,index) in app_arr" :key="index+7800"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item style="float:right;">
                <el-button type="primary" style="width:90px;backgroundColor:#495feb;color:#e6ebfe;" @click="get_list_pod">查询</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div class="search_list">
        <div class="list_header">
            <span></span>容器组
            <el-input placeholder="请输入内容" style="float:right;" @change="get_list_pod" v-model="pod_name" prefix-icon="el-icon-search"></el-input>
        </div>
        <div style="padding:20px;padding-top:0px;display: flex;flex-direction: column;height: calc(100% - 80px);align-items:stretch;">
            <apass-table :header="header_arr" :data="tableData" :icon="false" style="flex-grow:1;" :paddingLeft="5"></apass-table>
            <list-pagination
                :total="listTotal"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                :current-page="currentPage"
                @size-change="changePageSize"
                @current-change="changeCurrentPage"
            ></list-pagination>
        </div>
    </div>
    <apass-dialog
      ref="actiondialog"
      title="资源详情"
      width="904px"
    >
      <template slot="content">
        <div>
          <div style="margin:20px;">
            <div class="yaml_json">
              <div @click="changyaml(0)" :style="now_yaml==0?{color:'#f8f9fd',backgroundColor:'#0f2683'}:''">YAML</div>
              <div @click="changyaml(1)" :style="now_yaml==1?{color:'#f8f9fd',backgroundColor:'#0f2683'}:''">JSON</div>
            </div>
            <div class="tips">
              <i class="el-icon-warning-outline"></i><span>此操作相当于：kubectl apply -f {{'<'+'spec.yaml'+'>'}}</span>
            </div>
            <v-apaas-code :datas="code_arr" v-show="now_yaml==1"></v-apaas-code>
            <v-apaas-code :datas="yaml_arr" v-show="now_yaml==0"></v-apaas-code>
          </div>
          
        </div>
      </template>
      <template slot="action">
        <div>
        </div>
      </template>
    </apass-dialog>
  </div>
</template>
 
<script>
import apassTable from "@/components/apass-table";
import ListPagination from "@/components/comments-pagination";
import apassDialog from '@/components/apass-dialog'
import codes from "@/components/general/codes";
import yaml from "json2yaml"
import json from 'js-yaml'
export default {
  components: {
    apassTable,
    ListPagination,
    apassDialog,
    "v-apaas-code": codes,
  },
  data() {
    return {
        listTotal: 0,
        currentPage: 1,
        pageSize: 10,
        pageSizes: [10, 50, 100],
        formInline:{
            area:'',
            name:''
        },
        now_yaml:0,
        pod_name:'',
        code_arr:'',
        yaml_arr:'',
        area_arr:[],
        app_arr:[],
        tableData:[],
        header_arr:[]
    };
  },
  computed:{
    // table_height(){
    //   return  document.body.clientHeight - 390
    // }
  },
  created() {
    console.log(json,yaml);
    this.formInline={
      area:this.$route.query.namespace,
      name:this.$route.query.app
    }
    this.get_namespace_list()
    this.get_app_list()
    this.get_list_pod()
  },
  mounted() {
      this.header_arr = [
              {
                prop: "icon",
                label: "",
                width: 40,
                align: "left",
                type:"icon",
              },
              {
                prop: "name",
                label: "名称",
                align: "left",
                type: "button"
              },
              {
                prop: "tag",
                label: "标签",
                align: "left",
                type: "tag",
              },
              {
                prop: "node",
                label: "节点",
                width: 120,
                align: "left",
              },
              {
                prop: "state",
                label: "状态",
                width: 80,
                align: "center",
              },
              {
                prop: "times",
                label: "重启",
                width: 80,
                align: "center",
              },
              {
                prop: "cpu",
                label: "cpu使用率",
                width: 100,
                align: "center",
                type:"chart"
              },
              {
                prop: "mermoy",
                label: "内存使用",
                width: 100,
                align: "center",
                type:"chart"
              },
              {
                prop: "time",
                label: "创建时间",
                width: 200,
                align: "center",
              },
              {
                label: "操作",
                type: "buttons",
                width: "120px",
                align: "center",
                width: 300,
                actionList: [
                  {
                    label: "日志",
                    callback: this.gotopage,
                  },
                  {
                    label: "调试",
                    callback: this.gotopage1,
                  },
                  {
                    label: "查看",
                    callback: this.lookrecord,
                  },
                  {
                    label: "删除",
                    callback: this.adelete,
                    class:'warn'
                  },
                ],
              },
            ];
  },
  methods: {
    changyaml(n){
      this.now_yaml = n
    },
    adelete(val){
      this.$http
        .delete(`/awecloud/rest/kubernetes/api/v1/_raw/pod/namespace/${val.namespace}/name/${val.name}`)
        .then(response => {
          this.$message.success('删除成功')
          this.get_list_pod()
        })
    },
    get_namespace_list(){
      this.$http
        .get(`/apaas/hubApi/market/namespaces`)
        .then(response => {
          if(response.data.success){
            this.area_arr = response.data.data
          }
        })
    },
    get_app_list(flag=true){
      if(!flag){
        this.$set(this.formInline,'name','')
      }
      this.$http
        .get(`/apaas/hubApi/cloud/podApps/${this.formInline.area}`)
        .then(response => {
          if(response.data.success){
            this.app_arr = response.data.data
          }
        })
    },
    gotopage(val){
      this.$http
        .get(`/awecloud/rest/kubernetes/api/v1/_raw/pod/namespace/${val.namespace}/name/${val.name}`)
        .then(response => {
          this.$router.push(`/yygl/${this.$route.params.level}/${this.$route.params.type}/appdebuggerdetail/${this.$route.params.deploy_id}?content=0&namespace=${val.namespace}&name=${val.name}&container=${response.data.spec.containers[0].name}`)
        })
    },
    gotopage1(val){
      this.$http
        .get(`/awecloud/rest/kubernetes/api/v1/_raw/pod/namespace/${val.namespace}/name/${val.name}`)
        .then(response => {
          this.$router.push(`/yygl/${this.$route.params.level}/${this.$route.params.type}/appdebuggerdetail/${this.$route.params.deploy_id}?content=1&namespace=${val.namespace}&name=${val.name}&container=${response.data.spec.containers[0].name}`)
        })
      
    },
    get_list_pod(){
        this.$http
        .get(`/apaas/hubApi/cloud/podList/${this.formInline.area}?itemsPerPage=${this.pageSize}&page=${this.currentPage}&label=${this.formInline.name}&filterBy=${this.pod_name}`)
        .then(response => {
          if(response.data.success){
            this.listTotal = response.data.data.listMeta.totalItems
            this.tableData = []
            response.data.data.pods.forEach(e => {
              var temp_tag = []
              for (const key in e.objectMeta.labels) {
                temp_tag.push(
                  key+':'+e.objectMeta.labels[key]
                )
              }
              var temp_time = this.time_deal(e.objectMeta.creationTimestamp)
              

              this.tableData.push({
                icon:e.podStatus.status=="ContainerCreating"||e.podStatus.status=="Pending"?'3':e.podStatus.status=="Succeeded"?'2':e.podStatus.status=="Failed"?'4':'1',
                name:e.objectMeta.name,
                tag:temp_tag,
                node:e.nodeName,
                state:e.podStatus.status,
                times:e.restartCount,
                cpu:e.metrics&&e.metrics.cpuUsageHistory?this.cpu_deal(e.metrics.cpuUsageHistory):[],
                cpu_use:e.metrics&&e.metrics.cpuUsage?e.metrics.cpuUsage:'',
                mermoy:e.metrics&&e.metrics.memoryUsageHistory?this.cpu_deal(e.metrics.memoryUsageHistory):[],
                memory_use:e.metrics&&e.metrics.memoryUsage?e.metrics.memoryUsage:'',
                time:temp_time,
                namespace:this.formInline.area
              })
            });
          }
        })
    },
    cpu_deal(arr){
      var temp = []
      arr.forEach(e => {
        temp.push(e.value)
      });
      return temp
    },
    time_deal(data){
      data = data.replace('Z','')
      var temp = data.split('T')
      var temp_all = [...temp[0].split('-'),...temp[1].split(':')]
      if(parseInt(temp_all[3])+8>=24){
        temp_all[3]=parseInt(temp_all[3])-16>=10?parseInt(temp_all[3])-16:"0"+(parseInt(temp_all[3])-16)
        temp_all[2]=parseInt(temp_all[2])+1>=10?parseInt(temp_all[2])+1:"0"+(parseInt(temp_all[2])+1)
      }else if(parseInt(temp_all[3])+8>=10){
        temp_all[3] = parseInt(temp_all[3])+8
      }else{
        temp_all[3] = '0'+(parseInt(temp_all[3])+8)
      }

      return temp_all[0]+'-'+temp_all[1]+'-'+temp_all[2]+' '+temp_all[3]+':'+temp_all[4]+':'+temp_all[5]
    },
    lookrecord(val){
      console.log(val);
      this.$http
        .get(`/awecloud/rest/kubernetes/api/v1/_raw/pod/namespace/${val.namespace}/name/${val.name}`)
        .then(response => {
            console.log(response.data);
            this.yaml_arr = yaml.stringify(response.data)
            this.code_arr = JSON.stringify(json.load(this.yaml_arr), null, 2);
            this.$refs.actiondialog.show();
          
        })
    },
    changePageSize(value) {
        this.pageSize = value;
        this.currentPage = 1;
        
    },
    changeCurrentPage(value) {
      this.currentPage = value;
      
    },
  }
};
</script>
 

<style>
.list_header .el-input {
  width: 228px;
} 
.list_header .el-input__inner {
  background-color: #f7f8f9;
  width: 228px;
} 
</style>
<style scoped>
.detail_contain {
  width: 100%;
  padding: 0 20px;
  height: calc(100% - 55px);
}
.now_page_title {
  margin: 15px 0;
  color: #898d9e;
}
.now_page_title span {
  color: #242c43;
}
.search_header{
    width: 100%;
	height: 80px;
	background-color: #ffffff;
	box-shadow: 0px 3px 6px 0px 
		#f4f7fc;
    border-radius: 12px;
    padding: 20px;
}
.search_list{
    width: 100%;
    height: calc(100% - 110px);
    margin-top: 20px;
    background-color: #ffffff;
	box-shadow: 0px 3px 6px 0px 
		#f4f7fc;
	border-radius: 12px;
}
.list_header{
    height: 80px;
    border-bottom: 1px solid #e3e5ef;
    padding: 20px;
}
.list_header span{
    width: 4px;
	height: 16px;
	background-color: #515fe7;
    border-radius: 2px;
    display: inline-block;
    margin-right: 10px;
    margin-top: 10px;
    vertical-align: -2px;
}
.yaml_json{
  width: 176px;
	height: 44px;
	background-color: #f7f8f9;
	border-radius: 6px;
  padding: 7px;
}
.yaml_json div{
  width: 77px;
	height: 30px;
  line-height: 30px;
  text-align: center;
	color: #0f2683;
	border-radius: 6px;
  float: left;
  font-size: 14px;
  cursor: pointer;
}
.yaml_json div:nth-of-type(2){
  float: right;
}
.tips{
  font-size: 12px;
  color: #8890a7;
	height: 34px;
  line-height: 34px;
  text-align: left;
	background-color: #f8f9fd;
	border-radius: 8px;
  margin: 18px 0;
  padding-left: 10px;
}
.tips i{
  margin-right: 10px;
}
</style>