<template>
  <div class="flexCard">
    <el-card class="form-container" shadow="never" >
      <el-form ref="resetFormData" :model="form" label-width="auto" style="width: 750px" size="large">
      </el-form>
      <el-form :model="form" label-width="auto" style="max-width: 600px" size="large">
        <el-form-item label="优惠券名称">
          <el-input v-model="form.name" style="width: 200px"/>
        </el-form-item>
        <el-form-item label="兑换积分" prop="price">
          <el-input-number v-model="form.requirePoints" min="0"  :step="1" />
          <el-text class="mx-1" size="large">积分</el-text>
        </el-form-item>
        <el-form-item label="满减价格" prop="standardAmount">
          <el-input-number v-model="form.standardAmount" min="0.01" :precision="2" :step="1" />
          <el-text class="mx-1" size="large">元</el-text>
        </el-form-item>
        <el-form-item label="优惠价格" prop="conditionAmount">
          <el-input-number v-model="form.conditionAmount" min="0.01" :precision="2" :step="1" />
          <el-text class="mx-1" size="large">元</el-text>
        </el-form-item>
        <el-form-item label="截至日期">
          <el-date-picker
              v-model="form.endTime"
              type="datetime"
              placeholder="Pick a Date"
              format="YYYY-MM-DD hh:mm:ss"
              value-format="YYYY-MM-DD hh:mm:ss"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="AddCoupon" style="margin-left: 160px">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref,onMounted} from 'vue'
import {ElMessage} from "element-plus";
import myAxios from "@/api/myAxios";


const form = ref({
  name: '',
  standardAmount:0,//满
  conditionAmount:0,//减
  requirePoints:0,
  endTime: ''
})
onMounted(() => {

})
const AddCoupon = async () => {
  const values = Object.values(form.value);
  if (values.some(value => value === null || value === undefined || value === '')) {
    ElMessage({
      type: 'warning',
      message: '请检查表单数据是否完整填写'
    });
    return;
  }
  const res = await myAxios.post('/coupon/add  ', {...form.value });
  if (res.data.code === 1) {
    ElMessage({
      type: 'success',
      message: "提交成功"
    });
  } else {
    ElMessage.error("服务错误");
  }
}

</script>


<style scoped>
.flexCard {
  display: flex;
  height: 100%;
  min-width: 800px;
  margin: 0 auto;
}
.form-container {
  width: 700px;
  margin: 0 auto;
}
</style>