<template>
  <div class="login">
    <div class="login-spin">
      <h1>欢迎使用</h1>
      <h4>知学知考-图片导出工具</h4>
    </div>
    <div class="login-body">
      <div class="login-head">
        <div class="login-head-left">
          <h2 class="login-head-title">设置</h2>
          <h4 class="login-head-subtitle">服务器IP地址设置</h4>
        </div>
        <div class="login-head-right"> </div>
      </div>
      <a-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        :label-col-props="{ span: 0, offset: 0 }"
        :wrapper-col-props="{ span: 24, offset: 0 }"
      >
        <a-form-item field="host">
          <div class="box-justify">
            <a-select
              v-model="formData.protocol"
              style="width: 85px; margin-right: 8px; flex-shrink: 0"
            >
              <a-option value="http" label="http"></a-option>
              <a-option value="https" label="https"></a-option>
            </a-select>
            <a-input
              v-model.trim="formData.host"
              placeholder="服务器IP地址"
              clearable
            ></a-input>
          </div>
        </a-form-item>
        <a-form-item>
          <a-button
            type="primary"
            class="login-submit"
            style="margin-top: 126px"
            :disabled="loading"
            @click="submit"
            >确定</a-button
          >
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, onMounted } from 'vue';
  import { useRouter } from 'vue-router';

  import { Message } from '@arco-design/web-vue';
  import type { FormInstance } from '@arco-design/web-vue/es/form';
  import { FormRules } from '@/types/global';
  import { useAppStore } from '@/store';
  import useLoading from '@/hooks/loading';

  defineOptions({
    name: 'Setting',
  });

  interface FormDataType {
    protocol: 'http' | 'https';
    host: string;
  }

  const appStore = useAppStore();
  const router = useRouter();

  const formRef = ref<FormInstance>();
  const formData = reactive<FormDataType>({
    protocol: 'http',
    host: '',
  });

  const rules: FormRules<keyof FormDataType> = {
    host: [
      {
        required: true,
        message: '请输入服务器IP地址',
      },
    ],
  };

  async function initData() {
    const domain = await window.db.getDict('domain');
    if (domain.indexOf('https') !== -1) {
      formData.protocol = 'https';
    } else {
      formData.protocol = 'http';
    }
    formData.host = domain.replace(`${formData.protocol}://`, '');
  }

  // submit
  const { loading, setLoading } = useLoading();
  async function submit() {
    const err = await formRef.value?.validate();
    if (err) return;

    setLoading(true);
    const domain = `${formData.protocol}://${formData.host}`;
    const res = await window.db
      .updateDict({ key: 'domain', val: domain })
      .catch(() => {});
    setLoading(false);

    if (res) {
      Message.success('设置成功！');
      appStore.setInfo({ domain });
      router.go(-1);
    } else {
      Message.error('保存失败！');
    }
  }

  onMounted(() => {
    initData();
  });
</script>
