<template>
  <NuxtLayout>
    <div class='content'>
      <div class='container'>
        <form class='form' @submit.prevent>
          <div class='form-group'>
            <div class='form-group__label'>
              <label for="none">
                <span>租户</span>
                <button class='primary' @click='handleSaveConfig("tenants")'>保存</button>
              </label>
              <p>租户 的配置信息</p>
            </div>
            <div class='form-group__body'>
              <div class='form-group__item'><span>租户ID</span><span><input v-model='form.tenants.id' /></span></div>
              <div class='form-group__item'><span>租户HOST</span><span><input v-model='form.tenants.host' /></span></div>
              <div class='form-group__item'><span>租户数据库Schema</span><span><input v-model='form.tenants["database-schema"]' /></span></div>
              <div class='form-group__item'><span>租户主要Schema</span><span><input v-model='form.tenants["primary-schema"]' /></span></div>
            </div>
          </div>


          <div class='form-group'>
            <div class='form-group__label'>
              <label for="none">
                <span>调试</span>
                <button class='primary' @click='handleSaveConfig("debug")'>保存</button>
              </label>
              <p>调试 的配置信息</p>
            </div>
            <div class='form-group__body'>
              <div class='form-group__item'><span>远程调试机 HOST</span><span><input v-model='form.debug.host' /></span></div>
            </div>
          </div>

          <div class="form-group">
            <div class="form-group__label">
              <label for="none">
                <span>其他配置</span>
                <div>
                  <button type="button" style="margin-right: 10px;" @click.stop="handleAddCustomConfig">新增</button>
                  <button type="button" class="primary" @click="handleSaveConfig('serverProperties')">保存</button>
                </div>
              </label>
            </div>
            <div class="form-group__body">
              <table class="table">
                <thead>
                  <tr>
                    <td>配置名称</td>
                    <td>配置值</td>
                    <td>操作列</td>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="item in form.serverProperties" :key="item.id">
                    <td><input type="text" v-model="item.key"></td>
                    <td><input type="text" v-model="item.value"></td>
                    <td><button @click="handleDeleteServerProperty(item)">删除</button></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </form>
      </div>
    </div>
  </NuxtLayout>
</template>

<script lang="ts" setup>

const form = ref<Record<string, any>>({
  postgres: {
    visible: false,
    username: '',
    password: '',
    ip: '',
    port: '',
    database: '',
    schema: ''
  },
  redis: {
    visible: false,
    ip: '',
    port: ''
  },
  zookeeper: {
    visible: false,
    ip: '',
    port: ''
  },
  rocketmq: {
    visible: false,
    ip: '',
    port: ''
  },
  tenants: {
    visible: false,
    id: '',
    host: '',
    'database-schema': '',
    'primary-namespace': ''
  },
  debug: {
    host: ''
  },
  serverProperties: []
})

onMounted(() => {
  getData()
})

function getData () {
  $fetch('/api/devops/v2/getProjectInfo').then((res: any) => {
    Object.keys(form.value).forEach(key => {
      if (res[key]) {
        form.value[key] = res[key]
      }
    })
  })
}
function handleSaveConfig (key: string) {
  const value = JSON.stringify(form.value[key])
  $fetch('/api/user/setUserSetting', { method: 'post', body: { table: 'v2', key, value } }).then(() => {
    alert('保存成功')
  }).catch(() => {
    alert('保存失败!!!')
  })
}
function handleEditConfig (key: string) {
  form.value[key].visible = true
}
function handleAddCustomConfig () {
    form.value.serverProperties.push({
      id: Math.random(),
      key: '',
      value: ''
    })
  }
function handleDeleteServerProperty (item: any) {
  const index = form.value.serverProperties.indexOf(item)
  form.value.serverProperties.splice(index, 1)
}
</script>

<style scoped>
.content{
  background-color: #EFEFEF;
  overflow: auto;
  height: 100%;
  padding: 24px;
  box-sizing: border-box;
}
.table{
  width: 100%;
}
.table thead tr td:nth-of-type(3) {
  width: 100px;
}
.table input {
  width: 100%;
  box-sizing: border-box;
}
</style>