import * as React from "react"

import * as styles from "./index.module.scss"
import { BannerResponsible, Layout, Seo } from "@/components"
//import { Download } from "@/pages/events/database-behind-new-economy-digital-transformation"
import ProductAdvantages from "@/components/product/product-advantages"
import OutLink from "@/components/OutLink"
import BackgroundContainer from "@/components/BackgroundContainer"
import useContactForm from "@/hooks/useContactForm"
import { useState } from "react"
import classNames from "classnames"

interface IProps extends React.HTMLAttributes<HTMLDivElement> {
  location?: ILocation
}

const seoTitle = "云数据库 TiDB 上线阿里云心选商城"
const seoDescription =
  "云数据库 TiDB 基于阿里云环境部署优化，提供 OLTP 规模化和实时 HTAP 能力，具备云原生、一键扩缩容、金融级高可用、兼容 MySQL 协议和大数据生态等重要特性"
const seoKeywords = "TiDB,云数据库,阿里云,心选商城".split(",")

const bannerDesktopImageUrl =
  "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/tidb_on_aliyun_banner_3827541634.jpg"
const bannerMobileImageUrl =
  "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/tidb_on_aliyun_banner_mobile_a5708a494a.jpg"
const architectureImageUrl =
  "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/tidb_on_aliyun_architecture_10b238a611.svg"
const backgroundImageUrl =
  "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/tidb_on_aliyun_background_b6f39329fe.png"

const tidbCloudOnAliyunUrl = "https://market.aliyun.com/products/56024006/cmgj00054143.html?utm_source=pingcap&utm_medium=referral&utm_campaign=website#sku=yuncode4814300001"
const tidbCloudUrl =
  "https://tidbcloud.com/free-trial?utm_source=website-zh&utm_medium=referral&utm_campaign=tidb-on-aliyun"

const deployDocsUrl = "https://help.aliyun.com/document_detail/433034.html"

const summary =
  "2022 年 6 月，PingCAP 与阿里云达成合作，融合双方技术优势的云数据库 TiDB 上线阿里云心选商城，为中国企业用户带来新一代 HTAP 数据库的云端体验。"

interface IIntroduction {
  title: string
  borderColor: string
  contents: (string | { title: string; content: string })[]
}

const introductions: IIntroduction[] = [
  {
    title: "产品简介",
    borderColor: "#55BED9",
    contents: [
      "云数据库 TiDB 是双方深度技术融合的产品，基于阿里云环境部署优化，提供 OLTP 规模化和实时 HTAP 能力，具备云原生、一键扩缩容、金融级高可用、兼容 MySQL 协议和大数据生态等重要特性。TiDB 成功应用于全球 2000+ 头部企业的生产环境，助力千行百业数字化转型升级。",
    ],
  },
  {
    title: "客户价值",
    borderColor: "#E18377",
    contents: [
      {
        title: "业务快速上线",
        content: "实现分钟级部署上线，支持关键工作负载弹性且透明地扩展。",
      },
      {
        title: "降低使用门槛",
        content:
          "一栈式云上 HTAP 数据库方案，与线下方案相比使用门槛降低 1 个量级。",
      },
      {
        title: "官方服务支持",
        content:
          "由阿里云和 PingCAP 提供全天候保驾护航服务，实时响应故障处理。",
      },
    ],
  },
]

