<script setup lang="ts">
import { ref } from "vue"
import { BusinessQuery } from "/@/components/BasicForm"
import { ElForm } from "element-plus"
import { useVModel } from "@vueuse/core"
import { useTask } from "/@/hooks/core"

import { httpCreate } from "/@/api/serviceParam/purchaseSetting";


const props = defineProps<{ visible: boolean }>()
const emit = defineEmits(['refresh'])

const visible = useVModel(props, 'visible')

const rules = {
  companyNo: [{  required: true, message: '请选择业务公司', trigger: 'blur' }]
}

const businessTask = useTask({ success(){
  visible.value = false
  formData.value.companyNo = ''
  emit('refresh')
} })

const formRef = ref<InstanceType<typeof ElForm> | null>(null)
const formData = ref({ companyNo: '' })


async function onSubmit(){
  try{ 
    await formRef.value?.validate()
    businessTask.run(httpCreate(formData.value))
  }catch(err){
    console.log(err)
  }
}
</script>

<template>
  <ElDialog v-model="visible" center title="添加业务公司" @close="formData.companyNo = ''">
    <ElForm :model="formData" :rules="rules" ref="formRef">
      <ElFormItem label="业务公司" prop="companyNo">
        <BusinessQuery 
          v-model="formData.companyNo" 
          placeholder="业务公司" 
        />
      </ElFormItem>

      <div class="w-full flex justify-end">
        <ElButton 
          type="primary" 
          :loading="businessTask.loading"
           @click="onSubmit"
         >保存</ElButton>
      </div>
    </ElForm>
  </ElDialog>
</template>
