<template>
  <a-card :bordered="false">
    <a-form
      ref="formRef"
      :model="form"
      :rules="rules"
      :label-col="styleResponsive ? { md: 3, sm: 5, xs: 24 } : { flex: '90px' }"
      :wrapper-col="styleResponsive ? { md: 9, sm: 19, xs: 24 } : { flex: '1' }"
    >
      <a-form-item label="余额支付" name="payBalanceEnabled">
        <a-switch
          v-model:checked="form.payBalanceEnabled"
          checked-children="开"
          un-checked-children="关"
        />
      </a-form-item>
      <a-form-item label="微信支付" name="payWechatEnabled">
        <a-switch
          v-model:checked="form.payWechatEnabled"
          checked-children="开"
          un-checked-children="关"
        />
      </a-form-item>
      <a-form-item label="微信AppID" name="payWechatAppId">
        <a-input
          allow-clear
          :maxlength="50"
          placeholder="请输入微信AppID"
          v-model:value="form.payWechatAppId"
        />
      </a-form-item>
      <a-form-item label="微信商户号" name="payWechatMchId">
        <a-input
          allow-clear
          :maxlength="50"
          placeholder="请输入微信商户号"
          v-model:value="form.payWechatMchId"
        />
      </a-form-item>
      <a-form-item label="微信支付APIv3密钥" name="payWechatApiKey">
        <a-input-password
          allow-clear
          :maxlength="200"
          placeholder="请输入微信支付APIv3密钥"
          v-model:value="form.payWechatApiKey"
        />
      </a-form-item>
      <div style="margin-bottom: 22px; width: 750px">
        <a-divider>支付宝支付</a-divider>
      </div>
      <a-form-item label="支付宝支付" name="payAlipayEnabled">
        <a-switch
          v-model:checked="form.payAlipayEnabled"
          checked-children="开"
          un-checked-children="关"
        />
      </a-form-item>
      <a-form-item label="支付宝AppID" name="payAlipayAppId">
        <a-input
          allow-clear
          :maxlength="50"
          placeholder="请输入支付宝AppID"
          v-model:value="form.payAlipayAppId"
        />
      </a-form-item>
      <a-form-item label="商户私钥" name="payAlipayPrivateKey">
        <a-textarea
          :rows="4"
          placeholder="请输入商户私钥"
          v-model:value="form.payAlipayPrivateKey"
        />
      </a-form-item>
      <a-form-item label="支付宝公钥" name="payAlipayPublicKey">
        <a-textarea
          :rows="4"
          placeholder="请输入支付宝公钥"
          v-model:value="form.payAlipayPublicKey"
        />
      </a-form-item>
      <a-form-item label="保存">
        <a-button type="primary" :loading="loading" @click="save">保存</a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import { useThemeStore } from '@/store/modules/theme';
import { storeToRefs } from 'pinia';
import { FormInstance } from 'ant-design-vue/es/form';
import useFormData from '@/utils/use-form-data';
import { batchSaveShopSetting, getShopSettingCategoryValues } from '@/api/shop/shopSetting';
import type { ShopSetting } from '@/api/shop/shopSetting/model';

const category = 'payment';

const themeStore = useThemeStore();
const { styleResponsive } = storeToRefs(themeStore);

const loading = ref(false);
const formRef = ref<FormInstance | null>(null);

const { form, assignFields } = useFormData<ShopSetting>({
  payBalanceEnabled: false,
  payWechatEnabled: false,
  payWechatAppId: '',
  payWechatMchId: '',
  payWechatApiKey: '',
  payAlipayEnabled: false,
  payAlipayAppId: '',
  payAlipayPrivateKey: '',
  payAlipayPublicKey: ''
});

const rules = reactive({});

const toBool = (val: any): boolean =>
  val === true || val === 'true' || val === '1' || val === 1;

const load = async () => {
  try {
    const values = await getShopSettingCategoryValues(category);
    if (values && Object.keys(values).length > 0) {
      assignFields(values);
      // 布尔值转换
      form.payBalanceEnabled = toBool((values as any).payBalanceEnabled);
      form.payWechatEnabled = toBool((values as any).payWechatEnabled);
      form.payAlipayEnabled = toBool((values as any).payAlipayEnabled);
    }
  } catch (e: any) {
    // 未配置时忽略
  }
};

const save = () => {
  if (!formRef.value) return;
  formRef.value
    .validate()
    .then(() => {
      loading.value = true;
      batchSaveShopSetting(category, form as Record<string, unknown>)
        .then(() => {
          message.success('保存成功');
        })
        .catch((e) => {
          message.error(e.message);
        })
        .finally(() => {
          loading.value = false;
        });
    })
    .catch(() => {});
};

onMounted(load);
</script>
