<template>
  <el-dialog v-model="dialogVisible" :title="form.id ? '编辑限时活动' : '添加限时活动'" width="700px" top="4vh"
    @closed="closedReset">
    <div class="scroll" ref="scrollRef">
      <el-form ref="formRef" :model="form" :rules="formRules" label-width="120px" class="dialog-form">
        <el-form-item label="活动名称" prop="title">
          <el-input v-model="form.title" :maxlength="20" placeholder="请输入活动名称" style="width: 300px" />
        </el-form-item>
        <el-form-item label="可用门店" prop="useShopType" v-if="shopInfo.isHeadShop && shopInfo.shopType != 'only'">
          <el-radio-group v-model="form.useShopType">
            <el-radio label="仅本店可用" value="only"></el-radio>
            <el-radio label="全部门店" value="all"></el-radio>
            <el-radio label="指定门店可用" value="custom"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="选择门店" v-if="form.useShopType == 'custom'">
          <el-select v-model="shops" multiple clearable placeholder="请选择门店" @change="shopsChange" style="width: 300px">
            <el-option :label="item.shopName" :value="item.id" v-for="item in branchList" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动日期" prop="validityScope">
          <div style="width: 200px">
            <el-date-picker v-model="validityScope" type="daterange" range-separator="至" start-placeholder="开始时间"
              end-placeholder="结束时间" @change="validityScopeChange" />
          </div>
        </el-form-item>
        <el-form-item label="可用周期" prop="useDays">
          <el-checkbox-group v-model="form.useDays">
            <el-checkbox value="周一" label="周一" />
            <el-checkbox value="周二" label="周二" />
            <el-checkbox value="周三" label="周三" />
            <el-checkbox value="周四" label="周四" />
            <el-checkbox value="周五" label="周五" />
            <el-checkbox value="周六" label="周六" />
            <el-checkbox value="周日" label="周日" />
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="指定时间段">
          <el-radio-group v-model="form.useTimeType">
            <el-radio label="全时段可用" value="all"></el-radio>
            <el-radio label="指定时间段可用" value="custom"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="form.useTimeType == 'custom'" prop="useTimeType">
          <div style="width: 200px">
            <el-time-picker v-model="useTimeScope" is-range range-separator="至" start-placeholder="开始时间"
              end-placeholder="结束时间" @change="useTimeScopeChange" />
          </div>
        </el-form-item>
        <el-form-item label="可使用类型" prop="useType">
          <el-checkbox-group v-model="form.useType">
            <el-checkbox value="dine-in" label="堂食" />
            <el-checkbox value="take-out" label="外带" />
            <el-checkbox value="take-away" label="外卖" />
            <el-checkbox value="post" label="配送" />
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="折扣" prop="discountRate">
          <div class="column">
            <div class="center">
              <el-input v-model="form.discountRate" placeholder="请输入折扣" style="width: 200px" @input="discountRateInput">
                <template #append>%</template>
              </el-input>
              <span style="color: #999;">范围：1-99%</span>
            </div>
            <div class="tips">例如：填写90，那么折扣后价格=原价*90%</div>
          </div>
        </el-form-item>
        <el-form-item label="优先级">
          <el-input v-model="form.sort" placeholder="请输入" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="限时折扣优先级">
          <el-radio-group v-model="form.discountPriority">
            <el-radio label="优先使用限时折扣价" value="limit-time"></el-radio>
            <el-radio label="优先使用会员价" value="vip-price"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="参与商品">
          <el-radio-group v-model="form.foodType" @change="goodRadioChnage">
            <el-radio label="全部商品可用" :value="1"></el-radio>
            <el-radio label="部分商品可用" :value="2"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="form.foodType == 2" prop="goodsType">
          <el-cascader v-model="goodsTypeCascaderValue" :options="goodsList" :props="cascaderProps"
            :show-all-levels="false" :max-collapse-tags="3" collapse-tags clearable style="width: 300px"
            @change="selectFoodsConfirm"></el-cascader>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer" v-if="shopInfo.isHeadShop == 1 || shopInfo.shopType == 'only'">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="submitHandle">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import _ from "lodash";
