<template>
  <div class="common-dialog">
    <div class="common-dialog-content">
      <div class="common-dialog-title-box">
        <h3 class="common-dialog-title">新增商品</h3>
      </div>
      <div class="common-dialog-box">
        <el-form ref="form" :model="formData" :rules="rules" label-width="auto" class="common-form">
          <el-form-item label="商品名称：" prop="name">
            <el-input v-model="formData.name" placeholder="请输入商品名称" type="textarea" autosize />
          </el-form-item>
          <div class="common-form-row">
            <el-form-item label="定价：" prop="fixedPrice">
              <el-input v-model="formData.fixedPrice" placeholder="请输入定价" type="number" />
            </el-form-item>
            <el-form-item label="售价：" prop="price">
              <el-input v-model="formData.price" placeholder="请输入售价" type="number" />
            </el-form-item>
          </div>
        </el-form>
        <div class="common-dialog-footer">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="CommodityManageForm">
const props = defineProps({
  id: {
    type: String,
    required: true
  }
})
const proxy = getCurrentInstance();
const emits = defineEmits(['onCancel', 'onConfirm']);
const formData = ref({
  name: '',
  fixedPrice: '',
  price: ''
});
const rules = reactive({
  name: [{ required: true, message: '商品名称不能为空', trigger: 'blur' }],
  fixedPrice: [{ required: true, message: '定价不能为空', trigger: 'blur' }],
  price: [{ required: true, message: '售价不能为空', trigger: 'blur' }],
})
// 取消
const handleCancel = () => {
  emits('onCancel');
}

// 提交表单
const submitForm = () => {
  const flag = props.id;
  proxy?.$modal.msgSuccess(flag ? '修改成功' : '新增成功')
  emits('onConfirm');
};
</script>

<style lang="scss" scoped>

</style>
