<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <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>
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-download" size="mini" @click="dump" v-hasPermi="['admin:state:gc']">Dump</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="refresh"></right-toolbar>
    </el-row>

    <Descriptions>
      <el-descriptions-item label="上传字节数">{{state.uploadSize | formatFileSize}}</el-descriptions-item>
      <el-descriptions-item label="写入字节数">{{state.writeSize | formatFileSize}}</el-descriptions-item>
      <el-descriptions-item label="上传文件数">{{state.numUpload}}</el-descriptions-item>
      <el-descriptions-item label="写入文件数">{{state.numWrite}}</el-descriptions-item>
      <el-descriptions-item label="处理错误数">{{state.numError}}</el-descriptions-item>
      <el-descriptions-item label="最近上传时间">{{state.lastUploadTime}}</el-descriptions-item>
      <el-descriptions-item label="最近写入时间">{{state.lastWriteTime}}</el-descriptions-item>
      <el-descriptions-item label="最近错误时间">{{state.lastErrorTime}}</el-descriptions-item>
      <el-descriptions-item label="最大上传字节数">{{state.maxUploadSize | formatFileSize}}</el-descriptions-item>
      <el-descriptions-item label="最大写入字节数">{{state.maxWriteSize | formatFileSize}}</el-descriptions-item>
      <el-descriptions-item label="最长处理时间">{{state.maxHandleDuration}}</el-descriptions-item>
      <el-descriptions-item label="GC次数">{{state.gcCount}}</el-descriptions-item>
      <el-descriptions-item label="最近GC时间">{{state.lastGCTime}}</el-descriptions-item>
      <el-descriptions-item label="本次开始时间">{{state.startTime}}</el-descriptions-item>
      <el-descriptions-item label="上次结束时间">{{state.lastEndTime}}</el-descriptions-item>
      <el-descriptions-item label="上次dump时间">{{state.lastDumpTime}}</el-descriptions-item>
      <el-descriptions-item label="记录数">{{total}}</el-descriptions-item>
    </Descriptions>

    <el-table v-loading="loading" :data="stateList" @selection-change="handleSelectionChange">
      <!--<el-table-column type="selection" width="55" align="center" />-->
      <el-table-column type="index" label="序号" width="50" align="center" />
      <!--<el-table-column label="ID" align="center" prop="id" min-width="60" />-->
      <el-table-column label="标识" align="center" prop="token" />
      <el-table-column label="上传字节数" align="center" prop="uploadSize" :formatter="fileSizeFormatter" />
      <el-table-column label="上传文件数" align="center" prop="numUpload" />
      <el-table-column label="处理错误数" align="center" prop="numError" />
      <el-table-column label="最近上传时间" align="center" prop="lastUploadTime" />
      <el-table-column label="最大上传字节数" align="center" prop="maxUploadSize" :formatter="fileSizeFormatter" />
      <el-table-column label="最长处理时间" align="center" prop="maxHandleDuration" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-view" @click="handleLook(scope.row)" v-hasPermi="['admin:state:detail']">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <FullscreenDialog title="项目状态" :visible.sync="viewOpen" @close="closeProjectState">
      <ProjectState :token="projectToken"/>
    </FullscreenDialog>

  </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} 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: "",
      // 是否显示弹出层
      open: false,
      // 是否禁用 字典 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,
      // 对话框显示只读的详情
      viewOpen: false,
      projectToken: null,
      state: {},
    };
  },
  created() {
    this.getStateMachine();
    this.getList();
  },
  methods: {
    /** 查询项目列表 */
    getList() {
      this.loading = true;
      stateList(this.queryParams).then(response => {
        this.stateList = response.data;
        this.total = this.stateList.length;
      }).finally(() => this.loading = false );
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.viewOpen = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
      };
    },
    refresh() {
      this.getStateMachine();
      this.getList();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 查看按钮操作 */
    handleLook(row) {
      this.projectToken = row.token;
      this.viewOpen = true;
    },
    closeProjectState() {
      this.viewOpen = false;
      this.projectToken = null;
    },
    gc() {
      gc().then((resp) => {
        this.$message.success('成功');
        this.getStateMachine();
      });
    },
    getStateMachine() {
      this.state = {};
      stateMachine().then((resp) => {
        this.state = resp.data;
      });
    },
    dump() {
      dump().then((resp) => {
        this.$message.success('成功');
        this.getStateMachine();
      });
    },
    fileSizeFormatter(row, col, val) {
      return formatFileSize(val);
    },
  },
  filters: {
    formatFileSize,
  },
};
</script>
