<template>
  <Mask :width="540" :height="603" :is-show="isShow"  @close="close" :title="id?'编辑':'添加供应商'" :show-footer="true">
    <div class="add-supplier" style="width:100%;margin-top: 24px;padding: 0 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>
    <template #footer>
      <div class="bottom">
        <span class="small-btn" @click="close">取消</span>
        <span class="small-btn" @click="save">确定</span>
      </div>
    </template>
  </Mask>
</template>

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

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

const save = () => {
  if (formData.value.name === '' || formData.value.name === null) {
    errorMsg.value = '供货商名称不能为空'
    return
  }
  post("inventory/supplier/save", {inventorySupplier: formData.value}).then((res: any) => {
    close()
  })
}
const id = ref<any>(null)
const editInit = (supplierData: any) => {
  isShow.value = true
  id.value = supplierData.id
  formData.value = supplierData
}
const addInit = () => {
  isShow.value = true
}
defineExpose({addInit, editInit})

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

<style scoped lang="scss">
.bottom {
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 24px;

}
</style>
