'use client';

import {memo, useEffect, useState} from 'react';
import {createStyles} from "antd-style";
import {Anchor, Button, Card, Image} from "antd";
import {RightCircleOutlined, LikeFilled, WechatFilled, HomeFilled, DribbbleSquareFilled, CopyFilled, MedicineBoxFilled, IeCircleFilled, IdcardFilled, HourglassFilled, InsuranceFilled} from "@ant-design/icons";
// import Link from "next/link";
import request from '@/app/api/request';
import Title from "@/app/(main)/discover/components/Title";

// const stData = {
//   "rmtj": [
//     {
//       id: '061',
//       name: "Kimi智能助手",
//       sessiontype: 2,
//       remark: "Kimi 智能助手，你的私人助理",
//       iconurl: "/images/applicationSets/kimi.png",
//       website: "https://kimi.moonshot.cn/kimiplus-square"
//     },
//     {
//       id: '062',
//       name: "通义千问",
//       sessiontype: 2,
//       remark: "通义千问是阿里云的大模型，类似ChatGPT，专注响应人类指令，提高生活效率与体验",
//       iconurl: "/images/applicationSets/tyqw.png",
//       website: "https://tongyi.aliyun.com"
//     },
//     {
//       id: '063',
//       name: "文心一言",
//       sessiontype: 2,
//       remark: "文心一言是百度推出的基于文心大模型的AI对话互动工具",
//       iconurl: "/images/applicationSets/wxyy.png",
//       website: "https://yiyan.baidu.com"
//     },
//     {
//       id: '064',
//       name: "讯飞写作",
//       sessiontype: 2,
//       remark: "讯飞写作基于讯飞星火认知大模型能力，支持多场景写作，提供会议纪要，求职简历，心得体会，入党申请，论文大纲，品宣文案，PPT 大纲等各类写作模板",
//       iconurl: "/images/applicationSets/xfxz.png",
//       website: "https://huixie.iflyrec.com/"
//     },
//     {
//       id: '065',
//       name: "即梦",
//       sessiontype: 2,
//       remark: "即梦Dreamina是一款结合了AI技术的在线创作平台，它通过图片生成、智能画布和视频生成等功能，帮助用户将创意转化为视觉作品。",
//       iconurl: "/images/applicationSets/jm.png",
//       website: "https://jimeng.jianying.com/"
//     },
//     {
//       id: '066',
//       name: "可灵大模型",
//       sessiontype: 2,
//       remark: "可灵大模型是一款具备强大视频生成能力的自研大模型，采用先进的技术实现长达 2 分钟视频生成、模拟物理世界特性、概念组合能力等，可生成电影级画面。",
//       iconurl: "/images/applicationSets/kldmx.png",
//       website: "https://kling.kuaishou.com/"
//     },
//     {
//       id: '067',
//       name: "飞书智能伙伴",
//       sessiontype: 2,
//       remark: "飞书智能伙伴是一款智能助手产品，可以为用户选择自己喜欢的形象、设置姓名，并记忆用户在飞书上的行为，支持部署在飞书上的业务应用，实现跨系统任务完成和统一使用体验。",
//       iconurl: "/images/applicationSets/fsznhb.png",
//       website: "https://www.feishu.cn/product/ai_companion"
//     },
//     {
//       id: '068',
//       name: "硅基智能",
//       sessiontype: 2,
//       remark: "硅基智能是一款数字化虚拟人与 AI 技术相结合的产品，主要应用于智能交互领域。",
//       iconurl: "/images/applicationSets/gjzn.png",
//       website: "https://www.guiji.ai/"
//     },
//   ],
//   "chat": [
//     {
//       id: '071',
//       name: "Kimi智能助手",
//       sessiontype: 2,
//       remark: "Kimi 智能助手，你的私人助理",
//       iconurl: "/images/applicationSets/kimi.png",
//       website: "https://kimi.moonshot.cn/kimiplus-square"
//     },
//     {
//       id: '072',
//       name: "通义千问",
//       sessiontype: 2,
//       remark: "通义千问是阿里云的大模型，类似ChatGPT，专注响应人类指令，提高生活效率与体验",
//       iconurl: "/images/applicationSets/tyqw.png",
//       website: "https://tongyi.aliyun.com"
//     },
//     {
//       id: '073',
//       name: "文心一言",
//       sessiontype: 2,
//       remark: "文心一言是百度推出的基于文心大模型的AI对话互动工具",
//       iconurl: "/images/applicationSets/wxyy.png",
//       website: "https://yiyan.baidu.com"
//     },
//     {
//       id: '074',
//       name: "豆包",
//       sessiontype: 2,
//       remark: "豆包是一款智能聊天机器人，能够与用户进行自然语言交互，提供各种聊天话题，包括天气、新闻、笑话、音乐等。",
//       iconurl: "/images/applicationSets/db.png",
//       website: "https://www.doubao.com/chat"
//     },
//     {
//       id: '075',
//       name: "讯飞星火认知大模型",
//       sessiontype: 2,
//       remark: "科大讯飞推出的类ChatGPT的讯飞星火认知大模型",
//       iconurl: "/images/applicationSets/xfxhrz.png",
//       website: "https://xinghuo.xfyun.cn"
//     },
//     {
//       id: '076',
//       name: "商量SenseChat",
//       sessiontype: 2,
//       remark: "商量SenseChat是商汤科技的大语言模型，具备语言理解与生成能力，像ChatGPT可解复杂问题，定制化建议，辅助一流文本创作，并不断进化",
//       iconurl: "/images/applicationSets/senseChat.png",
//       website: "https://chat.sensetime.com/wb/chat"
//     },
//     {
//       id: '077',
//       name: "智谱清言",
//       sessiontype: 2,
//       remark: "智谱清言是一款基于ChatGLM2模型开发的人工智能应用，具备内容创作、信息归纳总结等能力",
//       iconurl: "/images/applicationSets/zpqy.png",
//       website: "https://chatglm.cn"
//     },
//     {
//       id: '078',
//       name: "360智脑",
//       sessiontype: 2,
//       remark: "360智脑是360公司推出的中文版本ChatGPT，它采用先进的机器学习和自然语言处理技术，可以进行高度准确和流畅的中文对话",
//       iconurl: "/images/applicationSets/360zn.png",
//       website: "https://www.so.com/zt/invite.html"
//     },
//     {
//       id: '079',
//       name: "Chatbox",
//       sessiontype: 2,
//       remark: "Chatbox是一个易于使用的人工智能解决方案，支持多平台，帮助提升工作和学习效率",
//       iconurl: "/images/applicationSets/chatBox.png",
//       website: "https://chatboxai.app/zh"
//     },
//   ],
//   "writing": [
//     {
//       id: '101',
//       name: "讯飞写作",
//       sessiontype: 2,
//       remark: "讯飞写作基于讯飞星火认知大模型能力，支持多场景写作，提供会议纪要，求职简历，心得体会，入党申请，论文大纲，品宣文案，PPT 大纲等各类写作模板",
//       iconurl: "/images/applicationSets/xfxz.png",
//       website: "https://huixie.iflyrec.com/"
//     },
//     {
//       id: '102',
//       name: "秘塔写作猫",
//       sessiontype: 2,
//       remark: "秘塔写作猫是一款集AI写作、多人协作、文本校对、改写润色、自动配图等功能为一体的AI Native内容创作平台。",
//       iconurl: "/images/applicationSets/mtxzm.png",
//       website: "https://xiezuocat.com/"
//     },
//     {
//       id: '103',
//       name: "智学AI写作",
//       sessiontype: 2,
//       remark: "智学AI是款一键生成原创论文的一站式论文服务网站。致力于解决论文写作过程中的各种问题",
//       iconurl: "/images/applicationSets/zxAIxz.png",
//       website: "https://www.chackai.cn/"
//     },
//     {
//       id: '104',
//       name: "YOO必优科技-AI写作",
//       sessiontype: 2,
//       remark: "AI写作，原创内容，写作神器-必优科技官网",
//       iconurl: "/images/applicationSets/YOO.png",
//       website: "https://www.yoo-ai.com/"
//     },
//     {
//       id: '105',
//       name: "晓语台",
//       sessiontype: 2,
//       remark: "晓语台官网,助力高效文本创作的AI平台",
//       iconurl: "/images/applicationSets/xyt.png",
//       website: "https://www.xiaoyutai.com/"
//     },
//     {
//       id: '106',
//       name: "行止AI",
//       sessiontype: 2,
//       remark: "行止AI官网,多功能的人工智能生成内容平台",
//       iconurl: "/images/applicationSets/xzAI.png",
//       website: "https://ai.168096.com/web/"
//     },
//     {
//       id: '107',
//       name: "红薯通AI",
//       sessiontype: 2,
//       remark: "红薯通AI，小红书内容创作神器",
//       iconurl: "/images/applicationSets/hst.png",
//       website: "https://www.hongshutong.com/"
//     },
//   ],
//   "conversation": [
//     {
//       id: '131',
//       name: "文心一格",
//       sessiontype: 2,
//       remark: "文心一格，AI艺术和创意辅助平台，依托飞桨、文心大模型的技术创新推出的“AI作画”产品，可轻松驾驭多种风格，人人皆可“一语成画”",
//       iconurl: "/images/applicationSets/wxyy.png",
//       website: "https://yige.baidu.com/"
//     },
//     {
//       id: '132',
//       name: "无界AI",
//       sessiontype: 2,
//       remark: "无界 AI 是一款集 prompt 搜索、AI 图库、AI 创作、AI 广场、词 / 图等功能于一体的 AI 创作平台。",
//       iconurl: "/images/applicationSets/wjAI.png",
//       website: "https://www.wujieai.com/"
//     },
//     {
//       id: '133',
//       name: "即梦",
//       sessiontype: 2,
//       remark: "即梦Dreamina是一款结合了AI技术的在线创作平台，它通过图片生成、智能画布和视频生成等功能，帮助用户将创意转化为视觉作品。",
//       iconurl: "/images/applicationSets/jm.png",
//       website: "https://jimeng.jianying.com/"
//     },
//     {
//       id: '134',
//       name: "LiblibAI",
//       sessiontype: 2,
//       remark: "LiblibAI是一个中国领先的AI创作平台,提供强大的AI创作能力,帮助创作者实现创意。",
//       iconurl: "/images/applicationSets/LiblibAI.png",
//       website: "https://www.liblib.art/"
//     },
//     {
//       id: '135',
//       name: "触手AI",
//       remark: "触手 AI 绘画专业版是一款面向插画师、漫画师、设计师等专业用户的国产 AI 绘图平台。",
//       iconurl: "/images/applicationSets/csAI.png",
//       website: "https://www.acgnai.art/home"
//     },
//   ],
//   "video": [
//     {
//       id: '161',
//       name: "可灵大模型",
//       sessiontype: 2,
//       remark: "可灵大模型是一款具备强大视频生成能力的自研大模型，采用先进的技术实现长达 2 分钟视频生成、模拟物理世界特性、概念组合能力等，可生成电影级画面。",
//       iconurl: "/images/applicationSets/kldmx.png",
//       website: "https://kling.kuaishou.com/"
//     },
//     {
//       id: '162',
//       name: "即梦",
//       sessiontype: 2,
//       remark: "即梦Dreamina是一款结合了AI技术的在线创作平台，它通过图片生成、智能画布和视频生成等功能，帮助用户将创意转化为视觉作品。",
//       iconurl: "/images/applicationSets/jm.png",
//       website: "https://jimeng.jianying.com/"
//     },
//     {
//       id: '163',
//       name: "Moki",
//       sessiontype: 2,
//       remark: "Moki是美图公司推出的AI短片创作工具，专注于辅助视频创作者打造动画短片、网文短剧、故事绘本和音乐视频（MV）。",
//       iconurl: "/images/applicationSets/moki.png",
//       website: "https://www.moki.cn/home"
//     },
//     {
//       id: '164',
//       name: "一帧秒创",
//       sessiontype: 2,
//       remark: "一帧秒创是基于秒创AIGC引擎的智能AI内容生成平台，包含AI图文转视频、AI作画创作平台AI帮写",
//       iconurl: "/images/applicationSets/yzmc.png",
//       website: "https://aigc.yizhentv.com/"
//     },
//     {
//       id: '165',
//       name: "万彩AI",
//       remark: "一款强大的AI内容创作工具合集，除了提供AI智能写作支持之外，还集成了AI换脸、照片数字人制作和AI短视频制作等强大的AI生成内容功能。",
//       iconurl: "/images/applicationSets/wcAI.png",
//       website: "https://ai.kezhan365.com/"
//     },
//     {
//       id: '166',
//       name: "闪剪智能",
//       remark: "闪剪智能是全球超2亿用户都在用的AI视频创作平台，旗下有闪剪、逗拍、趣推、字说、Vinkle等软件",
//       iconurl: "/images/applicationSets/sjzn.png",
//       website: "https://corp.shanjian.tv/"
//     },
//   ],
//   "office": [
//     {
//       id: '171',
//       name: "通义听悟",
//       sessiontype: 2,
//       remark: "阿里云通义听悟是聚焦音视频内容的工作学习 AI 助手，依托大模型，帮助用户记录、整理和分析音视频内容。通过实时语音转文字、多语言同步翻译，提供高效学习体验。",
//       iconurl: "/images/applicationSets/tytw.png",
//       website: "https://tingwu.aliyun.com/"
//     },
//     {
//       id: '172',
//       name: "WPS AI",
//       sessiontype: 2,
//       remark: "WPS AI是一款智能办公助手，能够帮助用户完成文本改写、续写、生成PPT、数据处理、语音交互等多项功能。",
//       iconurl: "/images/applicationSets/WPS.png",
//       website: "https://ai.wps.cn/"
//     },
//     {
//       id: '173',
//       name: "星火文档问答",
//       sessiontype: 2,
//       remark: "讯飞星火知识库文档问答是科大讯飞基于讯飞星火大模型和星火知识库搭建的文档问答服务，能够高效检索文档信息，准确回答专业问题。",
//       iconurl: "/images/applicationSets/xhwdwd.png",
//       website: "https://chatdoc.xfyun.cn/"
//     },
//     {
//       id: '174',
//       name: "飞书智能伙伴",
//       sessiontype: 2,
//       remark: "飞书智能伙伴是一款智能助手产品，可以为用户选择自己喜欢的形象、设置姓名，并记忆用户在飞书上的行为，支持部署在飞书上的业务应用，实现跨系统任务完成和统一使用体验。",
//       iconurl: "/images/applicationSets/fsznhb.png",
//       website: "https://www.feishu.cn/product/ai_companion"
//     },
//     {
//       id: '175',
//       name: "TreeMind 树图",
//       sessiontype: 2,
//       remark: "TreeMind 树图是新一代思维导图软件，提供便捷的在线思维导图制作工具。",
//       iconurl: "/images/applicationSets/treeMind.png",
//       website: "https://shutu.cn/"
//     },
//     {
//       id: '176',
//       name: "亿图脑图",
//       sessiontype: 2,
//       remark: "亿图脑图是一款多平台思维导图软件，可用于 Windows，Mac 和 Linux 等桌面环境，也可以在线使用或在苹果，安卓等移动端上使用。",
//       iconurl: "/images/applicationSets/ytnt.png",
//       website: "https://www.edrawsoft.cn/mindmaster/ad-mindmaster6-1.html"
//     },
//   ],
//   "digitalPeople": [
//     {
//       id: '181',
//       name: "硅基智能",
//       sessiontype: 2,
//       remark: "硅基智能是一款数字化虚拟人与 AI 技术相结合的产品，主要应用于智能交互领域。",
//       iconurl: "/images/applicationSets/gjzn.png",
//       website: "https://www.guiji.ai/"
//     },
//     {
//       id: '182',
//       name: "怪兽ai数字人",
//       sessiontype: 2,
//       remark: "怪兽AI数字人提供2D数字人和3D数字人的商业应用，同时提供共享、定制和克隆数字人形象，以及真人声音克隆等身份制作服务。",
//       iconurl: "/images/applicationSets/ksAIszr.png",
//       website: "https://www.guaishouai.com/"
//     },
//     {
//       id: '183',
//       name: "奇妙问",
//       sessiontype: 2,
//       remark: "奇妙问官网：开启数字人3.0时代。",
//       iconurl: "/images/applicationSets/qmw.png",
//       website: "https://ai.weta365.com/"
//     },
//     {
//       id: '184',
//       name: "工作数字人",
//       sessiontype: 2,
//       remark: "工作数字人官网,开启高效工作办公之旅",
//       iconurl: "/images/applicationSets/gzszr.png",
//       website: "https://workbrain.cn/"
//     },
//   ],
//   "education": [
//     {
//       id: '191',
//       name: "星火语伴",
//       sessiontype: 2,
//       remark: "星火语伴APP，一款专为英语学习者打造的学习伙伴",
//       iconurl: "/images/applicationSets/xhyb.png",
//       website: "https://www.xfxuexi.com/#/aiTalk"
//     },
//     {
//       id: '192',
//       name: "Masterly ai",
//       sessiontype: 2,
//       remark: "Masterlyai是一个雅思备考助手，口语写作练习",
//       iconurl: "/images/applicationSets/MasterlyAI.png",
//       website: "https://www.masterlyai.com/"
//     },
//     {
//       id: '193',
//       name: "TalkAI",
//       sessiontype: 2,
//       remark: "TalkAI是一款专为想要学习语言的人打造的学习助手，AI练口语，支持超过60种语言。",
//       iconurl: "/images/applicationSets/TalkAI.png",
//       website: "https://ttalkai.com/"
//     },
//     {
//       id: '194',
//       name: "FeelRead 飞阅",
//       sessiontype: 2,
//       remark: "一款微信生态内的AI Reading Copilot 小程序，互动式阅读助手，可与文对话。AI自动分析&阅读在线文章，与文档PDF/Word。",
//       iconurl: "/images/applicationSets/FeelRead.png",
//       website: "https://app.jiajiaqun.cn/"
//     },
//   ],
//   "programming": [
//     {
//       id: '121',
//       name: "文心快码",
//       sessiontype: 2,
//       remark: "码随心动，快人一步，更懂你的智能代码助手",
//       iconurl: "/images/applicationSets/wxyy.png",
//       website: "https://comate.baidu.com/zh"
//     },
//     {
//       id: '122',
//       name: "通义灵码",
//       sessiontype: 2,
//       remark: "灵动指间，快码加编，你的智能编码助手。基于通义大模型，提供代码智能生成、研发智能问答能力",
//       iconurl: "/images/applicationSets/tylm.png",
//       website: "https://tongyi.aliyun.com/lingma/"
//     },
//     {
//       id: '123',
//       name: "codeFuse",
//       sessiontype: 2,
//       remark: "codeFuse 是一个能够辅助开发者进行代码补全、添加注释、解释代码等功能的插件。",
//       iconurl: "/images/applicationSets/codeFuse.png",
//       website: "https://codefuse.alipay.com/welcome/product"
//     },
//     {
//       id: '124',
//       name: "星火飞码 iFlyCode",
//       sessiontype: 2,
//       remark: "iFlyCode智能编程助手是一款基于讯飞星火认知大模型的智能编程工具。它能够智能生成代码、解释代码、纠错代码、进行单元测试以及提供智能问答功能。",
//       iconurl: "/images/applicationSets/iFlyCode.png",
//       website: "https://iflycode.xfyun.cn/index"
//     },
//     {
//       id: '125',
//       name: "天工智码 SkyCode",
//       sessiontype: 2,
//       remark: "天工智码 SkyCode 是一款 AI 代码生成工具，支持各种主流编程语言，助力开发人员更快更好的编码。",
//       iconurl: "/images/applicationSets/SkyCode.png",
//       website: "https://sky-code.singularity-ai.com/index.html"
//     },
//     {
//       id: '126',
//       name: "CodeArts Snap",
//       sessiontype: 2,
//       remark: "CodeArts Snap是华为云自研的基于盘古研发大模型的智能开发助手。",
//       iconurl: "/images/applicationSets/CodeArtsSnap.png",
//       website: "https://www.huaweicloud.com/product/codeartside/snap.html"
//     },
//     {
//       id: '127',
//       name: "Fitten Code",
//       sessiontype: 2,
//       remark: "Fitten Code是一个GPT驱动的代码生成和完成工具，支持多种语言：Python、Javascript、Typescript、Java等。",
//       iconurl: "/images/applicationSets/FittenCode.png",
//       website: "https://code.fittentech.com/"
//     },
//   ],
//   "audio": [
//     {
//       id: '151',
//       name: "魔音工坊",
//       sessiontype: 2,
//       remark: "魔音工坊是一款功能强大的在线智能配音工具,能够快速高效地实现文字到语音的转换。它拥有强大的语音合成技术,提供真人录音质量的配音效果。",
//       iconurl: "/images/applicationSets/mygf.png",
//       website: "https://www.moyin.com/"
//     },
//     {
//       id: '152',
//       name: "天工SkyMusic",
//       sessiontype: 2,
//       remark: "基于昆仑万维「天工3.0」超级大模型打造的AI音乐生成大模型「天工SkyMusic」，支持高质量AI音乐生成、人声合成、歌词段落控制、多种音乐风格和音乐智能表达等功能。",
//       iconurl: "/images/applicationSets/SkyMusic.png",
//       website: "https://home.tiangong.cn/downloadGuide"
//     },
//     {
//       id: '153',
//       name: "讯飞开放平台",
//       sessiontype: 2,
//       remark: "科大讯飞推出的移动互联网智能交互平台，为开发者免费提供：涵盖语音能力增强型SDK，一站式人机智能语音交互解决方案，专业全面的移动应用分析",
//       iconurl: "/images/applicationSets/xfkfpt.png",
//       website: "https://www.xfyun.cn/"
//     },
//     {
//       id: '154',
//       name: "依图语音开放平台",
//       sessiontype: 2,
//       remark: "依图语音开放平台",
//       iconurl: "/images/applicationSets/ytyykfpt.png",
//       website: "https://speech.yitutech.com/"
//     },
//     {
//       id: '155',
//       name: "REECHO 睿声",
//       sessiontype: 2,
//       remark: "REECHO.AI 睿声是一个超拟真的人工智能语音克隆平台。用户可以上传语音样本,系统利用深度学习技术进行语音克隆,生成质量极高的 AI 语音,可以实现不同人物的语音风格转换。",
//       iconurl: "/images/applicationSets/REECHO.png",
//       website: "https://www.reecho.cn/"
//     },
//     {
//       id: '156',
//       name: "NovaMSS",
//       sessiontype: 2,
//       remark: "NovaMSS是一款基于最顶级的AI模型调优后的新一代音乐源分离工具，可以一键提取伴奏、人声、贝斯、鼓点、分离音轨等。",
//       iconurl: "/images/applicationSets/NovaMSS.png",
//       website: "https://novamss.com/"
//     },
//   ]
// }

