<template>
  <div>
    <PageTable ref="queryJVM" :resource="resource" :columnsFn="JVMColumns">
    </PageTable>
  </div>
</template>
<script>
import ResourcesMonitoringDetails from "./ResourcesMonitoringDetails";
import JVMInfo from "./JVMInfo";
export default {
  name: 'resources-monitoring',
  data() {
    return {
      last: "0",      
      clicktag: "0",
      resource: [],
      modal: false,
      tableData: [],
      addOrEditWinTitle: this.$t("module.resourceMonitor.JVMInfo"),
    };
  },
  created() {
    this.JVMList();
  },
  computed: {
    
  },
  methods: {
    JVMColumns() {
      return [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: this.$t('common.operating'),
          align: "center",
          width: 120,
          render: (h, params) => {
            return h("RowTools", {
              props: {
                data: [
                  {
                    type: "button",
                    text: this.$t("module.resourceMonitor.chart"),
                    handle: () => {
                      let now = Date.now();
                      if(now - this.last > 1500){
                        this.queryDetails(params.row.runtimeName);
                        this.last = now;
                      }
                    }
                  },
                  {
                    type: "button",
                    text: this.$t("module.resourceMonitor.detail"),
                    handle: () => {
                      new this.$pageModal(
                        JVMInfo,
                        {
                          props: {
                            data: params.row,
                            upTime: this.getUpTime(params.row.upTime)
                          }
                        },(data) => {

                        }                        
                      )
                    }
                  },
                ]
              }
            });
          }
        },
        {
          title: this.$t("module.resourceMonitor.JVMName"),
          align: "center",          
          sortable: true,
          key: "runtimeName"
        },
        {
          title: this.$t("module.resourceMonitor.JVMStartTime"),
          sortable:true,
          align: "center",
          key: "startTime"
        },
        {
          title: this.$t("module.resourceMonitor.JVMRunTime"),
          align: "center",
          key: "upTime",
          render: (h, params) => {
            let days = parseInt(params.row.upTime / (1000 * 60 * 60 * 24));
            let hours = parseInt((params.row.upTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            let minutes = parseInt((params.row.upTime % (1000 * 60 * 60)) / (1000 * 60));
            let seconds = Math.round((params.row.upTime % (1000 * 60)) / 1000);
            return days + '' + this.$t("module.resourceMonitor.day") + hours + '' + this.$t("module.resourceMonitor.hour") + minutes + '' + this.$t("module.resourceMonitor.minute") + seconds + '' + this.$t("module.resourceMonitor.second");
          }
        }
      ]
    },
    JVMList(page) {
      $store.dispatch('QueryJVM').then((data) => {
        this.resource = data;
        this.$refs['queryJVM'].refresh();
      })
    },
    queryDetails(runtimeName) {
      new this.$sidelipPage(
        ResourcesMonitoringDetails,
        {
          props: {
            runtimeName: runtimeName
          }
        },
      );
    },
    onOk() {
      this.modal = false;
    },
    getUpTime(upTime) {
      let days = parseInt(upTime / (1000 * 60 * 60 * 24));
      let hours = parseInt((upTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      let minutes = parseInt((upTime % (1000 * 60 * 60)) / (1000 * 60));
      let seconds = Math.round((upTime % (1000 * 60)) / 1000);
      return days + '' + this.$t("module.resourceMonitor.day") + hours + '' + this.$t("module.resourceMonitor.hour") + minutes + '' + this.$t("module.resourceMonitor.minute") + seconds + '' + this.$t("module.resourceMonitor.second");
    }
  }
};
</script>
<style lang="less">
.ivu-modal-content {
  padding-top: 0;
}

.send-mail-title {
  font-size: 18px;
}


.modal-group,
.modal-group-select,
.modal-group-person {
  width: 30%;
  height: 360px;
  border: 1px solid #e9eaec;
  overflow: auto;
  display: inline-block;
  border-radius: 3px;
  padding: 10px;
}
.modal-group{
  margin-right: 1%;
}
.modal-group-person {
  .group-person-item {
    width: 100%;
    padding: 5px 10px;
    margin-bottom: 1px;
    cursor: pointer;
    // height: 20px;
    // line-height: 20px;
  }
  .group-person-item.active {
    background-color: #fff1cf !important;
  }
}
.transfer-panel-empty {
  display: block;
  color: #b4bccc;
}
.group-person-item + .transfer-panel-empty {
  display: none;
}
.group-person-select + .transfer-panel-empty {
  display: none;
}
.group-person-select {
  width: 100%;
  padding: 5px 10px;
  margin-bottom: 1px;
}

.group-person-select.active {
  background-color: #fff1cf;
}

.modal-group-button {
  width:7%;
  height: 360px;
  overflow: auto;
  display: inline-block;
  text-align: center;
  .modal-center {
    margin: 0 auto;
    margin-top: 148px;
  }
}

</style>