<template>
  <AppPage :show-footer="showFooter">
    <header v-if="showHeader" mt-10 mb-20 min-h-45 flex items-center justify-between px-15>
      <slot v-if="$slots.header" name="header" />
      <template v-else>
        <n-card style="margin-left: 1.65%; width: 97.25%">
          <n-space justify="end">
            <n-button size="small" style="float: right" type="info" @click="addClient">添加</n-button>
            <n-button size="small" style="float: right" type="primary" @click="refreshList">刷新</n-button>
          </n-space>
        </n-card>
        <slot name="action" />
      </template>
    </header>

    <div>
      <slot />
    </div>
  </AppPage>
  <n-modal
    class="client-list-header-modal"
    style="width: min(760px, calc(100vw - 48px))"
    v-model:show="addModalShow"
    preset="card"
    title="添加"
    header-style="text-align: center"
  >
    <n-form
      ref="addModalFormRef"
      class="client-list-header-form"
      :rules="addModalFormRules"
      :model="addModalForm"
      label-placement="top"
      require-mark-placement="right"
    >
      <n-form-item label="名称" path="name">
        <n-input v-model:value="addModalForm.name"/>
      </n-form-item>
      <n-form-item label="邮箱" path="email">
        <n-input v-model:value="addModalForm.email"/>
      </n-form-item>
      <n-form-item class="client-list-header-form__full" label="IP" path="addModalForm.ipAllocation">
        <n-select
          v-model:value="addModalForm.ipAllocation"
          filterable
          multiple
          tag
          placeholder="输入，按回车确认"
          :show-arrow="false"
          :show="false"
        />
      </n-form-item>
      <n-form-item class="client-list-header-form__full" label="可访问IP" path="allowedIps">
        <n-select
          v-model:value="addModalForm.allowedIps"
          filterable
          multiple
          tag
          placeholder="输入，按回车确认"
          :show-arrow="false"
          :show="false"
        />
      </n-form-item>
      <n-form-item class="client-list-header-form__full" label="可访问IP（扩展）" path="extraAllowedIps">
        <n-select
          v-model:value="addModalForm.extraAllowedIps"
          filterable
          multiple
          tag
          placeholder="输入，按回车确认"
          :show-arrow="false"
          :show="false"
        />
      </n-form-item>
      <n-form-item class="client-list-header-form__full" label="服务端DNS" path="useServerDns">
        <n-radio-group class="client-list-header-form__radio" :value="addModalForm.useServerDns">
          <n-radio :value="1" :checked="addModalForm.useServerDns === 1" @change="addModalForm.useServerDns = 1">是</n-radio>
          <n-radio :value="0" :checked="addModalForm.useServerDns === 0" @change="addModalForm.useServerDns = 0">否</n-radio>
        </n-radio-group>
      </n-form-item>
      <n-form-item class="client-list-header-form__full" label="公钥" path="keys.publicKey">
        <n-input v-model:value="addModalForm.keys.publicKey"></n-input>
      </n-form-item>
      <n-form-item class="client-list-header-form__full" label="私钥" path="keys.privateKey">
        <n-input v-model:value="addModalForm.keys.privateKey"></n-input>
      </n-form-item>
      <n-form-item class="client-list-header-form__full" label="共享密钥" path="keys.presharedKey">
        <n-input v-model:value="addModalForm.keys.presharedKey"></n-input>
      </n-form-item>
      <n-form-item class="client-list-header-form__full">
        <n-button size="small" secondary type="primary" @click="generateKeys">生成密钥对</n-button>
      </n-form-item>
      <n-form-item class="client-list-header-form__full" label="状态" path="editModalForm.enabled">
        <n-radio-group class="client-list-header-form__radio" :value="addModalForm.enabled">
          <n-radio :value="1" :checked="addModalForm.enabled === 1" @change="addModalForm.enabled = 1">启用</n-radio>
          <n-radio :value="0" :checked="addModalForm.enabled === 0" @change="addModalForm.enabled = 0">禁用</n-radio>
        </n-radio-group>
      </n-form-item>
      <n-form-item class="client-list-header-form__full" label="离线监听" path="offlineMonitoring">
        <n-radio-group class="client-list-header-form__radio" :value="addModalForm.offlineMonitoring">
          <n-radio :value="1" :checked="addModalForm.offlineMonitoring === 1" @change="addModalForm.offlineMonitoring = 1">启用</n-radio>
          <n-radio :value="0" :checked="addModalForm.offlineMonitoring === 0" @change="addModalForm.offlineMonitoring = 0">禁用</n-radio>
        </n-radio-group>
      </n-form-item>
      <n-form-item class="client-list-header-form__full client-list-header-form__action">
        <n-button type="primary" @click="confirmAddClient()">确认</n-button>
      </n-form-item>
    </n-form>
  </n-modal>