import { filterNumberInput } from "@/utils";
import { dayjs, ElNotification } from "element-plus";
import { ref, reactive, onMounted, nextTick } from "vue";
import { getBranchPage, getProductList, getCategoryList, limitTimeDiscount } from "@/api/coupon/index.js";

const shopInfo = ref("");
const dialogVisible = ref(false);

const cascaderProps = ref({
  multiple: true,
  emitPath: false,
  value: "id",
  label: "name",
});

// 选择指定商品
const goodsType = ref(1);
const goodsTypeCascaderValue = ref([]);
function selectFoodsConfirm(e) {
  console.log(JSON.stringify(e));
  form.value.foods = e.join(",");
}

// 切换商品类型
function goodRadioChnage(e) {
  console.log(e);
  form.value.foods = '';
  goodsTypeCascaderValue.value = [];
}

// 选择的店铺列表
const shops = ref([]);
function shopsChange(e) {
  form.value.useShops = e.join(",");
}

// 有效期时间
const validityScope = ref([]);
function validityScopeChange(e) {
  console.log("validityScopeChange===", e);
  if (e && e.length) {
    form.value.validStartTime = dayjs(e[0]).format("YYYY-MM-DD");
    form.value.validEndTime = dayjs(e[1]).format("YYYY-MM-DD");
  } else {
    form.value.validStartTime = "";
    form.value.validEndTime = "";
  }
}

// 可用时间
const useTimeScope = ref([]);
function useTimeScopeChange(e) {
  console.log("useTimeScopeChange===", e);
  if (e && e.length) {
    form.value.useStartTime = dayjs(e[0]).format("HH:mm:00");
    form.value.useEndTime = dayjs(e[1]).format("HH:mm:00");
  } else {
    form.value.useStartTime = "";
    form.value.useEndTime = "";
  }
}

const formRef = ref(null);
// 仅保留组件中实际使用到的字段，减少冗余
const form = ref({
  id: "",
  shopId: "",
  syncId: "",
  title: "", // 活动名称
  useShopType: "only", // only/all/custom
  useShops: "", // 指定门店 id 拼接字符串
  foodType: 1, // 参与商品类型 1-全部 2-部分
  foods: "", // 指定商品 id 拼接
  useType: ["dine-in"],
  useDays: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
  useTimeType: "all",
  useStartTime: "",
  useEndTime: "",
  validType: "fixed",
  validStartTime: "",
  validEndTime: "",
  discountRate: "",
  sort: '',
  discountPriority: 'limit-time',
});

// 折扣输入处理
const discountRateInput = _.debounce(function (value) {
  form.value.discountRate = filterNumberInput(value, 1);
  if (form.value.discountRate > 99) {
    form.value.discountRate = 99;
  }
}, 50);

// 初始化
const resetForm = ref(null);
function reset() {
  goodsType.value = 1;
  goodsTypeCascaderValue.value = [];
  shops.value = [];
  validityScope.value = [];
  useTimeScope.value = [];
  form.value = { ...resetForm.value };
}

// 自定义校验选择门店（用于模板中 useShopType）
const useShopTypeValidate = (rule, value, callback) => {
  if (form.value.useShopType == "custom" && form.value.useShops === "") {
    callback(new Error("请选择门店"));
  } else {
    callback();
  }
};

// 自定义校验参与商品（用于模板中 goodsType 判断）
const goodsTypeValidate = (rule, value, callback) => {
  if (form.value.foodType == 2 && form.value.foods === "") {
    callback(new Error("请选择商品"));
  } else {
    callback();
  }
};

// 自定义校验指定可用时间段（用于模板中 useTimeType 判断）
const useTimeTypeValidate = (rule, value, callback) => {
  if (!form.value.useStartTime) {
    callback(new Error("请选择指定可用时间段"));
  } else {
    callback();
  }
};

