<template>
  <div>
    <el-dialog title="添加赠券" v-model="show" @close="reset" width="60%">
      <el-form :model="form" label-width="120px">
        <el-form-item label="用户类型">
          <el-radio-group v-model="form.userType">
            <el-radio v-for="(item, index) in userTypes" :key="index" :value="item.value">
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="发放时间">
          <el-radio-group v-model="form.deliverDate">
            <el-radio v-for="(item, index) in deliverDates" :key="index" :value="item.value">
              {{ item.label }}
            </el-radio>
            <el-input
              v-if="form.deliverDate === 'advance'"
              style="width: 180px"
              :step="1"
              :min="1"
              v-model="form.deliverTime"
              placeholder="请输入提前天数"
            >
              <template #append>天</template>
            </el-input>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="选择优惠券">
          <CouponLists v-model="form.couponInfoList" />
        </el-form-item>
      </el-form>
      <div style="text-align: right; margin-top: 20px">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="submit">{{ isedit ? "更新" : "提交" }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import CouponLists from "./coup-lists.vue";
import { userTypes } from "@/views/marketing_center/data.js";
import { ref, toRaw } from "vue";
import { ElMessage } from "element-plus";
// 控制主弹窗显示
const show = ref(false);

// 发放时间选项
const deliverDates = ref([
  { value: "mouth", label: "当月1号" },
  { value: "day", label: "当天" },
  { value: "advance", label: "提前" },
]);

// 表单数据
const form = ref({
  userType: "all",
  deliverTime: 1,
  deliverDate: "mouth",
  couponInfoList: [],
});

// 重置表单
function reset() {
  form.value = {
    userType: "all",
    deliverTime: 1,
    deliverDate: "mouth",
    couponInfoList: [],
  };
}

const emits = defineEmits(["submitSuccess"]);
// 提交表单
function submit() {
  if (!form.value.couponInfoList.length) {
    ElMessage.error("请选择优惠券");
    return;
  }
  const ispass = form.value.couponInfoList.every((item) => item.num && item.id);
  if (!ispass) {
    ElMessage.error("请选择优惠券并输入数量");
    return;
  }
  const submitData = { ...form.value };
  if (submitData.deliverDate !== "advance") {
    if (submitData.deliverDate === "day") {
      submitData.deliverTime = 0;
    }
    if (submitData.deliverDate === "mouth") {
      submitData.deliverTime = 1;
    }
  } else {
    //提前多少天
    submitData.deliverDate = "day";
    submitData.deliverTime = Math.abs(submitData.deliverTime);
  }

  emits("submitSuccess", submitData, dataIndex);
  // 在此处可以添加表单提交逻辑，例如调用 API
  close();
}

let isedit = ref(false);
let dataIndex = null;
function open(data, index) {
  data = toRaw(data);
  console.log("data", data);
  console.log("index", index);
  if (data) {
    if (data.deliverDate == "day" && data.deliverTime) {
      data.deliverDate = "advance";
      data.deliverTime = Math.abs(data.deliverTime);
    }
    form.value = data;
    isedit.value = true;
    dataIndex = index;
  } else {
    isedit.value = false;
    dataIndex = null;
  }
  console.log(data);
  show.value = true;
}
function close() {
  show.value = false;
  reset();
}
defineExpose({ open, close, reset, submit });
</script>