<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="uploadMethod">
        <a-radio-group v-model:value="form.uploadMethod">
          <a-radio-button value="file">本地</a-radio-button>
          <a-radio-button value="oss">阿里云 OSS</a-radio-button>
          <a-radio-button value="cos">腾讯云 COS</a-radio-button>
          <a-radio-button value="kodo">七牛云 Kodo</a-radio-button>
        </a-radio-group>
      </a-form-item>

      <template v-if="form.uploadMethod === 'file'">
        <a-form-item label="文件域名" name="fileUrl">
          <a-input
            v-model:value="form.fileUrl"
            placeholder="请输入文件服务器域名，如 https://file.example.com"
            allow-clear
            :maxlength="200"
          />
        </a-form-item>
      </template>

      <template v-if="form.uploadMethod === 'oss'">
        <a-form-item label="存储空间名称" name="bucketName">
          <a-input v-model:value="form.bucketName" placeholder="Bucket Name" allow-clear :maxlength="100" />
        </a-form-item>
        <a-form-item label="Region 域名" name="bucketEndpoint">
          <a-input
            v-model:value="form.bucketEndpoint"
            placeholder="如 https://oss-cn-shenzhen.aliyuncs.com"
            allow-clear
            :maxlength="200"
          />
        </a-form-item>
        <a-form-item label="AccessKeyId" name="accessKeyId">
          <a-input v-model:value="form.accessKeyId" placeholder="AccessKeyId" allow-clear :maxlength="100" />
        </a-form-item>
        <a-form-item label="AccessKeySecret" name="accessKeySecret">
          <a-input-password
            v-model:value="form.accessKeySecret"
            placeholder="AccessKeySecret"
            allow-clear
            :maxlength="200"
          />
        </a-form-item>
        <a-form-item label="空间域名" name="bucketDomain">
          <a-input
            v-model:value="form.bucketDomain"
            placeholder="如 https://your-bucket.oss-cn-shenzhen.aliyuncs.com"
            allow-clear
            :maxlength="200"
          />
        </a-form-item>
        <a-form-item label="申请地址">
          <a href="https://oss.console.aliyun.com" target="_blank">https://oss.console.aliyun.com</a>
        </a-form-item>
      </template>

      <template v-if="form.uploadMethod === 'cos'">
        <a-form-item label="存储空间名称" name="bucketName">
          <a-input v-model:value="form.bucketName" placeholder="Bucket Name" allow-clear :maxlength="100" />
        </a-form-item>
        <a-form-item label="Region" name="bucketEndpoint">
          <a-input
            v-model:value="form.bucketEndpoint"
            placeholder="如 ap-guangzhou"
            allow-clear
            :maxlength="100"
          />
        </a-form-item>
        <a-form-item label="SecretId" name="accessKeyId">
          <a-input v-model:value="form.accessKeyId" placeholder="SecretId" allow-clear :maxlength="100" />
        </a-form-item>
        <a-form-item label="SecretKey" name="accessKeySecret">
          <a-input-password
            v-model:value="form.accessKeySecret"
            placeholder="SecretKey"
            allow-clear
            :maxlength="200"
          />
        </a-form-item>
        <a-form-item label="空间域名" name="bucketDomain">
          <a-input
            v-model:value="form.bucketDomain"
            placeholder="如 https://your-bucket.cos.ap-guangzhou.myqcloud.com"
            allow-clear
            :maxlength="200"
          />
        </a-form-item>
        <a-form-item label="申请地址">
          <a href="https://console.cloud.tencent.com/cos" target="_blank">
            https://console.cloud.tencent.com/cos
          </a>
        </a-form-item>
      </template>

      <template v-if="form.uploadMethod === 'kodo'">
        <a-form-item label="存储空间名称" name="bucketName">
          <a-input v-model:value="form.bucketName" placeholder="Bucket Name" allow-clear :maxlength="100" />
        </a-form-item>
        <a-form-item label="AccessKey" name="accessKeyId">
          <a-input v-model:value="form.accessKeyId" placeholder="AccessKey" allow-clear :maxlength="100" />
        </a-form-item>
        <a-form-item label="SecretKey" name="accessKeySecret">
          <a-input-password
            v-model:value="form.accessKeySecret"
            placeholder="SecretKey"
            allow-clear
            :maxlength="200"
          />
        </a-form-item>
        <a-form-item label="空间域名" name="bucketDomain">
          <a-input
            v-model:value="form.bucketDomain"
            placeholder="如 https://your-bucket.qiniudn.com"
            allow-clear
            :maxlength="200"
          />
        </a-form-item>
        <a-form-item label="申请地址">
          <a href="https://www.qiniu.com/products/kodo" target="_blank">
            https://www.qiniu.com/products/kodo
          </a>
        </a-form-item>
      </template>

      <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 = 'upload';

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

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

const { form, assignFields } = useFormData<ShopSetting>({
  uploadMethod: 'oss',
  fileUrl: '',
  bucketName: '',
  bucketEndpoint: '',
  accessKeyId: '',
  accessKeySecret: '',
  bucketDomain: ''
});

const rules = reactive({
  uploadMethod: [
    {
      required: true,
      message: '请选择上传方式',
      type: 'string',
      trigger: 'change'
    }
  ]
});

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);
    }
  } 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>