const features: ProductAdvantages[] = [
  {
    title: "兼顾联机交易与实时分析",
    description:
      "TiDB 可以在一份数据上实现在线交易和在线实时分析，简单地进行数据聚合即可满足在线业务的实时分析需求，大幅提升企业的运营效率和用户体验。",
    banner: {
      media: {
        url:
          "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/tidb_on_aliyun_advantage_1_3457d09ee9.svg",
      },
    },
  },
  {
    title: "高度兼容 MySQL",
    description:
      "TiDB 高度兼容 MySQL，无需学习特殊开发方法，原有业务应用的开发常见框架均可直接使用，支持业务在线快捷变更（Online DDL），赋予大促期间业务实时在线投产变更的能力。",
    banner: {
      media: {
        url:
          "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/tidb_on_aliyun_advantage_2_98804562c2.svg",
      },
    },
  },
  {
    title: "简单敏捷",
    description:
      "TiDB 无需考虑分库分表以及分布式事务的实现，降低业务开发人员的开发与学习等隐性成本；TiDB 提供可视化查询界面，让运维人员通过 SQL 实时分析和实时运营成为可能。",
    banner: {
      media: {
        url:
          "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/tidb_on_aliyun_advantage_3_fa5356da35.svg",
      },
    },
  },
  {
    title: "开放生态",
    description:
      "TiDB 的开源技术生态广泛融合 Hadoop、Kafka、Flink、Spark 等业界主流大数据技术栈，显著降低企业数据平台技术架构的复杂度。",
    banner: {
      media: {
        url:
          "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/tidb_on_aliyun_advantage_4_fe8c529cc6.svg",
      },
    },
  },
  {
    title: "专业服务",
    description:
      "由阿里云和 PingCAP 官方提供 7x24 小时专家级别服务支持，提供阿里云云环境下 TiDB 部署和使用的最佳实践，保障用户的业务连续性和数据安全。",
    banner: {
      media: {
        url:
          "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/tidb_on_aliyun_advantage_5_53424327e2.svg",
      },
    },
  },
]

const computeNestFeatures = [
  {
    title: "高效简单",
    iconUrl: "/tidb-on-aliyun/compute-nest-1.svg",
    content:
      "集约化部署和管理应用服务，运营成本降低 50% 以上；覆盖应用服务全生命周期，运维效率提升 10 倍以上",
  },
  {
    title: "安全可靠",
    iconUrl: "/tidb-on-aliyun/compute-nest-2.svg",
    content:
      "极简网络联通设计，免除网络打通困扰；服务流程可审计、可追溯，打造可信任的企业服务；自动化高可用的容灾方案设计，提升业务可靠性",
  },
  {
    title: "体验智能",
    iconUrl: "/tidb-on-aliyun/compute-nest-3.svg",
    content:
      "开放阿里云内部技术底座及官方云产品的支持系统； 全链路检测能力，一键排查、智能检测；全生命周期的平台能力支撑，保障用户体验",
  },
]

export default function TiDBOnAliyunPage(props: IProps) {
  const { location } = props
  const { dom: ContactFormDOM, handleOpen } = useContactForm(location, {
    consult_category: "yw85Z2q9U", // default consult_category is "产品咨询"
  })
  return (
    <Layout hiddenUseFreeButton>
      <Seo
        title={seoTitle}
        description={seoDescription}
        keywords={seoKeywords}
      />
      <div className={styles.container}>
        {/*<div className={styles.banner}>*/}
        <BannerResponsible
          image={bannerDesktopImageUrl}
          imageMobile={bannerMobileImageUrl}
          contentClassName={styles.banner_content}
        >
          <OutLink
            className={classNames("button is-outline is-white is-medium", styles.banner_link)}
            href={tidbCloudOnAliyunUrl}
          >
            立即使用云数据库 TiDB
          </OutLink>
        </BannerResponsible>
        {/*</div>*/}
        <BackgroundContainer
          className={styles.NavBar}
          classNameContainer={styles.NavBarContainer}
        >
          <a href="#introduction">产品介绍</a>
          <a href="#product_featuree">产品优势</a>
          <a href="#compute_node_feature">计算巢优势</a>
          <a href="#faq">常见问题 FAQ</a>
        </BackgroundContainer>
        <BackgroundContainer className={styles.summary}>
          <h4>{summary}</h4>
        </BackgroundContainer>
        <BackgroundContainer
          className={styles.introduction}
          id={"introduction"}
        >
          <div className={styles.introduction_header}>
            <h2>产品介绍</h2>
          </div>
          <div className={styles.introduction_body}>
            <div className={styles.introduction_body_start}>
              <img src={architectureImageUrl} alt="" />
            </div>
            <div className={styles.introduction_body_end}>
              {introductions.map((value, index) => (
                <IntroductionItem key={index} {...value} />
              ))}
            </div>
          </div>
        </BackgroundContainer>
        <div className={styles.contact}>
          <Contact handleOpen={handleOpen} />
        </div>
        <div className={styles.ProductAdvantage} id={"product_featuree"}>
          <h2>产品优势</h2>
          <ProductAdvantages myData={features} isShowLookDetailLink={false} />
        </div>
        <BackgroundContainer
          hasBackgroundColor={true}
          className={styles.computeNestFeatures}
          id={"compute_node_feature"}
        >
          <h2>计算巢交付优势</h2>
          <div className={styles.computeNestFeatures_body}>
            {computeNestFeatures.map((value, index) => (
              <FeatureItem key={index} {...value} />
            ))}
          </div>
        </BackgroundContainer>
        <div className={styles.contact}>
          <Contact handleOpen={handleOpen} />
        </div>
        <BackgroundContainer className={styles.faq} id={"faq"}>
          {/*<Download title={"文档与工具"} />*/}
          <FAQ />
        </BackgroundContainer>
      </div>
      {ContactFormDOM}
    </Layout>
  )
}

