<script lang="ts" setup>
import { CloseOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons-vue'
import { Button, Carousel, Modal, QRCode, message } from 'ant-design-vue'
import { onMounted, ref } from 'vue'
import type { GoodsData, Racharge } from './index.d'
import { getIsPay, goodsList, goodsType, payment } from '@/api/recharge/index'
import trumpet from '@/assets/images/recharge/lb.png'
import { useUserStore } from '@/store/moules/userStore/index'
import vip from '@/assets/images/recharge/vip.png'
import logo from '@/assets/images/conversation/logo.png'
import { useRechargeStore } from '@/store/moules/rechareStore'
import { RechargeEnum } from '@/enums/recharge'

const userStore = useUserStore()
const rechargeStore = useRechargeStore()
// 轮播的ref
const carouselRef = ref()
// 选项卡索引
const activeTab = ref(0)
// 支付二维码
const qrshow = ref<boolean>(false)
// 套餐类型目录
const tabs = ref<Racharge[]>([])
// 套餐列表
const goodslists = ref<GoodsData[]>([])
// 支付路径
const payData = ref<any>({
  orderCode: '',
  wx_result: '',
})
// 轮询是否支付
const intervalId = ref()

// 套餐类型
function getType() {
  goodsType().then((res) => {
    tabs.value = res
  })
}

// 套餐列表
function getgoodsList(type: string) {
  goodsList({ type }).then((res) => {
    goodslists.value = res
  })
}

// 选择选项卡
function selectTab(index: number, key: string) {
  activeTab.value = index
  getgoodsList(key)
}

// 支付
function handlePay(goodsId: string) {
  payment({ goodsId, type: RechargeEnum.PAY_PC }).then((res) => {
    payData.value = res
    qrshow.value = true
    startPolling()
  })
}
// 开始轮询
function startPolling() {
  // 开启定时器，每隔3秒触发一次
  intervalId.value = setInterval(() => {
    getIsPay({ orderCode: payData.value.orderCode }).then((res) => {
      if (res) {
        qrclose()
        message.success('支付成功')
      }
    })
  }, 2000)
}
// 结束轮询
function stopPolling() {
  // 停止定时器
  if (intervalId.value) {
    clearInterval(intervalId.value)
    intervalId.value = null
    qrshow.value = false

    userStore.getChatInfoFun()
  }
}
// 关闭二维码弹窗
function qrclose() {
  stopPolling()
}
onMounted(() => {
  getType()
  getgoodsList('1')
})
// 关闭弹窗
function handleClose() {
  rechargeStore.rechargeClose()
}
// 选项卡样式
function tabClass(index: number) {
  if (index === activeTab.value) {
    if (index === 0 || index === tabs.value.length - 1) {
      return 'tab active triangle'
    }
    else {
      return 'tab active square'
    }
  }
  else {
    return 'tab'
  }
}

// 走马灯向上
function onPrevClick() {
  carouselRef.value.prev()
}
// 走马灯向下
function onNextClick() {
  carouselRef.value.next()
}

// 数字分隔符
function separator(num: number | string) {
  const numParts = num.toString().split('.')
  numParts[0] = numParts[0].replace(/\B(?=(\d{3})+(?!\d))/g, '’')
  return numParts.join('.')
}
</script>

<template>
  <transition name="modal">
    <div v-if="rechargeStore.getStatus" class="modal-mask">
      <div class="modal-wrapper">
        <div class="modal-container">
          <div class="modal-body">
            <div class="top">
              <div class="tabs">
                <div
                  v-for="(item, index) in tabs"
                  :key="index"
                  :class="tabClass(index)"
                  @click="selectTab(index, item.key)"
                >
                  <img v-if="index === tabs.length - 1" class="vipphoto" :src="vip" alt="">
                  {{ item.title }}
                </div>
              </div>
            </div>
            <div class="bottom">
              <div v-if="activeTab !== tabs.length - 1" class="basic-meal">
                <div v-show="goodslists.length > 3" class="prev-button prev" @click="onPrevClick">
                  <LeftOutlined />
                </div>
                <Carousel ref="carouselRef" arrows :dots="false" :autoplay="false" :slides-to-show="goodslists.length > 3 ? 3 : goodslists.length" :slides-to-scroll="1">
                  <div v-for="(item, index) in goodslists" :key="index" class="carouse-box">
                    <div class="carouse-item">
                      <div class="dotnumbox">
                        <div class="dotnum">
                          {{ item.giveNum }}点数
                        </div>
                        <div class="discount">
                          限时折扣
                        </div>
                      </div>
                      <div class="deadline">
                        {{ item.title }}
                      </div>
                      <div class="equitiesbox">
                        <div class="equities">
                          <div class="left">
                            GPT3.5版本
                          </div>
                          <div class="right">
                            {{ item.gpt35Num }}条
                          </div>
                        </div>

                        <div class="equities">
                          <div class="left">
                            GPT4.0版本
                          </div>
                          <div class="right">
                            {{ item.gpt40Num }}条
                          </div>
                        </div>
                        <div class="equities">
                          <div class="left">
                            AI绘图
                          </div>
                          <div class="right">
                            {{ item.pictureNum }}幅
                          </div>
                        </div>
                      </div>
                      <div class="price">
                        <div class="nowprice">
                          ¥{{ item.price }}
                        </div>
                        <div class="oldprice">
                          ¥{{ item.costPrice }}
                        </div>
                      </div>
                      <div class="payBtn">
                        <Button class="customBtn" @click="handlePay(item.id)">
                          立即充值
                        </Button>
                      </div>
                    </div>
                  </div>
                </Carousel>
                <div v-show="goodslists.length > 3" class="next-button next" @click="onNextClick">
                  <RightOutlined />
                </div>
                <div class="line">
                  <div class="colorLine"></div>
                </div>
                <div class="broadcastBox">
                  <div class="broadcast">
                    <div class="trumpet">
                      <img :src="trumpet" alt="">
                    </div>
                    <div class="marquee">
                      <div class="content">
                        <span>152****0062 在 2024/1/23 开通了至尊礼遇卡！</span>
                        <span>178****6455 在 2024/1/12 开通了年套餐！</span>
                        <span>195****2519 在 2024/1/1开通了日套餐！</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div v-else class="extreme-box">
                <div class="extreme">
                  <div class="extremebg">
                    <div class="extremename">
                      <div class="bigname">
                        至尊礼遇卡
                      </div>
                      <div class="smallname">
                        让生活更简单，让灵感转化更高效
                      </div>
                    </div>
                  </div>
                  <div class="extremeequity">
                    <div class="quitytitle">
                      <div class="quitytitle-left">
                        畅享至尊权益
                      </div>
                      <div class="quitytitle-right">
                        开通至尊礼遇卡，畅快协作，使用无忧
                      </div>
                    </div>

                    <div class="extremeequitynum">
                      <div class="extremeequitynum-box">
                        <div class="extremeequitynum-box-top">
                          <span class="num">{{ separator(goodslists[0].giveNum) }}</span>
                          <span class="unit">点数</span>
                        </div>
                        <div class="extremeequitynum-box-bottom">
                          同聪点数
                        </div>
                      </div>

                      <div class="extremeequitynum-box">
                        <div class="extremeequitynum-box-top">
                          <span class="num">无限</span>
                        </div>
                        <div class="extremeequitynum-box-bottom">
                          可回答3.5版本问题
                        </div>
                      </div>

                      <div class="extremeequitynum-box">
                        <div class="extremeequitynum-box-top">
                          <span class="num">{{ separator(goodslists[0].gpt40Num) }}</span>
                          <span class="unit">条</span>
                        </div>
                        <div class="extremeequitynum-box-bottom">
                          可回答4.0版本问题
                        </div>
                      </div>

                      <div class="extremeequitynum-box">
                        <div class="extremeequitynum-box-top">
                          <span class="num">{{ goodslists[0].pictureNum }}</span>
                          <span class="unit">幅</span>
                        </div>
                        <div class="extremeequitynum-box-bottom">
                          可生成图片
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="extremeopen">
                    <div class="openleft">
                      <span class="freeprice">畅享价：</span>
                      <span class="newprice">¥{{ goodslists[0].price }}</span>
                      <span class="oldprice">¥{{ goodslists[0].costPrice }}</span>
                    </div>
                    <div class="openright">
                      <div class="year">
                        使用期限1年
                      </div>
                      <div class="immediately" @click="handlePay(goodslists[0].id)">
                        立即开通
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="close" @click="handleClose">
          <CloseOutlined />
        </div>
      </div>
    </div>
  </transition>
  <Modal
    v-model:open="qrshow"
    :footer="null"
    :width="210"
    :body-style="{ zIndex: '2000' }"
    :closable="false"
    @cancel="qrclose"
  >
    <QRCode
      style="text-align: center;"
      error-level="H"
      :value="payData.wx_result"
      :icon="logo"
    />
  </Modal>
</template>

<style scoped lang="scss">
  .modal-mask {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  .close {
    position: absolute;
    top: 5px;
    right: -40px;
    width: 27px;
    height: 27px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    line-height: 27px;
    text-align: center;
    color: #fff;
    cursor: pointer;
  }
  .modal-wrapper {
    width: 60%;
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    box-shadow: 0px 4px 10px 0px rgba(163, 163, 163, 0.6);
    border-radius: 22px;
    .modal-body {
      position: relative;
      .top {
        width: 100%;
        background-color: #fff2e1;
        border-top-left-radius: 22px;
        border-top-right-radius: 22px;
      }

      .bottom {
        width: 100%;
        // 基础套餐
        .basic-meal {
          width: 90%;
          margin: 30px auto 0;
          position: relative;
          padding-bottom: 30px;
          .prev-button,
          .next-button {
            width: 25px;
            height: 35px;
            background: rgba(255, 255, 255, 0.68);
            box-shadow: 0px 0px 6px 0px rgba(166, 166, 166, 0.5);
            border-radius: 5px;
            line-height: 35px;
            text-align: center;
            cursor: pointer;
            position: absolute;
            z-index: 1;
            top: 35%;
            &.prev {
              left: 5px;
            }
            &.next {
              right: 5px;
            }
          }

          .line {
            width: 95%;
            margin: 20px auto;
            height: 1px;
            border: 1px solid #ede0d9;
            .colorLine {
              width: 17%;
              height: 1px;
              background-color: #a46443;
            }
          }
          .broadcastBox {
            width: 95%;
            margin: 0 auto;

            .broadcast {
              width: 100%;
              height: 30px;
              background: #fff5e5;
              border-radius: 3px;
              border: 1px solid #ff9b00;
              display: flex;
              align-items: center;
              .marquee {
                width: 90%;
                overflow: hidden;

                .content {
                  display: flex;
                  white-space: nowrap;
                  animation: scrolling 10s linear infinite;
                  span {
                    display: inline-block;
                    margin-right: 100px;
                    padding: 0 20px;
                    background: #fbe6c4;
                    border-radius: 4px;
                    font-size: 12px;
                    font-family: PingFang-SC, PingFang-SC;
                    letter-spacing: 1px;
                    color: #a16242;
                  }
                  @keyframes scrolling {
                    0% {
                      transform: translateX(100%);
                    }
                    100% {
                      transform: translateX(-100%);
                    }
                  }
                }
              }
              .trumpet {
                width: 10%;
                text-align: center;
              }
            }
          }
        }
        // 至尊vip
        .extreme-box {
          width: 100%;
          height: 400px;
          background-image: url(@/assets/images/recharge/zz.png);
          background-size: cover;
          background-repeat: no-repeat;

          .extreme {
            width: 85%;
            height: 100%;
            margin: 0 auto;
            padding: 20px 0;
            .extremebg {
              width: 97%;
              height: 140px;
              margin: 0 auto;
              background-image: url(@/assets/images/recharge/zs.png);
              background-size: cover;
              background-position: center;
              background-repeat: no-repeat;
              position: relative;
              z-index: 4;
              .extremename {
                position: absolute;
                top: 30px;
                left: 40px;
                .bigname {
                  font-size: 30px;
                  font-family: '方正清刻本悦宋简体';
                  font-weight: normal;
                  color: #141c3b;
                  letter-spacing: 9px;
                  -webkit-text-stroke: 1px #141c3b;
                }
                .smallname {
                  font-size: 14px;
                  font-family:
                    PingFangSC,
                    PingFang SC;
                  font-weight: 400;
                  color: #212a4b;
                  line-height: 25px;
                }
              }
            }

            .extremeequity {
              position: relative;
              width: 100%;
              // height: 150px;
              background-image: url(@/assets/images/recharge/quity.png);
              background-size: cover;
              margin-top: -16px;
              z-index: 5;
              padding-bottom: 20px;
              .quitytitle {
                width: 100%;
                display: flex;
                align-items: center;
                padding-top: 17px;
                &-left {
                  font-size: 17px;
                  font-family: PingFang-SC, PingFang-SC;
                  font-weight: 600;
                  color: #fffaf6;
                  padding-left: 40px;
                  letter-spacing: 2px;
                }
                &-right {
                  font-size: 14px;
                  font-family:
                    PingFangSC,
                    PingFang SC;
                  font-weight: 400;
                  color: #78d6fe;
                  line-height: 22px;
                  letter-spacing: 1px;
                  padding-left: 30px;
                }
              }
              .extremeequitynum {
                width: 100%;

                display: flex;
                align-items: center;
                justify-content: space-around;
                &-box {
                  width: 20%;
                  height: 100px;
                  background-color: #1d134e;
                  background: rgba(233, 230, 255, 0.06);
                  border-radius: 8px;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
                  margin-top: 10px;

                  &-top {
                    font-family: DingTalk, DingTalk;
                    font-weight: normal;
                    color: #ffe9d5;
                    .num {
                      font-size: 25px;
                      font-family: 'jinbuti';
                    }
                    .unit {
                      font-size: 15px;
                    }
                  }
                  &-bottom {
                    font-size: 12px;
                    font-family:
                      PingFangSC,
                      PingFang SC;
                    font-weight: 400;
                    color: #fcf9f6;
                    line-height: 20px;
                    letter-spacing: 1px;
                  }
                }
              }
            }
            .extremeopen {
              width: 97%;
              height: 50px;
              display: flex;
              margin: 10px auto;
              background: linear-gradient(90deg, #4e3f92 0%, #1b084a 100%);
              border-radius: 20px;
              border-image: linear-gradient(
                  133deg,
                  rgba(137, 104, 228, 1),
                  rgba(121, 85, 185, 1)
                )
                1 1;
              .openleft {
                width: 50%;
                height: 100%;
                .freeprice {
                  font-size: 15px;
                  font-family: PingFang-SC, PingFang-SC;
                  font-weight: 800;
                  color: #ffffff;
                  padding-left: 20px;
                  letter-spacing: 1px;
                }
                .newprice {
                  font-size: 30px;
                  font-family: PingFang-SC, PingFang-SC;
                  font-weight: 800;
                  color: #70d2ff;
                  letter-spacing: 4px;
                  -webkit-text-stroke: 1px #41d5ff;
                  padding-left: 20px;
                }
                .oldprice {
                  font-size: 13px;
                  font-family:
                    PingFangSC,
                    PingFang SC;
                  font-weight: 400;
                  color: #ffffff;
                  text-decoration: line-through;
                  padding-left: 10px;
                }
              }
              .openright {
                width: 50%;
                height: 100%;
                display: flex;
                align-items: center;
                .year {
                  flex: 1;
                  font-size: 10px;
                  font-family:
                    PingFangSC,
                    PingFang SC;
                  font-weight: 400;
                  color: #78d6fe;
                  letter-spacing: 1px;
                }
                .immediately {
                  cursor: pointer;
                  flex: 3;
                  align-items: center;
                  height: 100%;
                  background: linear-gradient(
                    135deg,
                    #69cfff 0%,
                    #b4f2fd 38%,
                    #c7c8fe 62%,
                    #c8a1fd 100%
                  );
                  border-radius: 60px;
                  border-image: linear-gradient(
                      133deg,
                      rgba(137, 104, 228, 1),
                      rgba(121, 85, 185, 1)
                    )
                    1 1;
                  font-size: 18px;
                  font-family: PingFang-SC, PingFang-SC;
                  font-weight: 800;
                  color: #212a4b;
                  line-height: 50px;
                  text-align: center;

                  letter-spacing: 1px;
                }
              }
            }
          }
        }
      }
    }
  }
}
.modal-enter-active,
.modal-leave-active {
  transition: opacity 0.3s;
}

.modal-enter-from,
.modal-leave-to {
  opacity: 0;
}

.modal-enter-to,
.modal-leave-from {
  opacity: 1;
}
</style>

<!-- tabs -->
<style scoped>
.tabs {
  display: flex;
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  overflow: hidden;
  .vipphoto {
    width: 30px;
    height: 30px;
  }
}

.tab {
  flex: 1;
  height: 50px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
  background-color: #fff2e1;
  font-size: 14px;
  font-family: PingFang-SC, PingFang-SC;
  font-weight: bold;
  color: #6b2d01;
  letter-spacing: 2px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  position: relative;
  transition: all 0.3s ease-out;
}
.tab:not(:last-child)::after {
  content: '';
  border-right: 1px solid #f1d7b6;
  position: absolute;
  top: 6px;
  bottom: 6px;
  right: 0;
}
.tab.active.square {
  background-color: white;
}

.tab.active.triangle:first-child {
  border-top-left-radius: 12px;
  background-color: white;
  position: relative;
  &::after {
    content: '';
    position: absolute;
    right: -30px;
    width: 0;
    height: 0;
    z-index: 1;
    border-top: 0px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 50px solid #ffffff;
  }
}

.tab.active.triangle:last-child {
  border-top-right-radius: 12px;
  background-color: #0f0745;
  color: #ffac72;

  &::before {
    content: '';
    position: absolute;
    left: -25px;
    bottom: 0;
    width: 0;
    height: 0;
    z-index: 1;
    border-top: 0px solid transparent;
    border-left: 30px solid transparent;
    border-bottom: 48px solid #0f0745;
  }
}
</style>

<!-- 走马灯 -->
<style scoped lang="scss">
.carouse-box {
  padding: 0 20px;
  .carouse-item {
    width: 100%;
    padding: 10px 20px;
    background: linear-gradient(118deg, #f9f5e6 0%, #f1d7b6 100%);
    border-radius: 15px;
    border-image: linear-gradient(
        135deg,
        rgba(255, 240, 206, 1),
        rgba(213, 170, 139, 1)
      )
      3 3;
    justify-content: center;
    height: 260px;
    cursor: pointer;
    align-items: center;

    .dotnumbox {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .dotnum {
        font-size: 20px;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: 800;
        color: #6b2d01;
        letter-spacing: 1px;
      }
      .discount {
        margin-right: -20px;
        width: 80px;
        height: 22px;
        background-image: url('@/assets/images/recharge/zk.png');
        background-size: 100% 100%;
        font-size: 12px;
        text-align: center;
        padding-left: 5px;
        font-family:
          PingFangSC,
          PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 20px;
      }
    }
    .deadline {
      font-size: 12px;
      font-family:
        PingFangSC,
        PingFang SC;
      font-weight: 400;
      color: #d39764;
    }
    .equitiesbox {
      margin-top: 10px;
      .equities {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;
        padding: 5px 0;
        font-family:
          PingFangSC,
          PingFang SC;
        font-weight: 400;
        color: #6b2d01;
        line-height: 20px;
      }
    }
    .price {
      margin-top: 5px;
      display: flex;
      align-items: flex-end;
      .nowprice {
        font-size: 27px;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: 800;
        color: #6b2d01;

        letter-spacing: 4px;
      }
      .oldprice {
        margin-left: 10px;
        font-size: 14px;
        font-family:
          PingFangSC,
          PingFang SC;
        font-weight: 400;
        color: #b38d6a;
        padding-bottom: 5px;
        letter-spacing: 1px;
        text-decoration: line-through;
      }
    }
    .payBtn {
      margin-top: 5px;
      .customBtn {
        width: 100%;
        height: 35px;
        background: linear-gradient(135deg, #ab6745 0%, #6b4831 100%);
        border-radius: 8px;
        color: #ffffff;
      }
    }
  }
}
</style>
