<template>
  <div class="app-container">
    <div class="card">
      <div class="row">
        <div class="title">
          营销中心
        </div>
        <div class="menus_wrap">
          <div class="item" v-for="(item, index) in newMenus" :key="index" @click="showChildrenHandle(index)">
            <el-image :src="getIconPathNew(`${index + 1}`)" :style="iconSize"></el-image>
            <template v-if="item.childrenList.length == 1">
              <div class="info">
                <div class="name">{{ item.childrenList[0].name }}</div>
                <div class="intro">{{ item.childrenList[0].intro }}</div>
              </div>
            </template>
            <template v-else>
              <div class="info">
                <div class="name">{{ item.name }}</div>
                <div class="intro">{{ item.intro }}</div>
              </div>
            </template>
          </div>
        </div>
      </div>
      <!-- <div class="children_wrap" :class="{ active: childrenShow }">
        <div class="close" @click="childrenShow = false">
          <el-icon size="24" color="#333">
            <CircleClose />
          </el-icon>
        </div>
        <div class="row">
          <div class="title">
            {{ newMenus[menusActive].name }}
          </div>
          <div class="menus_wrap">
            <div class="item" v-for="(val, index) in newMenus[menusActive].childrenList" :key="index" @click="to(val)">
              <img :src="getIconPath(val.icon)" class="icon" @error="handleImageError(val)" />
              <div class="info">
                <div class="name">{{ val.name }}</div>
                <div class="intro">
                  {{ val.intro }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import defaultIcon from "@/assets/logo.png";
import { ElMessage } from "element-plus";
import { newMenus } from './data.js'

const iconSize = ref({
  width: '55px',
  height: '55px'
})

function showChildrenHandle(index) {
  // menusActive.value = index
  // childrenShow.value = true
  if (newMenus[index].childrenList.length == 1) {
    let item = newMenus[index].childrenList[0]
    router.push({
      name: item.pathName,
    })
  } else {
    router.push({
      name: 'marketing_children_page',
      query: {
        index: index
      }
    })
  }
}

const router = useRouter();
const to = (item) => {
  if (!item.pathName) {
    ElMessage.warning("暂未开放");
    return;
  }
  router.push({
    name: item.pathName,
  });
};
const menus = ref([
  {
    label: "营销",
    list: [
      {
        name: "霸王餐",
        icon: "bwc",
        pathName: "king_dine",
        intro: "设置充值消费的N倍，当前订单立即免单",
      },
      // { name: "邀请列表", icon: "yqlb", pathName: "invite", intro: "邀请好友领券" },
      {
        name: "积分锁客",
        icon: "jfsk",
        pathName: "points",
        intro: "设置充值消费的N倍，当前订单立即免单",
      },
      // { name: "充值活动", icon: "czhd", pathName: "", intro: "允许客户充值并使用余额支付" },
      { name: "弹窗广告", icon: "tcgg", pathName: "", intro: "设置弹窗广告" },
      { name: "超级会员", icon: "cjhy", pathName: "superVip", intro: "用户会员管理设置" },
      { name: "新客立减", icon: "xklj", pathName: "newUserDiscount", intro: "首单下单减免金额" },
      {
        name: "智慧充值",
        icon: "zhcz",
        pathName: "wisdom_recharge",
        intro: "允许客户充值并使用余额支付",
      },
      { name: "分销", icon: "zhcz", pathName: "distribution_page", intro: "用户成为业务员，可促进消费" },
      {
        name: "消费返现",
        icon: "xffx",
        pathName: "cashback",
        intro: "用户下单后返现一定的金额到余额，可促进复购",
      },
      {
        name: "私域引流",
        icon: "syyl",
        pathName: "drainage",
        intro: "可设置用户下单成功后的群二维码",
      },
      { name: "满减活动", icon: "mjhd", pathName: "discount_activity", intro: "达到指定支付金额享受减价" },
      { name: "生日有礼", icon: "sryl", pathName: "birthdayGift", intro: "用户生日管理设置" },
      {
        name: "点餐智能推荐",
        icon: "dczntj",
        pathName: "order_recommendation",
        intro: "进入点单页X秒未点自动推荐商品，此推荐设置启用即生效",
      },
      { name: "超值券包", icon: "czqb", pathName: "", intro: "下单加购" },
      {
        name: "套餐推广",
        icon: "tctg",
        pathName: "",
        intro: "下单通过用户邀请好友减免金额的方式裂变宣传套餐加购",
      },
      {
        name: "充值兑换码",
        icon: "czdhm",
        pathName: "recharge_exchange",
        intro: "兑换码直充余额，可当作礼品赠送",
      },
      { name: "券兑换码", icon: "qdhm", pathName: "coupon_exchange_code", intro: "可添加多券组合兑换" },
      { name: "限时折扣", icon: "xszk", pathName: "discount_limit", intro: "批量设置商品折扣" },
      { name: "商品拼团", icon: "sppt", pathName: "", intro: "拼团" },
    ],
  },
  {
    label: "优惠券",
    list: [
      {
        name: "满减券",
        icon: "mjq",
        pathName: "discount_coupon",
        intro:
          "用户满足指定金额后，可使用优惠券立减相应金额，如：设置满100-50券，符合要求的订单满100元后，立减50元。",
      },
      {
        name: "商品兑换券",
        icon: "spdhq",
        pathName: "product_redemption",
        intro: "设置可兑换成商品的券",
      },
      {
        name: "折扣券",
        icon: "zkq",
        pathName: "rebate_coupon",
        intro: "下单享折扣但折扣的金额将在券中抵扣。",
      },
      {
        name: "第二件半价券",
        icon: "dejbjq",
        pathName: "half_price",
        intro: "设置第二件半价券",
      },
      {
        name: "消费赠券",
        icon: "xfzq",
        pathName: "consume_ticket",
        intro: "达到指定消费金额赠送优惠券",
      },
      {
        name: "买一送一券",
        icon: "myzy",
        pathName: "buy_one",
        intro: "针对营销活动买一送一设置券品",
      },
      {
        name: "固定价格券",
        icon: "gdjkq",
        pathName: "",
        intro:
          "设置该券后，允许用户以固定价格兑换指定商品，如：设置一个固定价格9.9的券，商品20元，用户使用券后只需要9.9元兑换该商品。",
      },
      {
        name: "免配送费券",
        icon: "mfpsq",
        pathName: "",
        intro: "可设置一张免除订单配送费的券",
      },
    ],
  },
  {
    label: "推送功能",
    list: [
      { name: "推送活动消息", icon: "tshdxx", pathName: "", intro: "给用户推送服务通知" },
      { name: "短信推送", icon: "dxts", pathName: "note_push", intro: "给用户推送服务通知" },
    ],
  },
  {
    label: "扩展功能",
    list: [
      {
        name: "微信公众号",
        icon: "wxgzh",
        pathName: "official_accounts",
        intro:
          "授权微信公众号后，让你能够在后台查看和维护公众号的粉丝；同时你的店铺也有出现关注公众号的入口。",
      },
    ],
  },
]);

// 动态获取PNG图标路径
const getIconPath = (iconName) => {
  try {
    // 直接导入对应PNG文件
    return new URL(`/src/assets/applocation/${iconName}.png`, import.meta.url).href;
  } catch (error) {
    console.warn(`图标 ${iconName}.png 不存在`);
    return defaultIcon; // 图标不存在时使用默认图标
  }
};

// 动态获取PNG图标路径
const getIconPathNew = (iconName) => {
  try {
    // 直接导入对应PNG文件
    return new URL(`/src/assets/marketing/${iconName}.png`, import.meta.url).href;
  } catch (error) {
    console.warn(`图标 ${iconName}.png 不存在`);
    return defaultIcon; // 图标不存在时使用默认图标
  }
};

// 处理图片加载失败
const handleImageError = (item) => {
  console.error(`图标 ${item.icon}.png 加载失败`);
};
</script>

<style scoped lang="scss">
.app-container {
  padding: 14px;

  .card {
    height: 81vh;
    overflow-y: auto;
    padding: 14px;
    background-color: #fff;
    border-radius: 10px;
    position: relative;
    overflow: hidden;

    .children_wrap {
      width: 100%;
      height: 81vh;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 99;
      background-color: rgba(255, 255, 255, 0.8);
      backdrop-filter: blur(20px);
      padding: 14px;
      border-radius: 10px;
      transition: all .3s ease-in-out;
      transform: translateY(200%);

      &.active {
        transform: translateY(0);
      }

      .close {
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 10px;
        right: 10px;

        &:hover {
          cursor: pointer;
        }
      }
    }

    .row {
      &:not(:first-child) {
        padding-bottom: 14px;
      }

      .title {
        font-size: 16px;
      }

      .menus_wrap {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
        margin-top: 14px;

        .item {
          display: flex;
          align-items: center;
          padding: 10px;
          background-color: #f8f8f8;
          border-radius: 4px;
          transition: all 0.1s ease-in-out;

          &:hover {
            cursor: pointer;
            background-color: #d5ebff;
          }

          .icon {
            width: 48px;
            height: 48px;
            margin-right: 10px;
          }

          .info {
            padding-left: 10px;

            .name {
              font-size: 14px;
              font-weight: bold;
            }

            .intro {
              margin-top: 4px;
              font-size: 14px;
              color: #666;
              line-height: 1.4em;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              line-clamp: 1;
              -webkit-box-orient: vertical;
              word-break: break-all;
              white-space: normal;
            }
          }
        }
      }
    }
  }
}
</style>
