<script lang="ts" setup>
import { CloseOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons-vue'
import { Button, Carousel } from 'ant-design-vue'
import { ref } from 'vue'
import trumpet from '@/assets/images/recharge/lb.png'

import { useRechargeStore } from '@/store/moules/rechareStore'

const rechargeStore = useRechargeStore()
const carouselRef = ref()

// 关闭充值弹窗
function handleClose() {
  rechargeStore.rechargeClose()
}
// 选项卡目录
const tabs = ref([
  { title: '日套餐', active: true },
  { title: '七日套餐', active: false },
  { title: '月套餐', active: false },
  { title: '年套餐', active: false },
  { title: '至尊礼遇卡', active: false },
])
// 选项卡索引
const activeTab = ref(0)
const items = ref(['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8'])

// 选中选项卡
function selectTab(index: number) {
  activeTab.value = index
}
// 选项卡样式
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'
  }
}
// 至尊权益
const extreme = ref([{
  num: 10000,
  unit: '点数',
  name: '同聪点数',
}, {
  num: '无限',
  unit: '',
  name: '可回答3.5版本问题',
}, {
  num: 5000,
  unit: '条',
  name: '可回答4.0版本问题',
}, {
  num: 10000,
  unit: '幅',
  name: '可生成图片',
}])
// 走马灯向上
function onPrevClick() {
  carouselRef.value.prev()
}
// 走马灯向下
function onNextClick() {
  carouselRef.value.next()
}
</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="(tab, index) in tabs"
                  :key="index"
                  :class="tabClass(index)"
                  @click="selectTab(index)"
                >
                  {{ tab.title }}
                </div>
              </div>
            </div>
            <div class="bottom">
              <div v-if="activeTab !== 4" class="basic-meal">
                <div class="prev-button prev" @click="onPrevClick">
                  <LeftOutlined />
                </div>
                <Carousel ref="carouselRef" arrows :dots="false" :autoplay="false" :slides-to-show="3" :slides-to-scroll="1">
                  <div v-for="(item, index) in items" :key="index" class="carouse-box">
                    <div class="carouse-item">
                      <div class="dotnumbox">
                        <div class="dotnum">
                          100点数
                        </div>
                        <div class="discount">
                          限时折扣
                        </div>
                      </div>
                      <div class="deadline">
                        使用期限1个月
                      </div>
                      <div class="equitiesbox">
                        <div class="equities">
                          <div class="left">
                            GPT3.5版本
                          </div>
                          <div class="right">
                            250条
                          </div>
                        </div>

                        <div class="equities">
                          <div class="left">
                            GPT4.0版本
                          </div>
                          <div class="right">
                            25条
                          </div>
                        </div>
                        <div class="equities">
                          <div class="left">
                            AI绘图
                          </div>
                          <div class="right">
                            50幅
                          </div>
                        </div>
                      </div>
                      <div class="price">
                        <div class="nowprice">
                          ¥39.9
                        </div>
                        <div class="oldprice">
                          ¥50.00
                        </div>
                      </div>
                      <div class="payBtn">
                        <Button class="customBtn">
                          立即充值
                        </Button>
                      </div>
                    </div>
                  </div>
                </Carousel>
                <div 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>这是第一条滚动的公告</span>
                        <span>这是第二条滚动的公告</span>
                        <span>这是第三条滚动的公告</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 v-for="(item, index) in extreme" :key="index" class="extremeequitynum-box">
                        <div class="extremeequitynum-box-top">
                          <span class="num">{{ item.num }}</span>
                          <span class="unit">{{ item.unit }}</span>
                        </div>
                        <div class="extremeequitynum-box-bottom">
                          {{ item.name }}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="extremeopen">
                    <div class="openleft">
                      <span class="freeprice">畅享价：</span>
                      <span class="newprice">¥2999</span>
                      <span class="oldprice">¥4999</span>
                    </div>
                    <div class="openright">
                      <div class="year">
                        使用期限1年
                      </div>
                      <div class="immediately">
                        立即开通
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="close" @click="handleClose">
          <CloseOutlined />
        </div>
      </div>
    </div>
  </transition>
</template>

  <style scoped lang="scss">
  .modal-mask {
  position: fixed;

  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: 30px 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: FZQKBYSJW--GB1, FZQKBYSJW--GB1;
                  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;
                    }
                    .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;
}

.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;
  overflow: hidden;
  letter-spacing: 2px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  position: relative;
  transition: all 0.3s ease;
}
.tab:not(:last-child)::after {
  content: '';
  border-right: 1px solid #f1d7b6;
  position: absolute;
  top: 0;
  bottom: 6px;
  right: 0;
}
.tab:last-child::before {
  content: '';
  display: inline-block;
  width: 30px; /* 调整宽度 */
  height: 30px; /* 调整高度 */
  background-image: url('@/assets/images/recharge/vip.png');
  background-size: contain; /* 背景图片保持比例填充 */
  background-repeat: no-repeat; /* 防止背景图片重复 */
  margin-right: 5px;
  vertical-align: middle;
}

.tab.active.square {
  background-color: white;
}

.tab.active.triangle:first-child {
  border-top-left-radius: 12px;
  background-color: white;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.tab.active.triangle:last-child {
  background-color: #0f0745;
  color: #ffac72;
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%);
}
</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>