const formRules = reactive({
  title: [{ required: true, message: "请输入优惠券名称", trigger: "blur" }],
  useShopType: [
    {
      validator: useShopTypeValidate,
      trigger: "change",
    },
  ],
  goodsType: [
    {
      validator: goodsTypeValidate,
      trigger: "change",
    },
  ],
  discountRate: [{ required: true, message: "输入折扣（%）", trigger: "blur" }],
  useType: [{ required: true, message: "请选择可使用类型", trigger: "change" }],
  useDays: [{ required: true, message: "请选择可用周期", trigger: "change" }],
  useTimeType: [
    {
      validator: useTimeTypeValidate,
      trigger: "change",
    },
  ],
  validityScope: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (!validityScope.value || validityScope.value.length == 0) {
          callback(new Error("请选择活动日期"));
        } else {
          callback();
        }
      },
      trigger: "change",
    },
  ]
});

// 开始提交
const emits = defineEmits(["success"]);
const loading = ref(false);
function submitHandle() {
  formRef.value.validate(async (valid) => {
    try {
      if (valid) {
        loading.value = true;
        const data = { ...form.value };
        if (form.value.id) {
          data.shopId = form.value.shopId;
        } else {
          data.shopId = shopInfo.value.shopId;
        }
        data.useDays = form.value.useDays.join(",");
        data.useType = form.value.useType.join(",");
        await limitTimeDiscount(data, form.value.id ? "put" : "post");
        ElNotification({
          title: "注意",
          message: "保存成功",
          type: "success",
        });
        emits("success");
        dialogVisible.value = false;
      }
    } catch (err) {
      console.log(err);
    }
    loading.value = false;
  });
}

// 从本地获取商户信息
function getLocalShopInfo() {
  shopInfo.value = JSON.parse(localStorage.getItem("userInfo"));
}

// 获取分店列表
const branchList = ref([]);
async function getBranchPageAjax() {
  try {
    const res = await getBranchPage();
    branchList.value = res.records;
  } catch (err) {
    console.log(err);
  }
}

// 获取商品列表
const goodsList = ref([]);
async function getProductListAjax(shopId) {
  try {
    const categorys = await getCategoryList();
    const products = await getProductList();
    goodsList.value = formatCategoryWithProducts(categorys, products);
  } catch (err) {
    console.log(err);
  }
}

// 给分类组合相应的商品
function formatCategoryWithProducts(categories, products) {
  // 步骤1：遍历所有分类，为每个分类匹配对应的商品
  const allCategoriesWithProducts = categories.map((category) => {
    // 匹配当前分类下的商品（通过category.id === product.categoryId关联）
    const matchedProducts = products
      .filter((product) => product.categoryId === category.id) // 关键：按分类ID匹配商品
      .map((product) => ({
        id: product.id,
        name: product.name, // 提取商品的id和name
      }));

    // 组装单个分类的结构
    return {
      id: category.id,
      name: category.name,
      children: matchedProducts, // 该分类下的商品（空数组表示无商品）
    };
  });

  // 步骤2：过滤掉“无商品”的分类（children为空数组的分类）
  return allCategoriesWithProducts.filter((item) => item.children.length > 0);
}

