<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="gc" v-hasPermi="['admin:state:gc']">GC</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="refresh"></right-toolbar>
    </el-row>

    <el-divider content-position="left">JVM</el-divider>
    <Descriptions>
      <el-descriptions-item label="启动时间">{{state.startTime}}</el-descriptions-item>
      <el-descriptions-item label="当前时间">{{state.uptime}}</el-descriptions-item>
      <el-descriptions-item label="运行时长(s)">{{state.runDuration / 1000}}</el-descriptions-item>
      <el-descriptions-item label="启动参数">{{state.arguments}}</el-descriptions-item>
    </Descriptions>
    <el-divider content-position="left">堆内存</el-divider>
    <Descriptions>
      <el-descriptions-item label="初始分配">{{state.heapInit | formatFileSize}}</el-descriptions-item>
      <el-descriptions-item label="最大">{{state.heapMax | formatFileSize}}</el-descriptions-item>
      <el-descriptions-item label="已使用">{{state.heapUsed | formatFileSize}}</el-descriptions-item>
      <el-descriptions-item label="已提交">{{state.heapCommitted | formatFileSize}}</el-descriptions-item>
    </Descriptions>
    <el-divider content-position="left">非堆内存</el-divider>
    <Descriptions>
      <el-descriptions-item label="初始分配">{{state.nonHeapInit | formatFileSize}}</el-descriptions-item>
      <el-descriptions-item label="最大">{{state.nonHeapMax | formatFileSize}}</el-descriptions-item>
      <el-descriptions-item label="已使用">{{state.nonHeapUsed | formatFileSize}}</el-descriptions-item>
      <el-descriptions-item label="已提交">{{state.nonHeapCommitted | formatFileSize}}</el-descriptions-item>
    </Descriptions>
    <el-divider content-position="left">内存池</el-divider>
    <el-table :data="state.memoryPools || []">
      <el-table-column type="index" label="序号" width="50" align="center" />
      <el-table-column label="名称" align="left" header-align="center" prop="name" />
      <el-table-column label="类型" align="center" prop="type"/>
      <el-table-column label="初始分配" align="center" prop="memoryInit" :formatter="fileSizeFormatter"/>
      <el-table-column label="最大" align="center" prop="memoryMax" :formatter="fileSizeFormatter"/>
      <el-table-column label="已使用" align="center" prop="memoryUsed" :formatter="fileSizeFormatter"/>
      <el-table-column label="已提交" align="center" prop="memoryCommitted" :formatter="fileSizeFormatter"/>
    </el-table>
    <el-divider content-position="left">线程</el-divider>
    <Descriptions>
      <el-descriptions-item label="前后台活动线程数">{{state.threadCount}}</el-descriptions-item>
      <el-descriptions-item label="后台活动线程数">{{state.daemonThreadCount}}</el-descriptions-item>
      <el-descriptions-item label="实时线程数">{{state.peakThreadCount}}</el-descriptions-item>
      <el-descriptions-item label="最多线程数">{{state.startedThreadCount}}</el-descriptions-item>
    </Descriptions>
    <el-table :data="state.threads || []" :row-style="threadRowStyle">
      <el-table-column type="index" label="序号" width="50" align="center" />
      <el-table-column label="线程ID" align="center" prop="threadId" sortable/>
      <el-table-column label="线程名" align="left" header-align="center" prop="threadName" />
      <el-table-column label="线程状态" align="center" prop="threadState" sortable/>
    </el-table>
  </div>
</template>

<script>
import DeptSelect from "@/components/common/DeptSelect.vue";
import ServerFileChooser from "@/components/ServerFileChooser.vue";
import FullscreenDialog from "@/components/FullscreenDialog.vue";
import ProjectState from "@/views/file/state/ProjectState.vue";
import {stateList, gc, stateMachine, dump, runtimeState} from "@/api/file/state";
import Descriptions from "@/components/common/Descriptions.vue";
import {formatFileSize} from "@/utils/file";


export default {
  name: "State",
  components: {
    Descriptions,
    ProjectState,
    FullscreenDialog,
    ServerFileChooser,
    DeptSelect
  },
  dicts: ['sys_bool'],
  data() {
    return {
      // 遮罩层
      loading: false,
      // 遮罩按钮新增点击状态
      diglogStatus: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 默认隐藏搜索条件
      showSearch: false,
      // 总条数
      total: 0,
      // 项目表格数据
      stateList: [],
      // 弹出层标题
      title: "",
      // 是否禁用 字典 sys_bool字典
      disabledOptions: [],
      // 查询参数
      queryParams: {
        // 分页
        pageNum: 1,
        pageSize: 10,
        // 查询排序
        //orderByColumn: "id",
        //isAsc: "desc",
        // 翻译字典
        //translate_dict: "1",
      },
      // 表单参数
      form: {},
      // 详情组件列数
      descColumn: 2,
      // 详情组件Label所占百分比, 最大={100 / descColumn}. 内容所占百分比={100 / descColumn - descLabelWidth}
      descLabelWidth: 15,
      // 对话框显示只读的详情
      projectToken: null,
      state: {},
    };
  },
  created() {
    this.getRuntimeState();
  },
  methods: {
    // 取消按钮
    cancel() {
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
      };
    },
    refresh() {
      this.getRuntimeState();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    gc() {
      gc().then((resp) => {
        this.$message.success('成功');
        this.getRuntimeState();
      });
    },
    getRuntimeState() {
      this.state = {};
      runtimeState().then((resp) => {
        this.state = resp.data;
      });
    },
    fileSizeFormatter(row, col, val) {
      return formatFileSize(val);
    },
    threadRowStyle({row}) {
      let style = {};
      if(row.isCurrent)
        style['background-color'] = '#67C23A';
      return style;
    },
  },
  filters: {
    formatFileSize,
  },
};
</script>
