<template>
  <div class="add-supplier" style="width:100%;margin-top: 24px">
    <div class="form">
      <el-form style="width: 100%" ref="ruleFormRef" :model="formData" :inline=true label-position="top">
        <el-form-item label="供货商名称" style="width: 100%;margin-right: 0">
          <el-input style="width: 100%" v-model="formData.name" placeholder="请输入供货商名称"></el-input>
        </el-form-item>
        <el-row style="width: 100%">
          <el-col :span="12">
            <el-form-item label="启用状态">
              <el-radio-group v-model="formData.turn" size="large">
                <el-radio-button label="禁用" :value="0"/>
                <el-radio-button label="启用" :value="1"/>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="许可证号" style="margin-right: 0">
              <el-input v-model="formData.licenseCode" placeholder="请输入许可证号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="width: 100%">
          <el-col :span="12">
            <el-form-item label="联系人">
              <el-input v-model="formData.contactName" placeholder="请输入联系人名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系方式" style="margin-right: 0">
              <el-input v-model="formData.contactTel" placeholder="请输入联系方式"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注" style="margin-right: 0;width: 100%">
          <el-input v-model="formData.reamark"
                    type="textarea" rows="5"
                    max="200"
                    show-word-limit
                    placeholder="请输入备注"
                    style="width: 100%"
          >
          </el-input>
        </el-form-item>
      </el-form>
    </div>
  </div>
  <div class="btn">
    <el-button type="primary" @click="save">确定</el-button>
    <el-button @click="close">取消</el-button>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {post} from "@/utils/request.ts";
import CloseBtn from "@/components/CloseBtn.vue";

const formData = ref({
  name: null,
  turn: 1,
  contactName: null,
  contactTel: null,
  reamark: null,
  licenseCode: null,
})
const errorMsg = ref('')
const emit = defineEmits(['close', 'saveSuccess'])

const save = () => {
  if (formData.value.name === '' || formData.value.name === null) {
    errorMsg.value = '供货商名称不能为空'
    return
  }
  post("inventory/supplier/save", {inventorySupplier: formData.value}).then((res: any) => {
    emit('saveSuccess')
    close()
  })
}

const edit = (supplierData: any) => {
  formData.value = supplierData
}
defineExpose({edit})

const close = () => {
  formData.value = {
    name: null,
    turn: 1,
    contactName: null,
    contactTel: null,
    reamark: null,
    licenseCode: null,
  }
  errorMsg.value = ''
  emit('close')
}
</script>

<style scoped lang="scss">
.btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
}
</style>
