<template>
  <el-dialog title="客户简称表单" v-model="visible" width="400px" append-to-body draggable>
    <div class="form-container">
      <el-form ref="carrierCategoryRef" v-loading="loading" class="master-container" :model="form" :rules="rules"
        label-width="80px">
        <el-form-item label="客户简称" prop="name">
          <el-input v-model.trim="form.name" maxlength="20"
          show-word-limit placeholder="客户简称" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <el-button type="primary" icon="Check" @click="handleSave">确 定</el-button>
      <el-button icon="Close" @click="handleCancel">取 消</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
const { proxy } = getCurrentInstance();
const emit = defineEmits(["inputSuccess"]);

const visible = ref(false);
const data = reactive({
  form: {},
  rules: {
    name: [{ required: true, message: "客户简称不能为空", trigger: "blur" }],
  },
});
const { form, rules } = toRefs(data);

/***********************  方法区  ****************************/
/** 打开抽屉 */
function open(data) {
  reset();
  visible.value = true;
 form.value.name = data
}

/** 取消按钮 */
function handleCancel() {
  visible.value = false;
  reset();
}

/** 表单重置 */
function reset() {
  form.value = {
    name: "",
  };
  proxy.resetForm("companyRef");
}

/** 提交按钮 */
function handleSave() {
  proxy.$refs["carrierCategoryRef"].validate((valid) => {
    if (valid) {
       emit("inputSuccess",form.value.name);
        visible.value = false;
    }
  })
 
}


/** 暴露给父组件的方法 */
defineExpose({
  open,
});
</script>
