<template>
  <div style="background-color: rgba(250, 251, 253,1);">
    <div style="height: 600px; overflow: hidden;">
      <a-carousel :after-change="onChange" style="height: 100%;" autoplay>
        <template #prevArrow>
          <div class="custom-slick-arrow" style="left: 10px; z-index: 1">
            <left-circle-outlined />
          </div>
        </template>
        <template #nextArrow>
          <div class="custom-slick-arrow" style="right: 10px">
            <right-circle-outlined />
          </div>
        </template>
        <div v-for="item in bannerList" :key="item.id" class="banner-slide"> 
          <img :src="item.image_url" alt="" srcset="" width="100%" height="100%">
        </div>
      </a-carousel>
    </div>
    <div class="one">
      <div v-for="item in oneList" style="display: flex;justify-content: center;align-items: center;cursor: pointer;" @click="router.push(item.path)">
        <div style="margin-right: 10px;"><img :src="item.img" alt="" srcset="" width="50" height="50"></div>
        <div>
          <h3>{{ item.title }}</h3>
          <span>{{ item.description }}</span>
        </div>
      </div>
    </div>
    <div class="two">
      <div>
        <div>
          <div style="margin-bottom: 40px;">
            <div class="title">
              <span>高性价比的算力服务</span>
            </div>
            <div class="subtitle">
              高性价比+稳定性能，算力服务适配多场景，热门算力服务如下:
            </div>
          </div>

          <div class="list_card">
            <div v-for="(value, index) in source" style="padding: 0 10px;text-align: center;font-size: 16px;"
              :style="{ 'border-top': `3px solid ${listColor[index]}` }">
              <div class="name"
                style="font-size: 24px;font-weight: bold;padding: 20px;border-bottom: 1px solid #c9c9c9;text-align: center;">
                {{ value.gpu_type }}
              </div>
              <div class="price" style="margin: 30px 0;">
                <span style="font-size: 24px;font-weight: bold;color: #5b85fe;">¥{{ value.payOnTime }}</span>
                <span style="font-size: 12px;">/小时</span>
              </div>
              <div style="padding-bottom: 40px;line-height: 40px;">
                <!-- 修改这里：添加单位 -->
                <div>内存：{{ value.memory }}GB</div>
                <div>显存：{{ value.vram }}GB</div>
                <div>GPU：{{ value.gpu_num }}个</div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div style="margin-bottom: 40px;">
            <div class="title">
              <span>产品优势</span>
            </div>
            <div class="subtitle">
              按需租赁高算力，稳定省心更省成本
            </div>
          </div>
          <div class="avatary_list">
            <div class="avatary_item">
              <div>
                <div class="title" style="font-size: 28px;">海量高性能 GPU 集群算力</div>
                <div class="subtitle" style="text-align: left;font-size: 18px;line-height:30px;">搭载 NVIDIA A100/H100/H800 等高性能
                  GPU，拥有强悍算力与超高显存带宽，精准适配不同精度需求，大幅提升运算效率与资源利用率；同时优化稀疏矩阵运算，有效减少 AI 模型的冗余计算。</div>
              </div>
              <img src="@/assets/jimeng.png" alt="" srcset="" width="300" height="300">
            </div>
            <div class="avatary_item" style="margin-bottom: 50px;">
              <img src="@/assets/gpu.png" alt="" srcset="" width="300">
              <div>
                <div class="title" style="font-size: 28px;">算力灵活调度</div>
                <div class="subtitle" style="text-align: left;font-size: 18px;line-height:30px;">
                  本平台支持按需计费与包周期计费两种正式模式，适配短期突发算力需求与长期稳定部署场景。按需计费按实结算，避免资源浪费；包周期计费性价比更优，保障持续运算。用户可自主择选，兼顾成本与效率，助力业务高效推进。
                </div>
              </div>
            </div>
            <div class="avatary_item">
              <div>
                <div class="title" style="font-size: 28px;">低价高配 算力性价比超高</div>
                <div class="subtitle" style="text-align: left;font-size: 18px;line-height:30px;">
                算力性价比之王！花一半钱享翻倍算力，顶级硬件配置 + 灵活计费模式，无隐形消费。中小团队、初创企业无需负担高昂成本，轻松拥抱 AI 时代，高性价比之选。
                </div>
              </div>
              <img src="@/assets/jimeng2.png" alt="" srcset="" width="300" height="300px">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="three"></div>
    <div class="footer">
      <div class="footer_contain">
        <div>
          <div style="color: #000000;">服务热线:</div>
          <div style="font-size: 36px;font-weight: bold;padding: 20px 0;">400-110-6993</div>
          <div>邮箱:service@hzzxxd.com</div>
          <div>地址:江苏省南通市崇川区紫琅科技城3号楼</div>
        </div>
        <div>
          <div style="color: #000000;">快速导航</div>
          <div>算力中心</div>
          <div>云主机</div>
          <div>用户文档</div>
        </div>
        <div style="display: flex;align-items: center;gap: 60px;">
          <div style="display: flex;flex-direction: column;align-items: center;">
            <img src="@/assets/qr.jpg" alt="" srcset="" width="100">
            <div>公众号</div>
          </div>
          <div style="display: flex;flex-direction: column;align-items: center;">
            <img src="@/assets/qr.jpg" alt="" srcset="" width="100">
            <div>企业微信</div>
          </div>
        </div>
      </div>
      <div
        style="border-top: 1px solid #ebe4e4;height: 45px;text-align: center;line-height: 45px;color: #666666;font-size: 14px;">
        苏备案号20251124号</div>
    </div>
  </div>

