<template>
  <div class="m-4 bg-white p-4">
    <div v-if="shopInfo.isHeadShop == 1 || isUse">
      <HeaderCard name="生日有礼" intro="用户生日管理设置" icon="birthdayGift"
        :showSwitch="shopInfo.isHeadShop == 1 || shopInfo.shopType == 'only'" v-model:isOpen="basicForm.isEnable">
      </HeaderCard>
      <el-tabs class="mt-4" v-model="activeTab" type="border-card">
        <el-tab-pane :label="item.label" v-for="item in configs" :key="item.name" :name="item.name">
          <template v-if="item.name == 'basic'">
            <el-form ref="form" :model="basicForm">
              <div class="u-m-b-10">
                <el-button type="primary" @click="refDialogPlans.open()"
                  v-if="shopInfo.isHeadShop == 1 || shopInfo.shopType == 'only'">添加</el-button>
              </div>
              <el-form-item label="">
                <el-table :data="basicForm.configList" border style="width: 60%">
                  <el-table-column label="用户类型" align="center">
                    <template #default="scope">
                      {{ returnUserType(scope.row.userType) }}
                    </template>
                  </el-table-column>
                  <el-table-column label="赠送优惠券" align="center">
                    <template #default="scope">
                      <div v-for="item in scope.row.couponInfoList" :key="item.id">
                        <span>{{ item.title }}</span>
                        <span class="m-l-4">{{ item.num }} 张</span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="is_auto_renew" label="发放时间" align="center">
                    <template #default="scope">
                      {{ returnDeliverDate(scope.row) }}
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" align="center">
                    <template #default="scope">
                      <el-button type="text" @click="editPlan(scope.row, scope.$index)">
                        编辑
                      </el-button>
                      <el-button type="text" style="color: red" @click="deletePlan(scope.row)">
                        删除
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>

              <el-form-item label="短信祝福">
                <el-switch v-model="basicForm.sendSms" :active-value="1" :inactive-value="0"></el-switch>
                <span class="color-666 font-size-[12px] m-l-4">
                  开启后，将会在用户生日当天，发送祝福短信
                </span>
              </el-form-item>
              <el-form-item label="短信内容">
                <span class="color-666 font-size-[14px]">
                  亲爱的{用户昵称}，[店铺名称]祝您生日快乐！感谢您一直的陪伴。为您准备了{num}张超值优惠券，已经放入账户，愿我们的礼物能为您增添一份喜悦。
                </span>
              </el-form-item>
            </el-form>
            <div class="flex mt-10 justify-center gap-10" v-if="shopInfo.isHeadShop">
              <el-button style="width: 100px" type="primary" @click="basicSubmit" size="large">
                保存
              </el-button>
              <el-button @click="close" style="width: 100px" size="large">取消</el-button>
            </div>
          </template>
          <template v-if="item.name == 'record'">
            <recordLists :recordList="recordList"></recordLists>
          </template>
        </el-tab-pane>
      </el-tabs>
      <DialogPlans ref="refDialogPlans" @submitSuccess="submitSuccess"></DialogPlans>
    </div>
    <div style="padding-top: 14px;" v-else>门店未参与生日有礼或主店未开启活动，如需开启参与请联系主店</div>
  </div>
</template>

<script setup>
import { returnUserType } from "@/views/marketing_center/data.js";

import shopApi from "@/api/account/shop";
import birthdayGiftApi from "@/api/market/birthdayGift";
import HeaderCard from "../components/headerCard.vue";
import DialogPlans from "./components/dialog-plans.vue";
import recordLists from "./components/record-lists.vue";
import { ref, reactive, watch, toRaw, getCurrentInstance, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";

const shopInfo = ref(JSON.parse(localStorage.getItem("userInfo")));
const inputStyle = {
  width: "340px",
};

const router = useRouter();

const refDialogPlans = ref();
const configs = [
  { name: "basic", label: "基础设置" },
  { name: "record", label: "发放记录" },
];
const activeTab = ref("basic");

const basicForm = reactive({
  isEnable: 0,
  sendSms: 0,
  templateId: "",
  configList: [],
});

function editPlan(row, index) {
  refDialogPlans.value.open(toRaw(row), index);
}

function returnDeliverDate(row) {
  if (row.deliverDate === "advance") {
    return "提前" + Math.abs(row.deliverTime) + "天";
  }
  if (row.deliverDate === "day") {
    if (row.deliverTime != 0) {
      return "提前" + Math.abs(row.deliverTime) + "天";
    }
    return "当天";
  }
  if (row.deliverDate === "mouth") {
    return "当月1号";
  }
}
function deletePlan(row) {
  const index = basicForm.configList.indexOf(row);
  if (index > -1) {
    basicForm.configList.splice(index, 1);
  }
}
function submitSuccess(plans, index) {
  if (!basicForm.configList) {
    basicForm.configList = [];
  }
  if (index !== null && index !== undefined) {
    basicForm.configList[index] = plans;
    return;
  }
  basicForm.configList.push(plans);
}
// 会员基础设置提交
function basicSubmit() {
  const data = toRaw(basicForm);
  console.log(data);

  birthdayGiftApi.editConfig(data).then((res) => {
    ElMessage.success("保存成功");
  });
}


const isUse = ref(false)
async function init() {
  birthdayGiftApi.getConfig().then((res) => {
    res.configList = res.configList || [];
    Object.assign(basicForm, res);
    basicForm.isEnable = basicForm.isEnable;

    if (res.isEnable == 1) {
      isUse.value = true
      // if (shopInfo.value.shopType == 'only') {
      //   isUse.value = true
      // }
      //  else {
      //   if (res.useType == 'all') {
      //     isUse.value = true
      //   } else {
      //     let currentShopId = shopInfo.value.shopId;
      //     res.shopIdList.some((item) => {
      //       if (item == currentShopId) {
      //         isUse.value = true;
      //         return true;
      //       }
      //     });
      //   }
      // }
    } else {
      isUse.value = false
    }
  });
}

onMounted(() => {
  init();
});
//计算总优惠券数量
function totalCount(arr) {
  return arr.reduce((total, item) => {
    return total + item.num * 1;
  }, 0);
}
//
function levelExperienceValueMin(index, level) {
  if (index == 0) {
    return 0;
  }
  return levels.value[index - 1].experienceValue + 1;
}
//返回
function close() {
  router.back();
}
//
function levelTabChange(index) { }
</script>

<style lang="scss" scoped>
:deep(.el-tabs--border-card) {
  border: none;
}

:deep(.el-tabs--border-card > .el-tabs__header) {
  border: none;
  padding: 4px;
}

:deep(.el-tabs--border-card > .el-tabs__header .el-tabs__item) {
  border: none;
}

:deep(.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active) {
  border: none;
}
</style>
