<template>
  <d2-container>
    <template #header>
      <div class="search-bar">
        <el-form :inline="true" size="mini">
          <el-form-item :label="$t(key('monitor_code'))">
            <el-input v-model.trim="search.code" :placeholder="$t(key('enter_monitor_code'))" clearable style="width:200px" @keyup.enter.native="onSearch" />
          </el-form-item>
          <el-form-item :label="$t(key('monitor_name'))">
            <el-input v-model.trim="search.name" :placeholder="$t(key('enter_monitor_name'))" clearable style="width:200px" @keyup.enter.native="onSearch" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="onSearch">{{ $t(key('search')) }}</el-button>
            <el-button icon="el-icon-refresh" @click="onReset">{{ $t(key('reset')) }}</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>

    <page-table ref="pageTable" :columns="columns" :data="tableData" :loading="loading" :toolbar-buttons="toolbarButtons" :row-buttons="rowButtons" :pagination="pagination" auto-height @page-change="onPageChange" />

    <page-dialog-form ref="dialogForm" :visible.sync="dialogVisible" :title="dialogTitle" width="42%" :form-cols="formCols" :form-data="formData" :rules="rules" label-width="150px" :submitting="submitting" :confirm-text="key('confirm')" :cancel-text="key('cancel')" @submit="onDialogSubmit" @close="onDialogClose" />
  </d2-container>
</template>

<script>
import { useTableColumns } from '@/composables/useTableColumns'
import { useTableButtons } from '@/composables/useTableButtons'
import { i18nMixin } from '@/composables/useI18n'
import { confirmMixin } from '@/composables/useConfirmHandle'
import PageTable from '@/components/page-table'
import PageDialogForm from '@/components/page-dialog-form'
import { getMonitoringConfigurationList, createMonitoringConfiguration, editMonitoringConfiguration, deleteMonitoringConfiguration } from '@/api/system-administration/monitoring-configuration'