// 显示弹窗
const scrollRef = ref(null);
function show(obj = null) {
  console.log(obj);
  // return


  nextTick(() => {
    if (scrollRef.value) {
      setTimeout(() => {
        scrollRef.value.scrollTop = 0;
      }, 50);
    }
  });

  if (obj && obj.id) {
    getProductListAjax(form.value.shopId);

    form.value = { ...obj };

    form.value.useDays = form.value.useDays.split(",");
    form.value.useType = form.value.useType.split(",");

    validityScope.value = [
      form.value.validStartTime,
      form.value.validEndTime,
    ];

    if (!!form.value.syncId) {
      form.value.useShopType = "only";
    }

    if (form.value.foods != "") {
      goodsType.value = 2;
      goodsTypeCascaderValue.value = form.value.foods.split(",");
    } else {
      goodsType.value = 1;
    }

    if (form.value.useShops != "" && form.value.useShopType == "custom") {
      shops.value = form.value.useShops.split(",");
    }

    if (form.value.validType == "custom") {
      validityScope.value = [form.value.validStartTime, form.value.validEndTime];
    }

    if (form.value.useTimeType == "custom") {
      useTimeScope.value = [
        convertTimeToDate(form.value.useStartTime),
        convertTimeToDate(form.value.useEndTime),
      ];

      console.log(useTimeScope.value);
    }
  } else {
    getProductListAjax(shopInfo.value.shopId);
    reset();
  }
  dialogVisible.value = true;
}

// 关闭后重置表单验证
function closedReset() {
  formRef.value.resetFields();
}

/**
 * 将时分秒字符串转换为完整日期格式
 * @param {string} timeStr - 时分秒字符串，格式需为 HH:mm:ss（如 '00:53:00'）
 * @param {Object} options - 可选配置项
 * @param {string} [options.customDate] - 自定义日期，格式为 YYYY-MM-DD（默认使用当前日期）
 * @param {string} [options.format='YYYY-MM-DD HH:mm:ss'] - 输出的日期格式
 * @returns {string|null} 转换后的日期字符串，失败时返回 null
 */
function convertTimeToDate(timeStr, options = {}) {
  // 解构配置项，设置默认值
  const { customDate, format = "YYYY-MM-DD HH:mm:ss" } = options;

  // 1. 校验时分秒格式（必须为 HH:mm:ss，允许数字1-2位）
  const timeRegex = /^\d{1,2}:\d{1,2}:\d{1,2}$/;
  if (!timeRegex.test(timeStr)) {
    console.error("时分秒格式错误，请使用 HH:mm:ss 格式（如 00:53:00）");
    return null;
  }

  // 2. 确定日期部分（自定义日期或当前日期）
  let datePart;
  if (customDate) {
    // 校验自定义日期格式
    if (!dayjs(customDate, "YYYY-MM-DD", true).isValid()) {
      console.error("自定义日期格式错误，请使用 YYYY-MM-DD 格式（如 2024-05-20）");
      return null;
    }
    datePart = customDate;
  } else {
    // 使用当前日期（格式：YYYY-MM-DD）
    datePart = dayjs().format("YYYY-MM-DD");
  }

  // 3. 组合日期和时分秒，生成完整日期对象
  const fullDateTime = `${datePart} ${timeStr}`;
  const dateObj = dayjs(fullDateTime);

  // 4. 校验完整日期是否有效（如避免 2024-02-30 这种无效日期）
  if (!dateObj.isValid()) {
    console.error("生成的日期无效，请检查日期或时分秒是否合理");
    return null;
  }

  // 5. 按指定格式返回日期字符串
  return dateObj.format(format);
}

defineExpose({
  show,
});

onMounted(() => {
  resetForm.value = { ...form.value };
  getLocalShopInfo();
  getBranchPageAjax();
});
</script>

<style scoped lang="scss">
.title {
  color: #000;
  padding: 14px;
  background-color: #f8f8f8;
  margin-bottom: 14px;
  font-size: 16px;
}

.column {
  flex: 1;
  display: flex;
  flex-direction: column;

  .item {
    flex: 1;
  }
}

.tips {
  color: #666;
}

.center {
  display: flex;
  align-items: center;
  gap: 10px;
}

.scroll {
  height: 76vh;
  padding-bottom: 60px;
  overflow-y: auto;
}

.dialog-footer {
  position: relative;

  &::after {
    content: "";
    width: 100%;
    height: 60px;
    position: absolute;
    left: 0;
    bottom: calc(100% + var(--el-dialog-padding-primary));
    z-index: 9;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
  }
}

.textarea-num {
  color: #999;
  display: flex;
  justify-content: flex-end;
}
</style>
