<script lang="ts" setup>
import { CircleCheck } from '@element-plus/icons-vue';
import { ElMessageBox } from 'element-plus';
import SupportModelProducts from '@/components/SupportModelProducts/indexl.vue';

const wxSrc = computed(
  () => `${import.meta.env.VITE_WEB_BASE_API}/wwwroot/aihub/wx.png`,
);
// 微信群二维码
const wxGroupQD = `${import.meta.env.VITE_WEB_BASE_API}/wwwroot/aihub/jlq.png`;
const srcList = [
  wxGroupQD,
];
const pricing = [
  {
    name: 'VIP',
    price: 49.9,
    newPrice: 29.9,
    period: '每月',
    isPopular: false,
    features: [
      '基础+高级模型访问',
      'AI超级加速',
      '无限制使用',
      '售后微信群支持',
      '可用优惠券,使用后29.9元',
      '专属Api服务',
    ],
  },
  // {
  //   name: 'VIP + 邀请1人',
  //   price: 49.9,
  //   newPrice: 29.9,
  //   period: '每人每月',
  //   isPopular: true,
  //   features: [
  //     '需两人同时购买',
  //     '基础+高级模型访问',
  //     'AI超级加速',
  //     '无限制使用',
  //     '售后微信群支持',
  //     '专属Api服务',
  //   ],
  // },
  {
    name: 'VIP + 支持站长',
    price: 69.9,
    newPrice: 49.9,
    period: '每月',
    isPopular: false,
    features: [
      '基础+高级模型访问',
      'AI超级加速',
      '无限制使用',
      '售后微信群优先处理',
      '可用优惠券,使用后49.9元',
      '专属Api服务',

    ],
  },
];

const faqs = [
  {
    question: '意心AI是否真的“无限制”？',
    answer: '在日常合理使用范围内，我们不做次数限制。但如检测到滥用行为，将封号处理。',
  },
  {
    question: '是否支持退款？',
    answer: '我们支持良心售后，1天内可申请退款，请联系售后微信群或站长。',
  },
  {
    question: '平台是直连的吗？',
    answer: '是的，我们不是通过其他平台转发，而是与各大AI服务官方API直接对接。售后可查',
  },
  {
    question: '价格如此低？不会亏本吗？',
    answer: '是的，血亏，基本都是靠大家充值才能回点血，如没必要，建议不要经常使用高级模型，价格真的。。。太贵了',
  },
  {
    question: '我用这些高级模型和免费的模型有什么区别？',
    answer: '就比如，猴子和人类的区别，不是不能用，一杯咖啡钱，更好用，不香吗？',
  },
  {
    question: '我每次都用最贵的模型，越贵不是越好吗？',
    answer: '并不是的，得根据实际场景来，通常贵的模型带思考，返回时间也会较长，日常推荐使用mini',
  },
  {
    question: '后续会新增或者删除一些模型吗？',
    answer: '我们会根据各方面进行分析，后续有任何情况微信群内会反馈，最终解释说明由本站为主',
  },
  {
    question: '除了对话还有其他功能吗？',
    answer: '当然，目前只是第一期，后续图片、开放接口、ide集成等，都会持续更新上线！',
  },
];

function openContact() {
  ElMessageBox.alert(
    `
    <div class="text-center relative">
      <h3 class="text-lg font-bold mb-3">请扫码或搜索微信号添加站长微信<br>
      获取专属客服支持，完成充值</h3>
      <div class="mb-4 flex items-center justify-center space-x-2">
        <span class="font-semibold">站长微信账号：</span>
        <span class="text-blue-600 font-mono select-text" id="wechat-id">chengzilaoge520</span>
         <span class="cursor-pointer"  onclick="navigator.clipboard.writeText('chengzilaoge520').then(() => {  window.parent.ElMessage({
              message: '微信号已复制到剪贴板',
              type: 'success',
              duration: 2000,
            });})"
          title="点击复制">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 opacity-70 hover:opacity-100" viewBox="0 0 24 24" fill="currentColor">
            <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v16h14c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 18H8V7h11v16z"/>
          </svg>
        </span>


      </div>

      <div class="flex justify-center mb-4">
      <div>
      <h4>
      站长微信
</h4>
        <img
          src="${wxSrc.value}"
          class="w-50 h-70 border border-gray-200 rounded-lg shadow-md cursor-pointer hover:shadow-lg transition-transform hover:scale-105"
          onclick="document.getElementById('wechat-qrcode-fullscreen').style.display = 'flex'"
          alt="微信二维码"
        >
</div><div>
      <h4>
      微信交流群
</h4>
        <img
          src="${wxGroupQD}"
          class="w-50 h-70 border border-gray-200 rounded-lg shadow-md cursor-pointer hover:shadow-lg transition-transform hover:scale-105"
          onclick="document.getElementById('wx-group-qrcode-fullscreen').style.display = 'flex'"
          alt="微信二维码"
        >
</div>
      </div>

      <div class="text-sm text-gray-600">
        <p class="mb-1">请备注 <span class="inline-block bg-yellow-100 text-yellow-800 px-2 py-0.5 rounded text-xs">ai</span> 快速通过验证</p>
      </div>

      <!-- 全屏放大二维码 -->
      <div
        id="wechat-qrcode-fullscreen"
        style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.8); z-index:9999; justify-content:center; align-items:center;"
        onclick="this.style.display='none'"
      >
        <img
          src="${wxSrc.value}"
          style="max-width:90%; max-height:90%; border:8px solid white; border-radius:16px; box-shadow:0 0 40px rgba(255,255,255,0.2);"
        />
      </div>
      <div
        id="wx-group-qrcode-fullscreen"
        style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.8); z-index:9999; justify-content:center; align-items:center;"
        onclick="this.style.display='none'"
      >
        <img
          src="${wxGroupQD}"
          style="max-width:90%; max-height:90%; border:8px solid white; border-radius:16px; box-shadow:0 0 40px rgba(255,255,255,0.2);"
        />
      </div>


    </div>
    `,
    '联系站长',
    {
      confirmButtonText: '我知道了',
      dangerouslyUseHTMLString: true,
      customClass: 'wechat-message-box',
      callback: () => {
      },
    },
  );
}
</script>

