<template>
  <a-card class="general-card" title="商户基本配置">
    <template #extra>
      {{ formData.loginAccount }}
    </template>
    <a-form :model="formData">
      <a-row>
        <a-col :span="8">
          <a-form-item label="商户名称">
            <a-input v-model="formData.merchantName" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-item label="请求IP白名单">
            <a-textarea
              v-model="formData.whiteIps"
              placeholder="可以输入多个IP，以分号（;）分割"
              allow-clear
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="备注">
            <a-textarea
              v-model="formData.remark"
              placeholder="可以输入商户备注"
              allow-clear
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div class="save">
      <a-button type="primary" size="small" @click="save">保存</a-button>
    </div>
  </a-card>
</template>

<script setup lang="ts">
import {
  MerchantConfigDetailRecord,
  queryMerchant,
  updateMerchantInfo
} from '@/api/merchant-list';
import { Message } from '@arco-design/web-vue';
import { ref } from 'vue';

const generateFormData = (): MerchantConfigDetailRecord => {
  return {
    loginAccount: '',
    merchantName: '',
    merchantUid: '',
    whiteIps: '',
    remark: ''
  };
};

const formData = ref<MerchantConfigDetailRecord>(generateFormData());

const fetchData = async (uid: string) => {
  const { data } = await queryMerchant({ merchantUid: uid });
  formData.value = data;
};

const save = async () => {
  await updateMerchantInfo(formData.value);
  Message.success({
    content: '保存成功',
    duration: 5 * 1000
  });
};

defineExpose({ fetchData });
</script>

<style scoped lang="less">
.save {
  // 靠右对齐
  display: flex;
  justify-content: flex-end;
}
</style>