</template>

<script setup>
import clientApi from '@/views/client/api'
import { NButton } from 'naive-ui'
import { debounce } from '@/utils'
defineProps({
  showFooter: {
    type: Boolean,
    default: false,
  },
  showHeader: {
    type: Boolean,
    default: true,
  },
  title: {
    type: String,
    default: undefined,
  },
})
const route = useRoute()

const addModalShow = ref(false)


// 添加模态框的form ref
const addModalFormRef = ref()

// 添加模态框的form rules
const addModalFormRules = {
  name: [
    { required: true, message: '名称不能为空', trigger: 'blur' }
  ],
  ipAllocation: [
    { required: true, message: '客户端IP不能为空', trigger: 'change' }
  ],
  keys: {
    privateKey: [
      { required: true, message: '密钥不能为空', trigger: 'blur' }
    ],
    publicKey: [
      { required: true, message: '公钥不能为空', trigger: 'blur' }
    ],
    presharedKey: [
      { required: true, message: '共享密钥不能为空', trigger: 'blur' }
    ],
  },
  enabled: [
    { required: true, message: '状态不能为空', trigger: 'change' }
  ]
}

// 添加模态框的数据集
const addModalForm = ref({
  id: '',
  name: '',
  email: '',
  ipAllocation: [],
  allowedIps: [],
  extraAllowedIps: [],
  useServerDns: 0,
  keys: {
    privateKey: '',
    publicKey: '',
    presharedKey: ''
  },
  enabled: 1,
  offlineMonitoring: 1
})

// 点击确认按钮
async function confirmAddClient() {
  addModalFormRef.value.validate(async (valid) => {
    if (valid) {
      return valid
    }

    clientApi.saveClient(addModalForm.value).then((response) => {
      if (response.data.code === 200) {
        refreshList()
        addModalShow.value = false
      }
    })
  })
}

// 添加客户端
const addClient = debounce(() => {
    generateClientIPS()
    addModalShow.value = true
},300)

// 生成密钥对
function generateKeys() {
  clientApi.generateClientKeys().then(res => {
    if (res.data.code === 200) {
      addModalForm.value.keys.privateKey = res.data.data.privateKey
      addModalForm.value.keys.publicKey = res.data.data.publicKey
      addModalForm.value.keys.presharedKey = res.data.data.presharedKey
    }
  })
}

// 生成客户端IP
function generateClientIPS() {
  clientApi.generateClientIP().then(res => {
    if (res.data.code === 200) {
      addModalForm.value.ipAllocation = res.data.data.clientIPS
      addModalForm.value.allowedIps = res.data.data.serverIPS
      generateKeys()
    }
  })
}

// 刷新列表
function refreshList() {
  clientApi.clientList({
    current: 1,
    size: 8
  })
}


</script>

<style scoped lang="scss">
.client-list-header-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
}

.client-list-header-form__full {
  grid-column: 1 / -1;
}

.client-list-header-form__radio {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 12px;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.client-list-header-form__action {
  margin-top: 8px;
}

.client-list-header-form__action :deep(.n-button) {
  min-width: 148px;
  height: 42px;
  border-radius: 12px;
}

.client-list-header-form :deep(.n-form-item-label) {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #64748b;
}

.client-list-header-form :deep(.n-input),
.client-list-header-form :deep(.n-base-selection) {
  width: 100%;
}

.client-list-header-form :deep(.n-input .n-input__input-el),
.client-list-header-form :deep(.n-base-selection .n-base-selection-label) {
  min-height: 42px;
}

:deep(.client-list-header-modal .n-card) {
  width: min(760px, calc(100vw - 48px));
  border-radius: 20px;
  overflow: hidden;
}

:deep(.client-list-header-modal .n-card-header) {
  padding: 22px 24px 12px;
}

:deep(.client-list-header-modal .n-card__content) {
  padding: 12px 24px 24px;
}

@media (max-width: 960px) {
  .client-list-header-form {
    grid-template-columns: 1fr;
  }
}
</style>
