<script setup lang="tsx">
import { reactive, ref } from "vue";
import type { FormInstance } from "element-plus";
import { useServerStoreHook } from "@/store/modules/server";
import { serverFormRules } from "@/views/server/utils/rules";
import { useGlobalSettingStoreHook } from "@/store/modules/globalSetting";
import { getPublicIP } from "@/api/server";

defineOptions({
  // name 作为一种规范最好必须写上并且和路由的name保持一致
  name: "Server"
});

const serverFormRef = ref<FormInstance>();

let serverForm = reactive({
  id: "",
  ipScope: "",
  listenPort: 0,
  privateKey: "",
  publicKey: "",
  postUpScript: "",
  preDownScript: "",
  postDownScript: ""
});

const configFormRef = ref<FormInstance>();
let configForm = reactive({
  endpointAddress: "",
  dnsServer: [],
  MTU: 0,
  persistentKeepalive: 0,
  firewallMark: "",
  table: "",
  configFilePath: ""
});

// 获取服务端信息接口
const getServerApi = () => {
  useServerStoreHook()
    .getServerApi()
    .then(res => {
      if (res.code === 200) {
        const data = useServerStoreHook().getServerInfo;
        serverForm.id = data.id || "";
        serverForm.ipScope = data.ipScope || "";
        serverForm.listenPort = data.listenPort || 0;
        serverForm.privateKey = data.privateKey || "";
        serverForm.publicKey = data.publicKey || "";
        serverForm.postUpScript = data.postUpScript || "";
        serverForm.preDownScript = data.preDownScript || "";
        serverForm.postDownScript = data.postDownScript || "";
      }
    });
};

// 更新服务端信息
const updateServerApi = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid, fields) => {
    if (!valid) return fields;
    useServerStoreHook()
      .updateServerApi(serverForm)
      .then(res => {
        if (res.code === 200) {
          getServerApi();
        }
      });
  });
};

// 获取全局配置
const getGlobalSettingApi = () => {
  useGlobalSettingStoreHook()
    .getGlobalSettingApi()
    .then(res => {
      if (res.code === 200) {
        const data = useGlobalSettingStoreHook().getGlobalSetting;
        configForm.endpointAddress = data.endpointAddress || "";
        configForm.dnsServer = data.dnsServer || [];
        configForm.MTU = data.MTU || 0;
        configForm.persistentKeepalive = data.persistentKeepalive || 0;
        configForm.firewallMark = data.firewallMark || "";
        configForm.table = data.table || "";
        configForm.configFilePath = data.configFilePath || "";
      }
    });
};

// 更新全局配置
const updateGlobalSettingApi = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid, fields) => {
    if (!valid) return fields;
    useGlobalSettingStoreHook()
      .updateGlobalSettingApi(configForm)
      .then(res => {
        if (res.code === 200) {
          getGlobalSettingApi();
        }
      });
  });
};

// 获取当前主机的公网IP
const getPublicIPApi = () => {
  getPublicIP().then(res => {
    if (res.code === 200) {
      useGlobalSettingStoreHook().SET_ENDPOINT_ADDRESS(res.data.IP);
      configForm.endpointAddress =
        useGlobalSettingStoreHook().getEndpointAddress;
    }
  });
};

getServerApi();
getGlobalSettingApi();
</script>

<template>
  <el-row :gutter="10">
    <el-col :span="10" style="padding-left: 50px">
      <el-card class="left-card" style="max-width: 800px">
        <template #header>
          <div class="card-header">
            <span>服务端信息</span>
          </div>
        </template>
        <div class="server-form">
          <el-form
            ref="serverFormRef"
            :model="serverForm"
            :rules="serverFormRules"
            label-position="top"
          >
            <el-form-item prop="ipScope" label="子网IP段">
              <el-input v-model="serverForm.ipScope" />
            </el-form-item>
            <el-form-item prop="listenPort" label="监听端口">
              <el-input-number
                v-model="serverForm.listenPort"
                :min="49152"
                :max="65535"
              />
            </el-form-item>
            <el-form-item prop="privateKey" label="私钥">
              <el-input v-model="serverForm.privateKey" />
            </el-form-item>
            <el-form-item prop="publicKey" label="公钥">
              <el-input v-model="serverForm.publicKey" />
            </el-form-item>
            <el-form-item prop="postUpScript" label="postUpScript">
              <el-input v-model="serverForm.postUpScript" />
            </el-form-item>
            <el-form-item prop="postDownScript" label="postDownScript">
              <el-input v-model="serverForm.preDownScript" />
            </el-form-item>
            <el-form-item prop="postDownScript" label="postDownScript">
              <el-input v-model="serverForm.postDownScript" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="updateServerApi(serverFormRef)"
                >确认</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </el-col>
    <el-col :span="10" style="padding-left: 50px">
      <el-card style="max-width: 800px">
        <template #header>
          <div class="card-header">
            <span>全局配置信息</span>
          </div>
        </template>
        <el-form ref="configFormRef" :model="configForm" label-position="top">
          <el-form-item prop="endpointAddress" label="endpointAddress">
            <el-input v-model="configForm.endpointAddress" />
            <el-button
              size="small"
              type="warning"
              class="getIp"
              @click="getPublicIPApi"
              >获取IP</el-button
            >
          </el-form-item>
          <el-form-item prop="dnsServer" label="dnsServer">
            <el-select
              v-model="configForm.dnsServer"
              :clearable="true"
              :reserve-keyword="false"
              suffix-icon=""
              tag-type="success"
              popper-class="options-class"
              placeholder=""
              multiple
              filterable
              allow-create
              default-first-option
            />
          </el-form-item>
          <el-form-item prop="MTU" label="MTU">
            <el-input v-model="configForm.MTU" />
          </el-form-item>
          <el-form-item prop="persistentKeepalive" label="persistentKeepalive">
            <el-input v-model="configForm.persistentKeepalive" />
          </el-form-item>
          <el-form-item prop="firewallMark" label="firewallMark">
            <el-input v-model="configForm.firewallMark" />
          </el-form-item>
          <el-form-item prop="table" label="table">
            <el-input v-model="configForm.table" />
          </el-form-item>
          <el-form-item prop="configFilePath" label="configFilePath">
            <el-input v-model="configForm.configFilePath" />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="updateGlobalSettingApi(configFormRef)"
              >确认</el-button
            >
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>
  </el-row>
</template>
<style lang="scss">
.options-class {
  display: none;
}
</style>
<style scoped lang="scss">
.el-row {
  margin-bottom: 30px;
  margin-left: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  min-height: 36px;
  border-radius: 4px;
}

.options-class {
  display: none;
}

.getIp {
  margin-top: 5px;
}
</style>
