<template>
  <div class="app-container">
    <el-form ref="formRef" :model="form" label-width="120px">
      <div class="zd-card">
        <h4>添加营销活动</h4>
        <div class="box">
          <h5>基本信息</h5>

          <el-form-item label="活动类型">
            <el-radio-group v-model="form.activityType">
              <el-radio :value="1">指定门店</el-radio>
              <el-radio :value="2">招募活动</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="form.activityType == 1" label="输入指定门店ID">
            <el-input
              v-model="form.barNumber"
              placeholder="请务必确认输入正确"
              style="width: 400px"
            ></el-input>
          </el-form-item>
          <el-form-item label="参与酒款范围">
            <el-radio-group v-model="form.beerScope">
              <el-radio :value="0">不限</el-radio>
              <el-radio :value="1">指定酒款</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item
            v-if="form.beerScope == 1"
            label="选择指定酒款"
            prop="beerId"
          >
            <el-select
              v-model="form.beerIds"
              placeholder="请选择酒款"
              multiple
              style="width: 400px"
            >
              <el-option
                v-for="item in allBeersList"
                :key="item.id"
                :label="item.beerName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="form.activityType === 2"
            label="投放城市"
            prop="city"
          >
            <el-cascader
              placeholder="请输入投放城市"
              :options="pcTextArr"
              v-model="selectedOptions"
              style="width: 340px; margin-right: 10px"
              :disabled="form.city == '全国'"
              @change="handleChange"
            >
            </el-cascader>
            <el-checkbox
              v-model="form.city"
              true-value="全国"
              @change="selectedOptions = []"
              >全国</el-checkbox
            >
          </el-form-item>
        </div>
        <div class="box">
          <h5>目标设定</h5>
          <el-form-item label="累计目标" prop="activityTarget">
            <el-input
              v-model="form.activityTarget"
              type="number"
              :min="0"
              step-strictly
              :precision="0"
              placeholder="请输入累计目标"
              style="width: 400px"
            >
              <template #suffix> 桶 </template>
            </el-input>
          </el-form-item>
          <el-form-item
            :label="form.activityType === 2 ? '招募开始时间' : '开始时间'"
            prop="startDate"
          >
            <el-date-picker
              clearable
              v-model="form.startDate"
              type="date"
              value-format="YYYY-MM-DD"
              placeholder="请选择开始时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            :label="form.activityType === 2 ? '招募结束时间' : '结束时间'"
            prop="endDate"
          >
            <el-date-picker
              clearable
              v-model="form.endDate"
              type="date"
              value-format="YYYY-MM-DD"
              placeholder="请选择结束时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            v-if="form.activityType === 2"
            label="门店累积天数"
            prop="duration"
          >
            <el-input
              v-model="form.duration"
              :max="31"
              type="number"
              placeholder="不大于31天"
              style="width: 400px"
            >
              <template #suffix> 天 </template>
            </el-input>
          </el-form-item>
        </div>
        <div class="box">
          <h5>返利设置</h5>
          <el-form-item label="返利方式" prop="activityRewardType">
            <el-radio-group v-model="form.activityRewardType">
              <el-radio :value="1">商品</el-radio>
              <el-radio :value="2">啤酒币</el-radio>
            </el-radio-group>
          </el-form-item>
          <template v-if="form.activityRewardType == 1">
            <el-form-item label="选择商品" prop="activityRewardGoodsId">
              <el-select
                v-model="form.activityRewardGoodsId"
                placeholder="请选择商品"
                style="width: 400px"
              >
                <el-option
                  v-for="item in allGoods"
                  :key="item.id"
                  :label="item.goodsName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="返利数量" prop="activityRewardCount">
              <el-input
                v-model="form.activityRewardCount"
                type="number"
                :min="0"
                placeholder="返利数量"
                style="width: 400px"
              ></el-input>
            </el-form-item>
          </template>
          <template v-if="form.activityRewardType == 2">
            <el-form-item label="啤酒币发放数量" prop="activityRewardCount">
              <el-input
                v-model="form.activityRewardCount"
                type="number"
                :min="0"
                placeholder="啤酒币发放数量"
                style="width: 400px"
              ></el-input>
            </el-form-item>
          </template>
        </div>
      </div>
    </el-form>
    <div class="btn-container">
      <el-button type="primary" @click="handlePublish">保存并发布</el-button>
      <el-button type="primary" @click="handleSubmit">保存</el-button>
      <el-button @click="handleCancle">取消</el-button>
    </div>
  </div>
</template>

<script setup>
import { pcTextArr } from "element-china-area-data";
import { onMounted, ref } from "vue";
import { addActivity } from "@/api/brewery/activity";
import { allBeers } from "@/api/brewery/beer";
import { allListGoods } from "@/api/brewery/goods";
import { getCurrentInstance } from "vue";
const router = useRouter();
const { proxy } = getCurrentInstance();
const loading = ref(false);
const form = ref({
  activityType: 2,
  beerScope: 0,
  activityRewardType: 1,
});
const allBeersList = ref([]); // 所有啤酒列表
const allGoods = ref([]); // 所有可兑换商品
onMounted(() => {
  getAllBeersFun(); // 所有啤酒列表
  getAllGoodsFun(); // 所有可兑换商品
});
const selectedOptions = ref([]);
function handleChange() {
  console.log(selectedOptions.value);
  form.value.city = `${selectedOptions.value[0]}/${selectedOptions.value[1]}`;
}
// 获取所有啤酒列表
function getAllBeersFun() {
  allBeers().then((response) => {
    allBeersList.value = response.data;
  });
}
// 所有可兑换商品
function getAllGoodsFun() {
  allListGoods({ purchaseMethod: 2 }).then((response) => {
    allGoods.value = response.data;
  });
}
// 发布活动
function handlePublish() {
  console.log("发布");
  proxy.$refs["formRef"].validate((valid) => {
    if (valid) {
      form.value.activityStatus = 1;

      loading.value = true;
      addActivity(form.value)
        .then((response) => {
          loading.value = false;
          proxy.$modal.msgSuccess("发布成功");
          router.back();
        })
        .catch((error) => {
          loading.value = false;
          console.log(error);
          proxy.$modal.msgError("发布失败");
        });
    }
  });
}
// 保存活动
function handleSubmit() {
  console.log("保存");
  proxy.$refs["formRef"].validate((valid) => {
    if (valid) {
      form.value.activityStatus = 0;

      loading.value = true;
      addActivity(form.value)
        .then((response) => {
          loading.value = false;
          proxy.$modal.msgSuccess("保存成功");
          router.back();
        })
        .catch((error) => {
          loading.value = false;
          console.log(error);
          proxy.$modal.msgError("保存失败");
        });
    }
  });
}
// 取消
function handleCancle() {
  router.back();
}
</script>

<style scoped lang="scss">
.box {
  padding: 5px 8px;
  background-color: #f5f5f5;
  margin-bottom: 24px;
}
.btn-container {
  text-align: center;
}
</style>
