<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" placeholder="工作区域">
                    <el-option :label="item.label" :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.label" :value="item.value" 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="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div class="search_list">
        <div class="list_header">
            <span></span>容器组
            <el-input placeholder="请输入内容" style="float:right;" v-model="pod_name" prefix-icon="el-icon-search"></el-input>
        </div>
        <div style="padding:20px;padding-top:0px;">
            <apass-table :header="header_arr" :data="tableData" :icon="false" :height="560" :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>
  </div>
</template>
 
<script>
import apassTable from "@/components/apass-table";
import ListPagination from "@/components/comments-pagination";
export default {
  components: {
    apassTable,
    ListPagination
  },
  data() {
    return {
        listTotal: 0,
        currentPage: 1,
        pageSize: 10,
        pageSizes: [10, 50, 100],
        formInline:{
            area:'',
            name:''
        },
        pod_name:'',
        area_arr:[
            {
                value:1,
                label:'apaas',
            },
            {
                value:2,
                label:'apaas1',
            },
            {
                value:3,
                label:'apaas2',
            },
        ],
        app_arr:[
            {
                value:1,
                label:'mapvideos',
            },
            {
                value:2,
                label:'mapvideos1',
            },
            {
                value:3,
                label:'mapvideos2',
            },
        ],
        tableData:[
            {
                icon:'1',
                name:'1',
                tag:['1','222'],
                node:'1',
                state:'1',
                times:'1',
                cpu:[1,2,34,5],
                cpu_use:34,
                mermoy:[1,2,34,10],
                memory_use:45,
                time:'1'
            },
            {
                icon:'1',
                name:'1',
                tag:['1','2','3'],
                node:'1',
                state:'1',
                times:'1',
                cpu:[1,2,34,5],
                cpu_use:4,
                mermoy:[1,2,34,50],
                memory_use:45,
                time:'1'
            },
          
        ],
        header_arr:[]
    };
  },
  created() {

  },
  mounted() {
      this.header_arr = [
              {
                prop: "icon",
                label: "",
                width: 40,
                align: "left",
                type:"icon",
              },
              {
                prop: "name",
                label: "名称",
                minWidth: "20%",
                align: "left",
                type: "button",
                callback(item) {
                  _this.$router.push(`/authority/users/detail/${item.user_id}`);
                },
              },
              {
                prop: "tag",
                label: "标签",
                minWidth: "20%",
                align: "left",
                type: "tag",
              },
              {
                prop: "node",
                label: "节点",
                width: 80,
                align: "left",
              },
              {
                prop: "state",
                label: "状态",
                width: 80,
                align: "center",
              },
              {
                prop: "times",
                label: "重启",
                width: 50,
                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: 140,
                align: "center",
              },
              {
                label: "操作",
                type: "buttons",
                width: "120px",
                align: "center",
                width: 300,
                actionList: [
                  {
                    label: "日志",
                    callback: this.adelete,
                  },
                  {
                    label: "调试",
                    callback: this.adelete,
                  },
                  {
                    label: "查看",
                    callback: this.adelete,
                  },
                  {
                    label: "删除",
                    callback: this.adelete,
                  },
                ],
              },
            ];
  },
  methods: {
    get_list_app(){
        this.$http
        .get(`/apaas/hubApi/market/services/${this.$route.params.deploy_id}`)
        .then(response => {
          if(response.data.success){
            this.service_list_arr = response.data.data
          }
        })
    },
    onSubmit(){

    },
    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;
}
</style>