</template>

<script lang="ts" setup>
import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue'
import { useRouter } from 'vue-router';
import { getBannerList, getGpuList, getAdvantage, getHotProduct } from '@/apis/home';
import one from '@/assets/1.png'
import two from '@/assets/2.png'
import three from '@/assets/3.png'
import firth from '@/assets/4.png'
import youhuiquan from '@/assets/youhuiquan-2.png'
import yaoqinghaoyou from '@/assets/yaoqinghaoyou-4.png'
import goumaijilu from '@/assets/goumaijilu.png'
import defaultBanner3 from '@/assets/12.png';
import defaultBanner4 from '@/assets/333.png';
import defaultBanner from '@/assets/333.png';
const router = useRouter();
const listColor = ref(['#7ed321', '#21d3c0', '#35a4de'])
const source = ref([])
const oneList = ref([
  {
    img: youhuiquan,
    title: '算力免费领',
    description: '完成认证/问卷获得算力券',
    path:'/active/newUser'
  },
  {
    img: yaoqinghaoyou,
    title: '邀约优算友',
    description: '邀请好友可获得算力券',
     path:'/active/invite'
  },
  {
    img: goumaijilu,
    title: '开业重磅福利',
    description: '购算力，享豪礼',
     path:'/active/newUser'
  }
])
const advantageList = ref([])
const bannerList = ref<any[]>([
  { id: 0, image_url: defaultBanner3 },
  { id: 1, image_url: defaultBanner4 }
]);

const onChange = (current: number) => {
  console.log(current);
};


// 请求轮播
const fetchBannerList = async () => {
  try {
    const res: any = await getBannerList();
    // 处理返回的数据
    if (res && Array.isArray(res) && res.length > 0) {
      const processedList = res.map((item: any, index: number) => {
        // 确保每个item都有id
        const processedItem = {
          id: item.id || index,
          image_url: item.image_url || defaultBanner
        };

        // 处理http协议问题
        if (processedItem.image_url && processedItem.image_url.startsWith('http://')) {
          processedItem.image_url = processedItem.image_url.replace('http://', 'https://');
        }

        return processedItem;
      });

      bannerList.value = processedList;
    } else {
      // API返回空数据或无效数据，使用默认图片
      bannerList.value = [{ id: 0, image_url: defaultBanner }];
    }
  } catch (error: any) {
    console.error('轮播图请求失败:', error);
    // 请求失败时使用默认图片
    bannerList.value = [{ id: 0, image_url: defaultBanner }];
  }
};