const stList = [
  {
    date: '2024-02-03',
    des: "擅长产品功能分析与用户价值观广告文案创作。",
    id: '1',
    title: 'XXX助手',
  },
]

const useStyles = createStyles(({css}) => ({
  actionItem: css`
    height: 56px;
    line-height: 56px;
    margin-right: 30px
  `,
  actionItemIcon: css`
    margin-right: 15px;
    margin-left: 28px;
  `,
  actionSpan: css`
    color: #2E62FF;
  `,
  avImg: css`
    width: 55px;
    height: 55px;
    border-radius: 16px
  `,
  btn: css`
    width: 136px;
    padding: 0px 2px;
    margin-left: 30px;
    border-radius: 41px;
    border-color: #C2C2C2 !important;
    color: #666 !important;
  `,
  card: css`
    width: 23%;
    margin: 32px 1% 0;
    display: inline-block;
  `,
  cardCotain: css`
   margin-top: -10px;
   font-size: 12px;
   color: #999
  `,
  cardMeta: css`
    height: 80px
  `,
  container: css`
   marginTop: -20px
  `,
  containerTitle: css`
   font-size: 18px
  `,
  desImg: css`
    width: 28px
  `,
  desText: css`
    font-size: 12px;
    color: #909090;
  `,
  egiht: css`
    color: #5BD941
  `,
  fif: css`
    color: #FF4D4D
  `,
  first: css`
    color: #FFAD01
  `,
  four: css`
    color: #FF9B06
  `,
  leftTitle: css`
    font-size: 20px;
    margin: 0 1%;
    padding-top: 20px;
  `,
  nine: css`
    color: #07D7F7
  `,
  rightCo: css`
    font-size: 16px;
    margin-left: 30px;
    vertical-align: middle;
  `,
  sec: css`
    color: #5BD941
  `,
  seleEight: css`
    background-color: #D1FFE7;
    color: #5BD941;
  `,
  seleFif: css`
    background-color: #FFEBEB;
    color: #FF4D4D;
  `,
  seleFir: css`
    background-color: #FFF3D9;
    color: #FFAD01;
  `,
  seleFou: css`
    background-color: #FFFACD;
    color: #FF9B06;
  `,
  seleNine: css`
    background-color: #D1FFE7;
    color: #07D7F7;
  `,
  seleSec: css`
    background-color: #DCF9D6;
    color: #5BD941;
  `,
  seleSeve: css`
    background-color: #D8FAFF;
    color: #0EDFFF;
  `,
  seleSix: css`
    background-color: #E3E9FF;
    color: #003BFF;
  `,
  seleTen: css`
    background-color: #FCEBFF;
    color: #E138FF;
  `,
  seleThd: css`
    background-color: #E3E9FF;
    color: #003BFF;
  `,
  selectBtn: css`
    background-color: #3B6FFF !important;
    color: #fff !important;
  `,
  seven: css`
    color: #0EDFFF
  `,
  six: css`
    color: #003BFF
  `,
  ten: css`
    color: #E138FF
  `,
  thd: css`
    color: #003BFF
  `,
  title: css`
    font-size: 18px
  `,
  topBtn: css`
    padding: 10px 0px;
    background: rgba(239, 243, 255, 0.22);
    box-sizing: border-box;
    border-width: 0px 0px 2px 0px;
    border-style: solid;
    border-color: rgba(146, 154, 178, 0.2392);
  `,
  verImg: css`
    height: 2px;
    width: 80%;
    background-color: #DFE4FF;
    display: inline-block
  `,
  zsds: css`
    display: inline-block;
    margin: 5px
  `,
  zsdsCardImg: css`
    width: 50px;
    height: 50px;
    border-radius: 50px;
    margin-left: 5px;
    line-height: 40px;
    text-align: center;
    vertical-align: middle;
    border: 2px solid #ddd;
    display: inline-block
  `,
}))

