<template>
  <v-card class="mx-auto pa-3" height="100%" v-loading="loading">
    <v-simple-table
      fixed-header
      :height="height"
      style="height: 100%;"
      ref="table"
    >
      <template v-slot:default>
        <thead>
          <tr>
            <th v-for="head in headers" :key="head.value">
              {{ head.text }}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="item in items"
            :key="item.id"
          >
            <td v-for="head in headers" :key="head.value">
              <template v-if="head.value === 'actions'">
                <v-btn text color="warning" :loading="item.restartLoading" @click="handleRestart(item)">重启</v-btn>
                <v-btn text color="error" :loading="item.cleanLoading" @click="handleCleanLog(item)">清理日志</v-btn>
                <v-btn text color="primary" @click="handleLog(item)">查看日志</v-btn>
              </template>
              <template v-else-if="head.value === 'createdTime'">
                {{ dateFormat(item[head.value]) }}
              </template>
              <template v-else>{{ item[head.value] }}</template>
            </td>
          </tr>
        </tbody>
      </template>
    </v-simple-table>
    <v-navigation-drawer
      v-model="log.drawer"
      absolute
      right
      temporary
      width="700"
      hide-overlay
    >
      <log-details v-if="log.drawer" :code="log.code"></log-details>
    </v-navigation-drawer>
  </v-card>
</template>

<script>
import LogDetails from './dynamic/logDetails'
import { appList, appLog, appLogClean, appRestart } from '@/api/system'
import { dateFormat } from '@/utils/date'
export default {
  name: 'system-update-monitor',
  components: { LogDetails },
  data () {
    return {
      loading: false,
      height: '300px',
      items: [],
      headers: [
        { text: '容器id', value: 'id' },
        { text: '容器/进程名称', value: 'title' },
        { text: '镜像名称', value: 'name' },
        { text: '创建时间', value: 'createdTime' },
        { text: '状态', value: 'status' },
        { text: '端口占用', value: 'port' },
        { text: '命令', value: 'command' },
        { text: '操作', value: 'actions' }
      ],
      log: {
        code: '',
        drawer: false,
        items: []
      }
    }
  },
  created () {
    this.init()
  },
  mounted () {
    this.$nextTick(() => {
      this.height = this.$refs.table.$el.clientHeight + 'px'
    })
  },
  methods: {
    async init () {
      this.loading = true
      try {
        const { data } = await appList()
        data.shift()
        this.items = data.map(ele => {
          return {
            ...ele.reduce((res, item, index) => {
              res[this.headers[index].value] = item
              return res
            }, {}),
            restartLoading: false,
            cleanLoading: false
          }
        })
      } catch (error) {
        this.$snackbar.error(error)
      } finally {
        this.loading = false
      }
    },
    dateFormat (str) {
      if (!str) {
        return ''
      }
      return dateFormat('YYYY-mm-dd HH:MM:SS', new Date(str))
    },
    // 重启
    handleRestart (item) {
      this.$confirm('系统提示', '是否确认重启此进程？').then(async () => {
        item.restartLoading = true
        try {
          await appRestart({ containerId: item.id })
          this.$snackbar.success('重启成功！')
        } catch (error) {
          this.$snackbar.error(error)
        } finally {
          item.restartLoading = false
        }
      })
    },
    // 清理日志
    handleCleanLog (item) {
      this.$confirm('系统提示', '是否确定清理此程序日志？').then(async () => {
        item.cleanLoading = true
        try {
          await appLogClean({ containerId: item.id })
          this.$snackbar.success('清理成功!')
        } catch (error) {
          this.$snackbar.error(error)
        } finally {
          item.cleanLoading = false
        }
      })
    },
    // 查看日志
    async handleLog (item) {
      this.log.drawer = true
      try {
        const { data } = await appLog({ containerId: item.id })
        this.log.code = data
      } catch (error) {
        this.$snackbar.error(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
