import React from "react"
import { graphql } from "gatsby"
import Seo from "@/components/seo"
import { BannerResponsible, CaseList, Container, SolutionList } from "@/components"
import Markdown from "@/components/markdown"
import Layout from "@/components/layout"
import TalkSection from "@/components/talk-section"
import * as styles from "@/templates/events/detail.module.scss"
import Prize from "./prize"

interface IProps {
  data: {
    allStrapiCustomerCases: {
      nodes: RelatedCard[]
    }
    allStrapiSelectedSolution: {
      nodes: RelatedCard[]
    }
  }
}

const seoTitle = "大促背后的数据库"
const seoDescription =
  "在双十一到来前，PingCAP 与汽车之家、易车网、京东、小米等用户深入探讨了逐年飙升的销量背后隐藏的技术难题，以及这些企业扛住流量洪峰的技术架构"
const seoKeywords = [
  "TiDB",
  "云原生",
  "高可用",
  "分布式数据库",
  "大促",
  "618",
  "818",
  "双十一",
  "双11"
]

const bannerImage =
  "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/banner_3d7e1c4372.svg"
const imageMobile =
  "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/_ff0e913fff.svg"
const title = "Infra Talk | 视频访谈"
const summary = `
<p>
  一年一度的 11.11 又双叒叕来了，给技术人最好的礼物就是技术指南！ 而经过这些年的发展，购物节早已不仅仅局限于电商行业，现在各行各业其实都会采用类似方式做运营活动，汽车界有 818，小米有米粉节等等，这对包括数据库在内的基础软件提出了很多新挑战，同时也积累了诸多最佳实践。
</p>
<p>
  本专题中 ，PingCAP 与汽车之家、易车网、京东、中通等用户展开了一系列深入探讨，为大家揭秘逐年飙升的销量背后隐藏着什么技术难题？用什么技术架构才能平稳地扛住流量洪峰？
</p>
<p>
  <strong>
    看完各家分享的精彩内容后，你还可以参与有奖问答（本专题页面底部 ↓ ），只要全部答对，就有机会获得 TiDB 精美周边，快来参与吧！
  </strong>
</p>
`

