<template>
  <div>
    <div class="process__header">
      <p class="process__header__p">{{this.$t('database_process_list')}}</p>
      <div>
        <Button type="primary" class="process__header__btn" @click="getQuery">{{$t('refresh')}}</Button>
      </div>
    </div>
    <Table border width="80%" :columns="columnsList" :data="loginData" :loading="processLoad" class="process__tab">
      <template slot-scope="{ row }" slot="User">
        <p> {{row.User}} </p>
      </template>
      <template slot-scope="{ row }" slot="db">
        <p> {{row.db}} </p>
      </template>
      <template slot-scope="{ row }" slot="time">
        <p>{{ row.Time / 1000 }}</p>
      </template>
      <template slot-scope="{ row }" slot="Command_str">
        <p>{{ row.Command_str }}</p>
      </template>
    </Table>
  </div>
</template>

<script>
import { GetProcess } from '@/api/database'
import { getToken } from '@/libs/util'
export default {
  data () {
    return {
      token: getToken(),
      loginData: [],
      processLoad: false,
      columnsList: [
        {
          title: this.$t('pl_id'),
          key: 'Id',
          align: 'center'
        },
        {
          title: this.$t('pl_user'),
          key: 'User',
          slot: 'User',
          align: 'center'
        },
        {
          title: this.$t('pl_db'),
          key: 'db',
          slot: 'db',
          align: 'center'
        },
        {
          title: this.$t('pl_command'),
          key: 'Command_str',
          align: 'center',
          slot: 'Command_str'
        },
        {
          title: this.$t('pl_time'),
          key: 'Time',
          align: 'center',
          slot: 'time'
        },
        {
          title: this.$t('pl_state'),
          key: 'State',
          align: 'center'
        },
        {
          title: this.$t('pl_info'),
          key: 'Info',
          align: 'center'
        }
      ]
    }
  },
  // 获取首页数据
  created () {
    this.getQuery()
  },
  mounted () {
  },
  methods: {
    // 获取数据
    getQuery () {
      this.processLoad = true
      const formdata = new FormData()
      formdata.append('access_token', this.token)
      GetProcess(formdata).then(res => {
        if (res.ret === 200) {
          this.loginData = res.data
        } else {
          this.$Message.error(resData.msg)
        }
        this.processLoad = false
      })
    }
  }
}
</script>

<style lang="less">
.process__header {
  margin-bottom:30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height:72px;
  background:rgba(255,255,255,1);
  padding: 0 30px;
  border-radius:10px;
  &__p{
    font-size:16px;
    font-family:PingFangSC-Medium,PingFang SC;
    font-weight:500;
    color:rgba(35,35,42,1);
  }
  &__btn {

  }
}
.process{
  &__tab{
    background: #fff;
    border-radius: 10px;
  }
}
.count-style{
  font-size: 50px;
}
</style>
