<template>
  <div class="flex flex-col items-center justify-center py-8 bg-white">
    <div class="form-box">
      <a-form
        :model="formState"
        name="basic"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
        ref="FormRef"
      >
        <a-form-item
          label="AppID"
          name="appId"
          :rules="[{ required: true, message: '请填写AppID!' }]"
        >
          <a-input v-model:value="formState.appId" placeholder="请填写" />
        </a-form-item>
        <a-form-item
          label="账套ID"
          name="dbId"
          :rules="[{ required: true, message: '请填写账套ID!' }]"
        >
          <a-input v-model:value="formState.dbId" placeholder="请填写" />
        </a-form-item>
        <a-form-item
          label="用户"
          name="userName"
          :rules="[{ required: true, message: '请填写授权用户!' }]"
        >
          <a-input v-model:value="formState.userName" placeholder="请填写" />
        </a-form-item>
        <a-form-item label="密码" name="Password">
          <a-input v-model:value="formState.password" type="password" placeholder="请填写" />
        </a-form-item>
        <a-form-item
          label="AppSecret"
          name="appSecret"
          :rules="[{ required: true, message: '请填写AppSecret!' }]"
        >
          <a-input v-model:value="formState.appSecret" placeholder="请填写" />
        </a-form-item>
        <a-form-item
          label="服务Url地址"
          name="url"
          :rules="[{ required: true, message: '服务Url地址' }]"
        >
          <a-input v-model:value="formState.url" placeholder="请填写" />
        </a-form-item>
        <a-form-item :wrapper-col="{ offset: 4, span: 20 }">
          <a-button class="!ml-4" type="primary" @click="handleSubmit">
            {{ t('确认') }}
          </a-button>
        </a-form-item>
      </a-form>
    </div>
    <div class="flex justify-center"></div>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, reactive, ref } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { set, getInfo } from '/@/api/system/erpseting/erpSettings';
  import { ErpType } from '/@/enums/erpEnum';
  import { useMessage } from '/@/hooks/web/useMessage';
  const { notification } = useMessage();
  const FormRef = ref();
  const { t } = useI18n();

  interface FormState {
    appId: string;
    dbId: string;
    userName: string;
    password: string;
    appSecret: string;
    url: string;
  }

  const formState = reactive<FormState>({
    appId: '',
    dbId: '',
    userName: '',
    password: '',
    appSecret: '',
    url: '',
  });
  onMounted(async () => {
    let res = await getInfo(ErpType.SAP);
    if (res && res.configJson) {
      let config = JSON.parse(res.configJson);
      if (config.appId) formState.appId = config.appId;
      if (config.dbId) formState.dbId = config.dbId;
      if (config.userName) formState.userName = config.userName;
      if (config.password) formState.password = config.password;
      if (config.appSecret) formState.appSecret = config.appSecret;
      if (config.url) formState.url = config.url;
    }
  });
  async function handleSubmit() {
    try {
      await FormRef.value.validate();
      await set(ErpType.SAP, formState);
      notification.success({
        message: t('提示'),
        description: t('配置成功'),
      }); //提示消息
    } catch (error) {}
  }
</script>
<style lang="less" scoped>
  .form-box {
    width: 100%;
    padding: 0 20px;
  }
</style>
