<template>
  <div>
    <el-dialog title="购买会员方案" v-model="show" @close="reset" width="60%">
      <el-form :model="form" label-width="120px">
        <el-form-item label="周期名称" required>
          <el-input v-model="form.name" placeholder="周期名称" />
        </el-form-item>
        <el-form-item label="周期价格" required>
          <el-input v-model="form.price" placeholder="周期价格" type="number" />
        </el-form-item>
        <el-form-item label="赠送成长值">
          <el-input v-model="form.reward" placeholder="开通后立刻获得经验" type="number" />
        </el-form-item>
        <el-form-item label="赠送优惠券">
          <CouponLists v-model="form.couponList" />
        </el-form-item>
        <el-form-item label="周期时间" required>
          <div class="flex">
            <el-input-number style="width: 300px" v-model="form.circleTime" placeholder="周期时间" type="number" />
            <el-select class="ml-2" v-model="form.circleUnit" placeholder="">
              <el-option label="年" value="年" />
              <el-option label="月" value="月" />
              <el-option label="周" value="周" />
              <el-option label="天" value="天" />
            </el-select>
          </div>
        </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 _ from "lodash";
import CouponLists from "./coup-lists.vue";

import { ref, toRaw } from "vue";
import { ElMessage } from "element-plus";
// 控制主弹窗显示
const show = ref(false);

// 控制优惠券选择弹窗显示
const couponDialogVisible = ref(false);

// 表单数据
const form = ref({
  name: "",
  price: 0,
  reward: 0,
  couponList: [], // 存储已选择的优惠券
  circleTime: 1, // 会员周期
  circleUnit: "月", // 会员周期单位
});

// 优惠券列表数据
const couponList = ref([
  { id: 1, name: "满100减10", value: "10元" },
  { id: 2, name: "满200减30", value: "30元" },
  { id: 3, name: "满500减100", value: "100元" },
]);

// 已选择的优惠券
const selectedCoupons = ref([]);

// 打开优惠券选择弹窗
function openCouponDialog() {
  couponDialogVisible.value = true;
}

// 关闭优惠券选择弹窗
function closeCouponDialog() {
  couponDialogVisible.value = false;
}

// 确认选择优惠券
function confirmCouponSelection() {
  form.value.couponList = [...selectedCoupons.value];
  closeCouponDialog();
}

// 处理优惠券选择
function handleCouponSelection(selection) {
  selectedCoupons.value = selection;
}

// 重置表单
function reset() {
  form.value = {
    name: "",
    price: 0,
    reward: 0,
    couponList: [],
    circleTime: "",
  };
}

const emits = defineEmits(["submitSuccess"]);
// 提交表单
function submit() {
  if (!form.value.name) {
    ElMessage.error("请输入方案名称");
    return;
  }
  if (form.value.price <= 0) {
    ElMessage.error("请输入有效的价格");
    return;
  }
  if (!form.value.circleTime) {
    ElMessage.error("请选择会员周期");
    return;
  }
  if (!form.value.circleUnit) {
    ElMessage.error("请选择会员周期单位");
  }
  const ispass = form.value.couponList.every((item) => item.num && item.coupon.id);
  if (!ispass) {
    ElMessage.error("请选择优惠券并输入数量");
    return;
  }
  console.log("提交表单数据：", form.value);
  emits("submitSuccess", form.value, dataIndex);
  // 在此处可以添加表单提交逻辑，例如调用 API
  close();
}

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