<template>
  <div class="px-4">
    <a-form :model="formState" name="basic" layout="vertical" autocomplete="off" ref="FormRef">
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item
            label="AgentID"
            name="agentId"
            :rules="[{ required: true, message: '请填写AgentID!' }]"
          >
            <a-input v-model:value="formState.agentId" placeholder="请填写" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            label="AppKey"
            name="appKey"
            :rules="[{ required: true, message: '请填写AppKey!' }]"
          >
            <a-input v-model:value="formState.appKey" placeholder="请填写" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            label="AppSecret"
            name="appSecret"
            :rules="[{ required: true, message: '请填写AppSecret!' }]"
          >
            <a-input v-model:value="formState.appSecret" placeholder="请填写" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            label="RedirectUri"
            name="redirectUri"
            :rules="[{ required: true, message: '请填写RedirectUri!' }]"
          >
            <a-input v-model:value="formState.redirectUri" placeholder="请填写" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            label="frontUrl"
            name="frontUrl"
            :rules="[{ required: true, message: '请填写frontUrl!' }]"
          >
            <a-input v-model:value="formState.frontUrl" placeholder="请填写" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item>
            <div class="flex justify-center mt-8">
              <a-button type="primary" @click="handleSubmit" class="w-25 !rounded">
                {{ t('确认') }}</a-button
              >
            </div>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, reactive, ref } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { set, getInfo } from '/@/api/system/generator/accountSettings';
  import { MessageType } from '/@/enums/messageTemplate';
  import { useMessage } from '/@/hooks/web/useMessage';
  const { notification } = useMessage();
  const FormRef = ref();
  const { t } = useI18n();

  interface FormState {
    agentId: string;
    appKey: string;
    appSecret: string;
    redirectUri: string;
    frontUrl: string;
  }

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