<script setup>
import { ref, reactive, watch, computed } from "vue";

import { addBonus, getBonus, updateBonus } from "@/api/bonus";

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  edit_id: {
    type: Number,
    default: 0,
  },
});

const emit = defineEmits(["update:show", "update:edit_id", "reload"]);

const showDrawer = computed({
  get: () => props.show,
  set: (value) => {
    emit("update:show", value);
  },
});

const formRef = ref();

const rules = reactive({
  type_name: [{ required: true, message: "請輸入優惠劵名稱", trigger: "blur" }],
  type_money: [
    { required: true, message: "請輸入優惠劵金額", trigger: "blur" },
  ],
  send_type: [{ required: true, message: "請選擇發放方式", trigger: "change" }],
});

const form = ref({
  act: "insert",
  type_id: 0,
  type_name: "",
  type_money: 0,
  send_type: 4,
  min_amount: 0,
  user_bonus_max: 0,
  send_start_date: '',
  send_end_date: '',
  use_start_date: '',
  use_end_date: '',
});

const loading = ref(false);

watch(
  () => props.edit_id,
  async (newVal) => {
    console.log(newVal);
    if (newVal > 0) {
      let res = await getBonus(newVal);
      if (res.code === 200) {
        form.value = res.data;
        form.value.act = "update";
      }
    } else {
      form.value = {
        act: "insert",
        type_id: 0,
        type_name: "",
        type_money: 0,
        send_type: 4,
        min_amount: 0,
        user_bonus_max: 0,
      };
    }
  }
);

const handleClose = () => {
  emit("update:edit_id", 0);
  showDrawer.value = false;
};

const handleSubmit = async (formEl) => {
  if (!formEl) return;

  await formEl.validate(async (valid, fields) => {
    if (!valid) return;

    let res;
    if (form.value.act === "update") {
      res = await updateBonus(form.value);
    } else {
      res = await addBonus(form.value);
    }

    if (res.code === 200) {
      // 關閉抽屜
      showDrawer.value = false;
      // 重置表單
      formRef.value.resetFields();

      // emit reload event
      emit("reload");

      // 顥示提示訊息
      return ElMessage.success("操作成功");
    }
    // 顯示錯誤提示訊息
    return ElMessage.error(res.msg);
  });
};
</script>

<template>
  <el-drawer
    v-model="showDrawer"
    size="50%"
    title="新增優惠劵"
    @close="handleClose"
  >
    <template #header>
      <h4>新增優惠劵</h4>
    </template>
    <template #default>
      <!-- <div v-loading="loading"> -->
      <el-form :model="form" ref="formRef" :rules="rules" label-width="120px">
        <el-form-item label="優惠劵名稱" prop="type_name">
          <el-input v-model="form.type_name" />
        </el-form-item>
        <el-form-item label="優惠劵金額" prop="type_money">
          <el-input v-model="form.type_money" />
        </el-form-item>
        <el-form-item label="最小訂單金額">
          <el-input v-model="form.min_amount" />
        </el-form-item>
        <el-form-item label="發放方式" prop="send_type">
          <el-radio-group v-model="form.send_type">
            <!-- <el-radio :label="1">會員發放</el-radio> -->
            <!-- <el-radio :label="2">商品發放</el-radio> -->
            <!-- <el-radio :label="3">訂單方式</el-radio> -->
            <el-radio :label="4">線下發放</el-radio>
            <!-- <el-radio :label="5">線上發放</el-radio> -->
            <!-- <el-radio :label="6">註冊發放</el-radio> -->
          </el-radio-group>
        </el-form-item>
        <el-form-item label="發放開始日" v-show="form.send_type != 4">
          <el-date-picker
            v-model="form.send_start_date"
            type="date"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            placeholder="請選擇日期"
          />
        </el-form-item>
        <el-form-item label="發放結束日" v-show="form.send_type != 4">
          <el-date-picker
            v-model="form.send_end_date"
            type="date"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            placeholder="請選擇日期"
          />
        </el-form-item>
        <el-space fill>
          <el-alert type="info" show-icon :closable="true ">
            <p>空白為立即可以使用</p>
          </el-alert>
          <el-form-item label="使用開始日">
            <el-date-picker
              v-model="form.use_start_date"
              type="date"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              placeholder="請選擇日期"
            />
          </el-form-item>
        </el-space>
        <el-space fill>
          <el-alert type="info" show-icon :closable="true">
            <p>空白為永久可以使用</p>
          </el-alert>
          <el-form-item label="使用結束日">
            <el-date-picker
              v-model="form.use_end_date"
              type="date"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              placeholder="請選擇日期"
            />
          </el-form-item>
        </el-space>
      </el-form>
      <!-- </div> -->
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="handleClose">關閉</el-button>
        <el-button type="primary" @click="handleSubmit(formRef)"
          >送出</el-button
        >
      </div>
    </template>
  </el-drawer>
</template>

<style lang="less"></style>
