<template>
  <div class="page">
      <a-form layout="vertical" ref="postFormRef" :model="postForm" :rules="postFormRules">
        <div class="p-50">
          <a-form-item class="mr-100" label="xx" name="otherImage">
            <!-- <UploadFile v-model:url="postForm.otherImage" fileType="image"></UploadFile> -->
          </a-form-item>
        </div>
      </a-form>
      <div class="btn-footer">
        <!-- <a-button @click="submit">取消</a-button> -->
        <a-button class="ml-50" @click="submit">提交</a-button>
      </div>
      <br>
      <hr>
      <br>
      {{ postForm }}
      <br>
      <hr>
      <br>
  </div>
</template>

<script setup lang="ts">
import type { UnwrapRef } from 'vue'
import type { Rule } from 'ant-design-vue/es/form'
import type { ProductItem, BrandItem, QuoteItem } from 'Types/api'
import { apiProductAdd, apiProductDetail, apiProductEdit } from '@/api/product'
import { apiBrandList } from '@/api/brand'
import { DICT_CODE } from '@/utils/const'
import { isPage, deepClone, mergeObj } from '@/utils'
import useCommonStore from '@/store/modules/common'
import useUserStore from '@/store/modules/user'
import { message, notification, Modal } from 'ant-design-vue'
const commonStore = useCommonStore()
const userStore = useUserStore()

const validateStr = async (_rule: Rule, value: string) => {
  if (value === '') {
    return Promise.reject('请输入')
  }
  return Promise.resolve()
}
const postForm = ref({})

postForm.value = {
  // otherImage: 'https://bucket-baijie.oss-rg-china-mainland.aliyuncs.com/baijie/1697166110392_1722251277248.jpg',
  otherImage: 'xxxx',

}
const postFormRules: Record<string, Rule[]> = {
  otherImage: [{ validator: validateStr}],
}

watch(postForm, (newValue) => {
  console.log('postForm', postForm.value)
}, {deep: true})
const postFormRef = ref()
const submit = () => {
  postFormRef.value.validate().then(async () => {
    const params = deepClone(postForm.value)
    console.log('---- postForm ----', params)
  })
}


</script>
<style scoped lang="less">

</style>