function IntroductionItem({ title, borderColor, contents }: IIntroduction) {
  return (
    <div className={styles.IntroductionItem}>
      <h3 style={{ borderColor }}>{title}</h3>
      {contents.map((value, index) =>
        typeof value === "string" ? (
          <p key={index}>{value}</p>
        ) : (
          <p>
            <dt>{value.title}</dt>
            <dd>{value.content}</dd>
          </p>
        )
      )}
    </div>
  )
}

function Contact({ handleOpen }: { handleOpen: () => any }) {
  const classNameButton = "button is-white is-medium"
  return (
    <div
      className={styles.Contact}
      style={{ backgroundImage: `url(${backgroundImageUrl})` }}
    >
      <BackgroundContainer className={styles.Contact_container}>
        <div className={styles.Contact_container}>
          <div className={styles.Contact_container_button}>
            <button onClick={handleOpen} className={classNameButton}>
              立即咨询
            </button>
          </div>
          <div className={styles.Contact_container_button}>
            <OutLink href={tidbCloudOnAliyunUrl} className={classNameButton}>
              使用云数据库 TiDB
            </OutLink>
            <div>适用于阿里云中国区域</div>
          </div>
          <div className={styles.Contact_container_button}>
            <OutLink href={tidbCloudUrl} className={classNameButton}>
              使用 TiDB Cloud
            </OutLink>
            <div>适用于中国出海企业和开发者</div>
          </div>
        </div>
      </BackgroundContainer>
    </div>
  )
}
function FeatureItem({
  title,
  iconUrl,
  content,
}: {
  title: string
  iconUrl: string
  content: string
}) {
  return (
    <div className={styles.FeatureItem}>
      <div className={styles.FeatureItem_header}>
        <h3>{title}</h3>
        <img src={iconUrl} />
      </div>
      <div className={styles.FeatureItem_body}>{content}</div>
    </div>
  )
}