const getContainer = () => document.querySelector("#fileRight")
const handleClickCard = (e) => {
  window.open(e.website, '_blank');
}

const onClickAncho = (e) => {
  e.preventDefault()
  // let srcolls = document.querySelector(link.href)
  // srcolls.scrollIntoView({
  //   behavior: 'smooth',
  //   block: 'start'
  // })
}
const ApplicationSet = memo(() => {
  const { styles, cx } = useStyles()
  const [val, setVal] = useState("AI")
  const [achVal, setAchVal] = useState("#rmtj")
  const [stData, setStData] = useState("")
  useEffect(() => {
    const fetchData = () => {
        request({
            method: "get",
            url: "/flxai/api/robot/apptoolsset/getAllAiTools",
        }).then((response) => {
          if (response.code === 0) {
            // console.log(response,"2222")
            setStData(response.data);
          }
        }).catch(error => {
          console.error('Error fetching data:', error);
        })
    };
    fetchData();
  }, []); // 空数组[]意味着仅在组件挂载时调用一次

  const handleClick = (e) => {
    setVal(e)
  }

  const onChangeAnchor = (e) => {
    setAchVal(e)
  }

  return (
    <>
      <div className={cx(styles.topBtn)}>
        <Button className={cx(styles.btn, val==='AI'&&styles.selectBtn)} onClick={() => handleClick("AI")}>AI应用集</Button>
        <Button className={cx(styles.btn, val==='tj'&&styles.selectBtn)} onClick={() => handleClick("tj")}>推荐工具</Button>
      </div>
      <div style={{ display: 'flex', overflowY: 'scroll' }}>
        {val === 'AI' ?
          <>
          <Anchor
            affix={false}
            getContainer={getContainer}
            items={[
              {
                href: '#rmtj',
                key: '1',
                title: <div className={cx(styles.actionItem, achVal === '#rmtj' && styles.seleFir)}><LikeFilled
                  className={cx(styles.actionItemIcon, styles.first)}/>热门推荐</div>,
              },
              {
                href: '#ailt',
                key: '2',
                title: <div className={cx(styles.actionItem, achVal === '#ailt' && styles.seleSec)}><WechatFilled
                  className={cx(styles.actionItemIcon, styles.sec)}/>AI聊天</div>,
              },
              {
                href: '#aixz',
                key: '3',
                title: <div className={cx(styles.actionItem, achVal === '#aixz' && styles.seleThd)}><CopyFilled
                  className={cx(styles.actionItemIcon, styles.thd)}/>AI写作</div>,
              },
              {
                href: '#aihh',
                key: '4',
                title: <div className={cx(styles.actionItem, achVal === '#aihh' && styles.seleFou)}>
                  <DribbbleSquareFilled className={cx(styles.actionItemIcon, styles.four)}/>AI绘画</div>,
              },
              {
                href: '#aisp',
                key: '5',
                title: <div className={cx(styles.actionItem, achVal === '#aisp' && styles.seleFif)}><HomeFilled
                  className={cx(styles.actionItemIcon, styles.fif)}/>AI视频</div>,
              },
              {
                href: '#aibg',
                key: '6',
                title: <div className={cx(styles.actionItem, achVal === '#aibg' && styles.seleSix)}><HourglassFilled
                  className={cx(styles.actionItemIcon, styles.six)}/>AI办公</div>,
              },
              {
                href: '#aiszr',
                key: '7',
                title: <div className={cx(styles.actionItem, achVal === '#aiszr' && styles.seleSeve)}><IdcardFilled
                  className={cx(styles.actionItemIcon, styles.seven)}/>AI数字人</div>,
              },
              {
                href: '#aijy',
                key: '8',
                title: <div className={cx(styles.actionItem, achVal === '#aijy' && styles.seleEight)}><IeCircleFilled
                  className={cx(styles.actionItemIcon, styles.egiht)}/>AI教育</div>,
              },
              {
                href: '#aibc',
                key: '9',
                title: <div className={cx(styles.actionItem, achVal === '#aibc' && styles.seleNine)}><InsuranceFilled
                  className={cx(styles.actionItemIcon, styles.nine)}/>AI编程</div>,
              },
              {
                href: '#aiyp',
                key: '10',
                title: <div className={cx(styles.actionItem, achVal === '#aiyp' && styles.seleTen)}><MedicineBoxFilled
                  className={cx(styles.actionItemIcon, styles.ten)}/>AI音频</div>,
              },
            ]}
            onChange={(e) => onChangeAnchor(e)}
            onClick={onClickAncho}
            style={{ background: "#fff", width: '200px' }}
          />

          <div id="fileRight" style={{height: "100vh", overflowY: 'scroll', width: "calc(100vw - 300px)"}}>
            <div id="rmtj">
              <div className={cx(styles.leftTitle)}>热门推荐</div>
              <div>
                {
                  stData['rmtj'] && stData['rmtj'].map((e) => {
                    return (
                      <Card
                        actions={[<span className={styles.actionSpan} key={e.id} onClick={() => handleClickCard(e)}>立即前往<RightCircleOutlined
                          className={styles.rightCo}/></span>]}
                        className={cx(styles.card)}
                        key={e.id}
                      >
                        <Card.Meta
                          avatar={<Image alt="" className={styles.avImg} preview={false} src={e.iconurl}/>}
                          className={styles.cardMeta}
                          description={<span className={styles.desText}>{e.remark}</span>}
                          title={<span className={styles.title}>{e.name}</span>}
                        />
                      </Card>
                    )
                  })
                }
              </div>
            </div>
            <div id="ailt">
              <div className={cx(styles.leftTitle)}>AI聊天</div>
              <div>
                {
                  stData['chat'] && stData['chat'].map((e) => {
                    return (
                      <Card
                        actions={[<span  className={styles.actions} key={e.id} onClick={() => handleClickCard(e)}>立即前往<RightCircleOutlined className={styles.rightCo}/></span>]}
                        className={cx(styles.card)}
                        key={e.id}
                      >
                        <Card.Meta
                          avatar={<Image alt="" className={styles.avImg} preview={false} src={e.iconurl}/>}
                          className={styles.cardMeta}
                          description={<span className={styles.desText}>{e.remark}</span>}
                          title={<span className={styles.title}>{e.name}</span>}
                        />
                      </Card>
                    )
                  })
                }
              </div>
            </div>
            <div id="aixz">
              <div className={cx(styles.leftTitle)}>AI写作</div>
              <div>
                {
                  stData['writing'] && stData['writing'].map((e) => {
                    return (
                      <Card
                        actions={[<span className={styles.actionSpan} key={e.id} onClick={() => handleClickCard(e)}>立即前往<RightCircleOutlined
                          className={styles.rightCo}/></span>]}
                        className={cx(styles.card)}
                        key={e.id}
                      >
                        <Card.Meta
                          avatar={<Image alt="" className={styles.avImg} preview={false} src={e.iconurl}/>}
                          className={styles.cardMeta}
                          description={<span className={styles.desText}>{e.remark}</span>}
                          title={<span className={styles.title}>{e.name}</span>}
                        />
                      </Card>
                    )
                  })
                }
              </div>
            </div>
            <div id="aihh">
              <div className={cx(styles.leftTitle)}>AI绘画</div>
              <div>
                {
                  stData['conversation'] && stData['conversation'].map((e) => {
                    return (
                      <Card
                        actions={[<span className={styles.actionSpan} key={e.id} onClick={() => handleClickCard(e)}>立即前往<RightCircleOutlined
                          className={styles.rightCo}/></span>]}
                        className={cx(styles.card)}
                        key={e.id}
                      >
                        <Card.Meta
                          avatar={<Image alt="" className={styles.avImg} preview={false} src={e.iconurl}/>}
                          className={styles.cardMeta}
                          description={<span className={styles.desText}>{e.remark}</span>}
                          title={<span className={styles.title}>{e.name}</span>}
                        />
                      </Card>
                    )
                  })
                }
              </div>
            </div>
            <div id="aisp">
              <div className={cx(styles.leftTitle)}>AI视频</div>
              <div>
                {
                  stData['video'] && stData['video'].map((e) => {
                    return (
                      <Card
                        actions={[<span className={styles.actionSpan} key={e.id} onClick={() => handleClickCard(e)}>立即前往<RightCircleOutlined
                          className={styles.rightCo}/></span>]}
                        className={cx(styles.card)}
                        key={e.id}
                      >
                        <Card.Meta
                          avatar={<Image alt="" className={styles.avImg} preview={false} src={e.iconurl}/>}
                          className={styles.cardMeta}
                          description={<span className={styles.desText}>{e.remark}</span>}
                          title={<span className={styles.title}>{e.name}</span>}
                        />
                      </Card>
                    )
                  })
                }
              </div>
            </div>
            <div id="aibg">
              <div className={cx(styles.leftTitle)}>AI办公</div>
              <div>
                {
                  stData['office'] && stData['office'].map((e) => {
                    return (
                      <Card
                        actions={[<span className={styles.actionSpan} key={e.id} onClick={() => handleClickCard(e)}>立即前往<RightCircleOutlined
                          className={styles.rightCo}/></span>]}
                        className={cx(styles.card)}
                        key={e.id}
                      >
                        <Card.Meta
                          avatar={<Image alt="" className={styles.avImg} preview={false} src={e.iconurl}/>}
                          className={styles.cardMeta}
                          description={<span className={styles.desText}>{e.remark}</span>}
                          title={<span className={styles.title}>{e.name}</span>}
                        />
                      </Card>
                    )
                  })
                }
              </div>
            </div>
            <div id="aiszr">
              <div className={cx(styles.leftTitle)}>AI数字人</div>
              <div>
                {
                  stData['digitalPeople'] && stData['digitalPeople'].map((e) => {
                    return (
                      <Card
                        actions={[<span className={styles.actionSpan} key={e.id} onClick={() => handleClickCard(e)}>立即前往<RightCircleOutlined
                        className={styles.rightCo}/></span>]}
                        className={cx(styles.card)}
                        key={e.id}
                      >
                        <Card.Meta
                          avatar={<Image alt="" className={styles.avImg} preview={false} src={e.iconurl}/>}
                          className={styles.cardMeta}
                          description={<span className={styles.desText}>{e.remark}</span>}
                          title={<span className={styles.title}>{e.name}</span>}
                        />
                      </Card>
                    )
                  })
                }
              </div>
            </div>
            <div id="aijy">
              <div className={cx(styles.leftTitle)}>AI教育</div>
              <div>
                {
                  stData['education'] && stData['education'].map((e) => {
                    return (
                      <Card
                        actions={[<span className={styles.actionSpan} key={e.id} onClick={() => handleClickCard(e)}>立即前往<RightCircleOutlined
                          className={styles.rightCo}/></span>]}
                        className={cx(styles.card)}
                        key={e.id}
                      >
                        <Card.Meta
                          avatar={<Image alt="" className={styles.avImg} preview={false} src={e.iconurl}/>}
                          className={styles.cardMeta}
                          description={<span className={styles.desText}>{e.remark}</span>}
                          title={<span className={styles.title}>{e.name}</span>}
                        />
                      </Card>
                    )
                  })
                }
              </div>
            </div>
            <div id="aibc">
              <div className={cx(styles.leftTitle)}>AI编程</div>
              <div>
                {
                  stData['programming'] && stData['programming'].map((e) => {
                    return (
                      <Card
                        actions={[<span className={styles.actionSpan} key={e.id} onClick={() => handleClickCard(e)}>立即前往<RightCircleOutlined
                          className={styles.rightCo}/></span>]}
                        className={cx(styles.card)}
                        key={e.id}
                      >
                        <Card.Meta
                          avatar={<Image alt="" className={styles.avImg} preview={false} src={e.iconurl}/>}
                          className={styles.cardMeta}
                          description={<span className={styles.desText}>{e.remark}</span>}
                          title={<span className={styles.title}>{e.name}</span>}
                        />
                      </Card>
                    )
                  })
                }
              </div>
            </div>
            <div id="aiyp">
              <div className={cx(styles.leftTitle)}>AI音频</div>
              <div>
                {
                  stData['audio'] && stData['audio'].map((e) => {
                    return (
                      <Card
                        actions={[<span className={styles.actionSpan} key={e.id} onClick={() => handleClickCard(e)}>立即前往<RightCircleOutlined
                          className={styles.rightCo}/></span>]}
                        className={cx(styles.card)}
                        key={e.id}
                      >
                        <Card.Meta
                          avatar={<Image alt="" className={styles.avImg} preview={false} src={e.iconurl}/>}
                          className={styles.cardMeta}
                          description={<span className={styles.desText}>{e.remark}</span>}
                          title={<span className={styles.title}>{e.name}</span>}
                        />
                      </Card>
                    )
                  })
                }
              </div>
            </div>
          </div>
        </>
        :
          <div style={{margin: '0 auto', width: '90%'}}>
            <Title tag={stList.length}>助手列表</Title>
            <div>
              {
                stList.map((e) => {
                  return (
                    <Card
                      actions={[<span className={styles.actionSpan} key={e.id}>查看详情<RightCircleOutlined
                        className={styles.rightCo}/></span>]}
                      className={cx(styles.card)}
                      key={e.id}
                    >
                      <div className={styles.containerTitle}>{e.title}</div>
                      <div className={styles.container}>
                        <div className={styles.verImg}></div>
                        <div className={styles.zsdsCardImg}>
                          <Image alt="" preview={false} src="/images/gjImg.png" />
                        </div>
                      </div>
                      <div className={styles.cardCotain}>
                        <div>
                          <Image alt="" className={styles.desImg} preview={false} src="/images/detaicon.png" />
                          <span className={styles.zsds}>助手大师</span>
                          <span>{e.date}</span>
                        </div>
                        <div>{e.des}</div>
                      </div>
                    </Card>
                  )
                })
              }
            </div>
          </div>
        }
      </div>
    </>
  );
});

export default ApplicationSet;