export default function(props: IProps) {
  const {
    data: {
      allStrapiCustomerCases,
      allStrapiSelectedSolution
    }
  } = props

  const eventTalk: EventTalk[] = [
    {
      title: "数据引擎助力车娱融合新业态 让秒杀狂欢更从容",
      content: `在汽车之家的 818 全球汽车夜活动中，直播环节通过台网互动的形式与观众互动，这要求前台、后台要以秒级的精度同步配合，在这个过程中，数据库不仅要解决实时交易问题，还要将实时分析数据反馈给现场，这对晚会的气氛烘托起着重要的关键作用…[查看完整内容>>](/blog/database-behind-promotion-autohome)

**推荐阅读：**[TiDB 在 2021 汽车之家 818 全球汽车夜的应用](https://asktug.com/t/topic/152839)

“大促场景通常要求系统具备快速扩展与高可用的能力，而分布式系统天然就具有这种能力，汽车之家采用了全套的分布式系统。” **—— 汽车之家数据库负责人 陶会祥**
      `,
      titleLink:
        "/blog/database-behind-promotion-autohome",
      mediaCover: {
        url:
          "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/818_d9ccc7dd5c.jpg",
        width: 600,
        height: 336
      },
      media: {
        url:
          "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/new_6abfa17c91.mp4"
      }
    },
    {
      title: "技术升级&行业升级 TiDB 助力易车打造超级汽车狂欢节",
      content: `作为一台综合汽车、明星的车界“春晚”，易车网的超级 818 汽车狂欢夜全平台观看直播人次达 2.24亿，数据库的压力提升十倍之多，TiDB 在这个过程中体现出了分布式数据库的诸多优势，非常适合实时数据大屏、秒杀活动支持…[查看完整内容>>](/blog/database-behind-promotion-yiche)

**推荐阅读：**[TiDB 在 2021 易车 818 汽车狂欢节的应用](https://asktug.com/t/topic/182806)

“今年是易车网第一次在 818 做大促，对数据栈的扩展性和实时性要求很高，在决定采用 TiDB 后，通过与社区的合作仅用半个月就完成了压测、上线。整个过程有惊无险，平稳地承载了大促流量。”
**—— 易车数据库负责人 田震**`,
      titleLink: "/blog/database-behind-promotion-yiche",
      mediaCover: {
        url:
          "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/Ti_DB_818_84af0e22ae.jpg",
        width: 600,
        height: 336
      },
      media: {
        url:
          "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/new_3951aeb732.mp4"
      }
    },
    {
      title: "TiDB + 京东云数据库打造疾速秒杀体验",
      content: `对于京东来说，一年中有 2 个比较大的业务高峰期，一个是 618，一个是 11.11。这期间数据负荷变化极大，尤其当发生抢购、秒杀时，用户访问、数据流量就会非常密集，数据负荷的水平会达到平时的 10 倍以上…[查看完整内容>>](/blog/database-behind-promotion-jdcloud)

“每一次京东 618 前我们都会根据预先估计的数据量做好资源规划和分配，并且要做充足的压力测试，确保数据库的容量与性能满足活动要求。”
**—— 京东云数据库产品经理 杨牧**`,
      titleLink:
        "/blog/database-behind-promotion-jdcloud",
      mediaCover: {
        url:
          "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/816_9202781315.jpg",
        width: 600,
        height: 336
      },
      media: {
        url:
          "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/new_c0657d0817.mp4"
      }
    },
    {
      title: "中通大数据平台在大促中的进化",
      content:
        "大促中，大家买买买后最期盼的事情就是收到快递。去年双十一期间，中通订单量突破 8.2 亿，整个业务规模突破 7.6 亿，双十一当天的 QPS 峰值达到 35 万 +。TiDB 同时支撑中通快递线上 OLTP 和 OLAP 的业务，完美保障了双十一中通快递 IT 服务的稳定运行…[查看完整内容>>](/blog/database-behind-promotion-zto)",
      titleLink: "/blog/database-behind-promotion-zto",
      mediaCover: {
        url:
          "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/_b63fd8307d.png",
        width: 600,
        height: 336
      },
      media: {
        url: ""
      }
    }
  ]
  return (
    <Layout>
      <Seo
        title={seoTitle}
        description={seoDescription}
        keywords={seoKeywords}
      />
      <BannerResponsible image={bannerImage} imageMobile={imageMobile} />
      <Container>
        <Summary>
          <Markdown body={summary} needAnchor={false} />
        </Summary>
        <Title>{title}</Title>
        <Content data={eventTalk} />
      </Container>
      <CaseList
        title="延展案例"
        data={allStrapiCustomerCases.nodes}
        className={styles.caseList}
      />
      <SolutionList title="相关解决方案" data={allStrapiSelectedSolution.nodes.map(value => value.solution)} />
      <Prize />
    </Layout>
  )
}

const Summary: React.FC = ({ children }) => {
  return <div className={styles.summary}>{children}</div>
}

const Title: React.FC = ({ children }) => {
  return <h2 className={styles.title}>{children}</h2>
}

const Content = ({ data }: { data?: EventTalk[] }) => {
  return (
    <div className={styles.content}>
      {data?.map((value: EventTalk) => (
        <TalkSection {...value} />
      ))}
    </div>
  )
}

export const query = graphql`
  query DatabaseBehindBigSalesPromotion {
    allStrapiCustomerCases(filter: {strapiId: {in: [18, 5, 22]}}) {
      nodes {
        id
        logo {
          media {
            url
          }
        }
        title
        customUrl
        description
        body
      }
    }
    allStrapiSelectedSolution {
      nodes {
        solution {
          title
          customUrl
          description
          body
          image {
            media {
              url
            }
          }
        }
      }
    }
  }
`