// 请求GPU列表
const getGPUList = async () => {
  try {
    // const res: any = await getGpuList();
    source.value = [
      { gpu_type: 'NVIDIA RTX 3090', payOnTime: 15.0, memory: 64, vram: 24, gpu_num: 1 },
      { gpu_type: 'NVIDIA A100', payOnTime: 25.0, memory: 128, vram: 40, gpu_num: 1 },
      { gpu_type: 'NVIDIA RTX 4090', payOnTime: 30.0, memory: 96, vram: 24, gpu_num: 1 }
    ];

  } catch (error: any) {
    console.error('GPU列表请求失败:', error);
  }
}

// 请求产品优势
const getAdvantageList = async () => {
  try {
    // const res: any = await getAdvantage();
    const list = [
      { title: '高性能算力', description: '采用最新一代GPU，提供强大计算能力，满足各种复杂任务需求。' },
      { title: '灵活计费模式', description: '支持按需付费和包月套餐，用户可根据实际需求选择最合适的计费方式。' },
      { title: '全球节点覆盖', description: '在多个地区设有数据中心，确保用户无论身处何地都能享受低延迟的服务体验。' },
      { title: '专业技术支持', description: '提供7x24小时技术支持，确保用户在使用过程中遇到的问题能够及时得到解决。' }
    ];

    // 给每个 item 添加 img 字段
    list.forEach((item: any, index: number) => {
      if (index === 0) {
        item.img = one;
      } else if (index === 1) {
        item.img = two;
      } else if (index === 2) {
        item.img = three;
      } else {
        item.img = firth;
      }
    });

    advantageList.value = list;
  } catch (error: any) {
    console.error('产品优势请求失败:', error);
  }
}




// fetchBannerList();
getGPUList();
getAdvantageList();

</script>
<style scoped lang="scss">
.banner-slide {
  width: 100%;
  height: 600px;
  // background: url('@/assets/banner2.png') no-repeat center / cover;
}

.one {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 30px 0;
  width: 1200px;
  margin: 0 auto;
  border-radius: 27px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);

  &>div {
    padding: 10;
    flex: 1;
    display: flex;

    align-items: center;

    & span {
      color: #666666
    }
  }
}

.two {
  // background-image: linear-gradient(to bottom, #eaf7fc, #f4fafc);
  padding-bottom: 80px;

  &>div {
    width: 1200px;
    margin: 0 auto;

    .title {
      font-size: 28px;
      font-weight: 700;
      text-align: center;
    }

    &>div:first-child {
      padding: 44px 0;
    }

    .subtitle {
      margin-top: 20px;
      color: rgb(153, 153, 153);
      text-align: center;
    }

    .list_card {
      margin-top: 30px;
      display: flex;
      justify-content: space-between;
      gap: 20px;

      &>div {
        flex: 1;
        background-color: #ffffff;
        line-height: 30px;
        transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
        /* 更长的过渡时间和不同的缓动函数 */
      }

      &>div:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }
    }

    .avatary_list {
      // display: grid;
      // grid-template-columns: repeat(2, 1fr);
      // gap: 50px;

      &>div {
        display: flex;
        // flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        gap: 100px;
        &>div{
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: flex-start;
        }
      }

      .title {
        color: #59b2f2;
        font-size: 18px;
        font-weight: bold;
        line-height: 30px;
        margin-top: 20px;
      }

      .subtitle {
        color: #666666;
      }
    }
  }

}

.three {
  height: 180px;
  background: url('@/assets/bottom.png') no-repeat center / 100% 100%;
}

.footer {
  height: 260px;
  background-color: #ffffff;
  width: 100%;

  .footer_contain {
    width: 1200px;
    margin: 0 auto;
    height: calc(100% - 45px);
    display: flex;
    justify-content: space-around;
    align-items: self-start;
    padding: 20px 0;

    &>div {
      line-height: 30px;
      color: #3a3939;
    }
  }
}

/* For demo */
</style>