<template>
  <div class="px-6 py-10 max-w-7xl mx-auto">
    <h1 class="text-4xl font-bold text-center mb-6" style="color: #444444">
      意心AI 订阅套餐
    </h1>
    <p class="text-center text-lg text-gray-600 mb-10">
      市面罕见直连站点 · 不限速 · 无套路
    </p>

    <div class="grid md:grid-cols-3 gap-6 flex justify-center">
      <el-card
        style="width: 400px;"
        v-for="(plan, index) in pricing"
        :key="index"
        class="rounded-2xl shadow hover:shadow-lg transition-all" :class="[plan.isPopular ? 'border-2 border-blue-500' : '']"
      >
        <div class="flex flex-col items-center text-center">
          <h2 class="text-2xl font-semibold mb-2">
            {{ plan.name }}
          </h2>
          <p class="text-3xl font-bold text-blue-600 mb-2" style="color: #E8CB96">
            <span>优惠后：</span>￥{{ plan.newPrice }}  <del style="color: #889F9F;font-size: 16px">￥{{ plan.price }}</del>
          </p>
          <p class="text-sm text-gray-500 mb-4">
            {{ plan.period }}
          </p>
          <el-divider />
          <ul class="text-left space-y-2 w-full min-h-200px">
            <li v-for="(feature, i) in plan.features" :key="i" class="flex items-start gap-2">
              <el-icon><CircleCheck /></el-icon>
              <span>{{ feature }}</span>
            </li>
          </ul>
          <el-button
            class="mt-6 w-full"
            type="primary"
            size="large"
            style="background: #D7BD8D;color: white;border: #191919"
            @click="openContact"
          >
            立即订阅
          </el-button>
        </div>
      </el-card>
    </div>

    <el-divider class="my-16">
      充值流程说明
    </el-divider>
    <el-card class="max-w-2xl mx-auto shadow-md rounded-2xl">
      <h3 class="text-xl font-semibold mb-4">
        如何充值 VIP
      </h3>
      <ol class="list-decimal list-inside space-y-2 text-gray-700">
        <li>注册意社区账号（手机验证码，如收不到可联系站长）</li>
        <li>添加站长微信，备注“ai”（现通微信联系站长，可直接获取优惠券！）</li>
        <li>完成充值后，请重新登录，即可解锁全部功能</li>
      </ol>
      <el-alert
        style="margin-top: 20px"
        class="mt-6"
        type="warning"
        title="请勿滥用，勿共享账号，系统将自动检测"
        show-icon
        :closable="false"
      />
    </el-card>

    <SupportModelProducts />

    <el-divider class="my-16">
      常见问题
    </el-divider>
    <el-collapse class="max-w-3xl mx-auto" accordion>
      <el-collapse-item
        v-for="(faq, index) in faqs"
        :key="index"
        :title="faq.question"
      >
        <p class="text-gray-700">
          {{ faq.answer }}
        </p>
      </el-collapse-item>
    </el-collapse>
    <el-divider class="my-16">
      加入群聊
    </el-divider>
    <el-collapse class="max-w-3xl mx-auto flex justify-center" accordion >
      <el-image
        style="width: 500px; height: auto;"
        :src="wxGroupQD"
        :zoom-rate="1.2"
        :max-scale="7"
        :min-scale="0.2"
        :preview-src-list="srcList"
        show-progress
        :initial-index="4"
        fit="cover"
      />
    </el-collapse>
  </div>
</template>

<style scoped>
.el-card {
  transition: transform 0.2s ease;
}
.el-card:hover {
  transform: scale(1.02);
}
.demo-image__error .image-slot {
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
</style>