interface IFAQ {
  className: React.ReactNode
  items: {
    question: React.ReactNode
    answer: React.ReactNode
  }[]
}
function FAQ() {
  const faq: IFAQ[] = [
    {
      className: "产品相关",
      items: [
        {
          question: "哪些用户适合使用云数据库 TiDB?",
          answer: (
            <>
              <p>1、在阿里云平台上需要 TiDB 原厂技术支持保障的用户；</p>
              <p>2、希望上云又不希望被云环境 Vendor Lockin 自己数据的用户；</p>
              <p>
                3、在云上或云下使用
                MySQL，但数据量增速快，业务请求无法使用单机数据库支撑的用户；
              </p>
              <p>
                4、线下硬件测试资源受限，需要进行数据库选型评估以及其它场景需要的测试用户，可按需进行服务订阅；
              </p>
              <p>5、希望在公有云上获得 TiDB 数据库规格配置下最佳实践的用户。</p>
            </>
          ),
        },
        {
          question: "此次在阿里云上线的云数据库 TiDB 对应的 TiDB 是哪个版本？",
          answer: "目前已经升级到 TiDB v6.5.0 LTS 版本",
        },
        {
          question:
            "阿里云上线的云数据库 TiDB 和目前生产用的版本不一致，应该怎么解决？",
          answer: (
            <>
              <p>1、如果是替换的场景，建议升级到云数据库 TiDB 对应的 TiDB 版本；</p>
              <p>2、如果是并行的场景，TiDB 支持低版本通过 TiCDC 同步到云数据库 TiDB 高版本的技术能力。</p>
              <p>注：目前上线的云数据库 TiDB 是官方最新版本。</p>
            </>
          ),
        },
        {
          question: "后续阿里云上的版本会随着 TiDB 版本发布进行同步升级吗？",
          answer: <>
            <p>目前：会同步 TiDB 官方 LTS 版本，进行同步的新商品的发布，而不是替换；</p>
            <p>后续：会根据官方的版本生命周期，下线旧版本的服务和在线商品品类。</p>
          </>,
        },
        {
          question: "云数据库 TiDB 支持阿里云上的跨 Region 部署吗？",
          answer:
            "目前不支持，仅支持  1 Region 1 AZ 和 1 Region 3 AZ 的部署能力。",
        },
        {
          question: "云数据库 TiDB 支持阿里云哪些类型的主机和存储？",
          answer: (
            <div>
              <p>目前 1 Region 1 AZ 和 1 Region 3 AZ 架构下均支持以下标准套餐，后续将开放更多的规格选择：</p>
              <br/>
              <table>
                <caption>【基础版 TiDB 环境 ECS 套餐】</caption>
                <tbody>
                <tr><td>PD</td><td>ecs.c6.large</td><td>2C 4G 云盘</td></tr>
                <tr><td>TiDB</td><td>ecs.c6.xlarge</td><td>4C 8G 云盘</td></tr>
                <tr><td>TiKV</td><td>ecs.i3.2xlarge</td><td>8C 64G 1900GB NVMe</td></tr>
                <tr><td>TiFlash</td><td>ecs.i3.2xlarge</td><td>8C 64G 1900GB NVMe</td></tr>
                </tbody>
              </table>
              <br/>
              <table>
                <caption>【高性能版 TiDB 环境 ECS 套餐】</caption>
                <tbody>
                <tr><td>PD</td><td>ecs.c6.xlarge</td><td>4C 8G 云盘</td></tr>
                <tr><td>TiDB</td><td>ecs.c6.2xlarge</td><td>8C 16G 云盘</td></tr>
                <tr><td>TiKV</td><td>ecs.i3.4xlarge</td><td>16C 128G 2*1920GB NVMe</td></tr>
                <tr><td>TiFlash</td><td>ecs.i3.4xlarge</td><td>16C 128G 2*1920GB NVMe</td></tr>
                </tbody>
              </table>
            </div>
          ),
        },
        {
          question: "云数据库 TiDB 和 TiDB Cloud 有什么区别？我应该如何选择？",
          answer:
            "云数据库 TiDB 是用户云上私有化部署的方式，底层与阿里云进行了深度集成和性能优化；TiDB Cloud 是全托管（ Database as a Service ）方式，部署和运维全部交给 TiDB Cloud。",
        },
        {
          question: "云数据库 TiDB 是否提供免费试用的机会？",
          answer: <>2023 年 2 月 1 日-28 日活动期间提供最长 30 天免费试用，了解详情：<OutLink href={"https://asktug.com/t/topic/1000432"}>https://asktug.com/t/topic/1000432</OutLink></>,
        },
        {
          question: "云数据库上运行的版本和开源版本有什么区别？",
          answer: <>
            <p>1、提供经过验证的云上私有化部署的基础资源配置最佳实践；</p>
            <p>2、提供原厂兜底的 7*24 小时订阅服务支持。</p>
          </>,
        },
      ],
    },
    {
      className: "迁移相关",
      items: [
        {
          question:
            "原有阿里云上的 TiDB 实例如何迁移到云数据库 TiDB？（代价最小的方式）",
          answer:
            "由于云数据库 TiDB是独立的商品，需要全新开通实例服务，通过离线数据迁移是代价最小的迁移方式，其次是在线的数据同步迁移，建议通过 TiDB DM 等工具迁移。",
        },
        {
          question:
            "从 MySQL RDS 迁移到云数据库 TiDB 有哪些工具可以用？文档参考？",
          answer:
            <>TiDB DM 迁移工具，文档参考：<OutLink href="https://docs.pingcap.com/zh/tidb/stable/dm-overview">https://docs.pingcap.com/zh/tidb/stable/dm-overview</OutLink></>,
        },
        {
          question:
            "是否提供云下到云上、第三方云到云数据库 TiDB 的迁移支持和最佳实践？",
          answer: <>
            <p>本次订阅服务内容，暂不包含此服务，可提供订阅的迁移指导；</p>
            <p>云下到云上、第三方云迁移，可联系 TiDB 业务代表采购技术专家服务提供迁移保障。</p>
          </>,
        },
      ],
    },
    {
      className: "服务相关",
      items: [
        {
          question: "云数据库 TiDB 是由提供 PingCAP 原厂服务支持？",
          answer:
            "由阿里云售后服务团队与 PingCAP 原厂订阅服务（Online Support）团队共同支持。",
        },
        {
          question: "云数据库 TiDB 提供什么样等级的 SLA？",
          answer: (
            <>
              提供 PingCAP 原厂标准订阅 & 高级订阅两种 SLA 服务，详见官方订阅
              SLA 内容：
              <OutLink href="/product-enterprise#subscriptionServiceSystem">
                /product-enterprise#subscriptionServiceSystem
              </OutLink>。
            </>
          ),
        },
        {
          question: "云数据库 TiDB 的服务支持具体包含哪些方面？",
          answer: <>
            <p>S1\S2\S3\S4 的服务请求响应与应答。</p>
            <p>注：订阅服务默认不提供任何用户线下形式的服务支持，不提供任何线上远程登陆用户环境的代维操作，如需此类服务请联系 TiDB 业务代表洽谈详情。</p>
          </>,
        },
      ],
    },
    {
      className: "如何购买",
      items: [
        {
          question: "云数据库 TiDB 在阿里云的价格构成是怎样的？",
          answer:  <>
            <p>用户在阿里云心选商城订购云数据库 TiDB 产品，会提供两个价格构成：</p>
            <p>1、商品套餐内指定的 ECS 规格资源的价格；</p>
            <p>2、商品套餐内指定的 TiDB 规格资源的价格。</p>
          </>,
        },
        {
          question: "为了方便进行成本预估，是否提供价格计算器？",
          answer:
            "阿里云的操作过程中，在用户选定套餐后，提供自动询价的价格计算。",
        },
      ],
    },
  ]
  const [selectedKey, setSelectedKey] = useState<undefined | string>(undefined)
  const handleClick = (index: number, index1: number) => {
    setSelectedKey(state => {
      const json = JSON.stringify([index, index1])
      if (state === json) {
        return undefined
      } else {
        return json
      }
    })
  }
  return (
    <div className={styles.FAQ}>
      <div className={styles.FAQ_header}>
        <h3>常见问题 FAQ</h3>
      </div>
      <div className={styles.FAQ_body}>
        {faq.map((value, index) => (
          <div className={styles.FAQ_body_class} key={index}>
            <h4>{value.className}</h4>
            <div className={styles.FAQ_body_class_item}>
              {value.items.map((value1, index1) => {
                const isCurrent = selectedKey === JSON.stringify([index, index1])
                return (
                  <div
                    className={classNames(styles.FAQ_body_class_item_qa, {
                      [styles.FAQ_body_class_item_qa_selected]: isCurrent,
                    })}
                    key={index1}
                  >
                    <dt onClick={() => handleClick(index, index1)}>
                      {isCurrent ? "-" : "+"} {value1.question}
                    </dt>
                    <dd>{value1.answer}</dd>
                  </div>
                )
              })}
            </div>
          </div>
        ))}
      </div>
      <p>
        更多云数据库 TiDB 的部署和操作内容，请查阅<OutLink href={deployDocsUrl}>部署文档</OutLink>。
      </p>
    </div>
  )
}