export default {
  name: 'system-administration-monitoring-configuration',
  components: { PageTable, PageDialogForm },
  mixins: [i18nMixin('page.system_administration.system_monitoring.monitoring_configuration'), confirmMixin],
  data () {
    return {
      loading: false,
      submitting: false,
      tableData: [],
      dialogVisible: false,
      dialogTitle: '',
      editId: '',
      handleType: 'create',
      search: { code: '', name: '' },
      pagination: { current: 1, size: 10, total: 0 },
      formData: this.defaultFormData(),
      rules: {
        code: [
          { required: true, message: this.key('please_enter_monitor_code'), trigger: 'blur' },
          { min: 1, max: 100, message: this.key('length_1_to_100'), trigger: 'blur' }
        ],
        name: [
          { required: true, message: this.key('please_enter_monitor_name'), trigger: 'blur' },
          { min: 1, max: 100, message: this.key('length_1_to_100'), trigger: 'blur' }
        ],
        ip: [
          { required: true, message: this.key('please_enter_ip_address'), trigger: 'blur' },
          { min: 1, max: 100, message: this.key('length_1_to_100'), trigger: 'blur' }
        ],
        port: [
          { required: true, message: this.key('please_enter_port'), trigger: 'blur' },
          { min: 1, max: 100, message: this.key('length_1_to_100'), trigger: 'blur' }
        ]
      },
      columns: [],
      toolbarButtons: [],
      rowButtons: [],
      formCols: [
        [{ type: 'input', prop: 'code', label: this.key('monitor_code'), placeholder: this.key('enter_monitor_code'), clearable: true, style: { width: '90%' } }],
        [{ type: 'input', prop: 'name', label: this.key('monitor_name'), placeholder: this.key('enter_monitor_name'), clearable: true, style: { width: '90%' } }],
        [{ type: 'input', prop: 'ip', label: this.key('ip_address'), placeholder: this.key('enter_ip_address'), clearable: true, style: { width: '90%' } }],
        [{ type: 'input', prop: 'port', label: this.key('port'), placeholder: this.key('enter_port'), clearable: true, style: { width: '90%' } }],
        [{ type: 'input', prop: 'refresh_interval', label: this.key('refresh_interval'), placeholder: this.key('enter_refresh_interval'), clearable: true, style: { width: '90%' } }],
        [{ type: 'input', prop: 'disk_warning', label: this.key('disk_warning'), placeholder: this.key('enter_disk_warning'), clearable: true, style: { width: '90%' } }],
        [{ type: 'input', prop: 'cpu_warning', label: this.key('cpu_warning'), placeholder: this.key('enter_cpu_warning'), clearable: true, style: { width: '90%' } }],
        [{ type: 'input', prop: 'mem_warning', label: this.key('memory_swap_warning'), placeholder: this.key('enter_memory_swap_warning'), clearable: true, style: { width: '90%' } }],
        [{ type: 'input', prop: 'version', label: this.key('python_version'), placeholder: this.key('enter_python_version'), clearable: true, style: { width: '90%' } }]
      ]
    }
  },
  created () {
    this.columns = useTableColumns([
      { prop: 'sort', label: this.key('serial_number'), width: 90 },
      { prop: 'code', label: this.key('monitor_code'), minWidth: 120 },
      { prop: 'name', label: this.key('monitor_name'), minWidth: 140 },
      { prop: 'ip', label: this.key('ip_address'), minWidth: 140 },
      { prop: 'port', label: this.key('port'), width: 100 },
      { prop: 'version', label: this.key('python_version'), minWidth: 120 },
      { prop: 'refresh_interval', label: this.key('refresh_interval'), minWidth: 130 },
      { prop: 'cpu_warning', label: this.key('cpu_warning'), minWidth: 120 },
      { prop: 'disk_warning', label: this.key('disk_warning'), minWidth: 120 },
      { prop: 'mem_warning', label: this.key('memory_swap_warning'), minWidth: 150 },
      { prop: '_actions', label: this.key('operation'), width: 160, fixed: 'right' }
    ])
    const btns = useTableButtons({
      toolbar: [
        { key: 'add', label: this.key('add'), icon: 'el-icon-plus', type: 'primary', auth: '/system_settings/system_monitor/setting/create', onClick: this.openAdd }
      ],
      row: [
        { key: 'edit', label: this.key('edit'), icon: 'el-icon-edit', auth: '/system_settings/system_monitor/setting/edit', onClick: this.openEdit },
        { key: 'delete', label: this.key('delete'), icon: 'el-icon-delete', color: 'danger', auth: '/system_settings/system_monitor/setting/delete', onClick: this.handleDelete }
      ]
    }, this.$permission)
    this.toolbarButtons = btns.toolbarButtons
    this.rowButtons = btns.rowButtons
    this.fetchData()
  },
  methods: {
    defaultFormData () {
      return { code: '', name: '', ip: '', port: '', refresh_interval: 1000, disk_warning: 90, cpu_warning: 90, mem_warning: 90, version: 3 }
    },
    async fetchData () {
      this.loading = true
      try {
        const res = await getMonitoringConfigurationList({ ...this.search, page_no: this.pagination.current, page_size: this.pagination.size })
        const data = res && res.data ? res.data : res
        this.tableData = (data && data.data) || data || []
        this.pagination.total = Number((data && data.count) || 0)
      } finally {
        this.loading = false
      }
    },
    onSearch () {
      this.pagination.current = 1
      this.fetchData()
    },
    onReset () {
      this.search = { code: '', name: '' }
      this.pagination.current = 1
      this.fetchData()
    },
    onPageChange (page) {
      this.pagination.current = page.current
      this.pagination.size = page.size
      this.fetchData()
    },
    resetForm () {
      this.formData = this.defaultFormData()
      this.editId = ''
    },
    openAdd () {
      this.handleType = 'create'
      this.dialogTitle = this.key('add_monitor_config')
      this.$nextTick(() => {
        this.$refs.dialogForm && this.$refs.dialogForm.reset()
        this.resetForm()
        this.dialogVisible = true
      })
    },
    openEdit (row) {
      this.handleType = 'edit'
      this.dialogTitle = this.key('edit_monitor_config')
      this.editId = row.id
      this.formData = { code: row.code, name: row.name, ip: row.ip, port: row.port, refresh_interval: row.refresh_interval, disk_warning: row.disk_warning, cpu_warning: row.cpu_warning, mem_warning: row.mem_warning, version: row.version }
      this.dialogVisible = true
    },
    async onDialogSubmit () {
      this.submitting = true
      try {
        if (this.handleType === 'create') await createMonitoringConfiguration(this.formData)
        else await editMonitoringConfiguration({ ...this.formData, id: this.editId })
        this.$message.success(this.$t(this.key('operation_success')))
        this.dialogVisible = false
        this.fetchData()
      } finally {
        this.submitting = false
      }
    },
    onDialogClose () {
      this.resetForm()
    },
    async handleDelete (row) {
      const cancelled = await this.$confirmAction({ message: this.key('confirm_operation'), title: this.key('prompt'), confirmButtonText: this.key('confirm'), cancelButtonText: this.key('cancel') }, () => deleteMonitoringConfiguration({ id: [row.id] }))
      if (cancelled) return
      this.$message.success(this.$t(this.key('operation_success')))
      this.pagination.current = Math.min(this.pagination.current, Math.ceil((this.pagination.total - 1) / this.pagination.size) || 1)
      this.fetchData()
    }
  }
}
</script>

<style scoped>
.search-bar {
  padding: 10px 0;
}
/deep/ .el-form-item--mini.el-form-item {
  margin-bottom: 4px;
}
</style>
