<template>
  <div class="vip-dialog" ref="vipModal">
    <a-modal
      :class="'vipDialog'"
      v-model:open="props.vipDialogVisible"
      :closable="false"
      :footer="null"
      :getContainer="() => $refs.vipModal"
      :maskClosable="false"
      destroyOnClose
    >
      <div class="top-close" @click="handleCancel">
        <img src="@/assets/img/marketplace/Close_counter.png" alt />
      </div>
      <div class="vip-dialog-content">
        <div class="vip-top">
          <div class="vip-top-left">
            <div class="vip-logo">
              <img src="@/assets/img/staking/VIP5.png" alt="">
            </div>
            <div class="vip-info">
              <h1>VIP 5</h1>
              <p class="vip-status">VIP status is normal</p>
              <div class="vip-rules">
                <span>VIP points rules</span>
                <div class="vip-rules-box">
                  <div class="vip-rules-box-tit">
                    VIP growth value description
                  </div>
                  <p>1. The growth value is not accumulated. According to the CEC being pledged, 1 CEC pledged = 1 point of VIP growth value.</p>
                  <p>2. When the number of CEC currently pledged by the user is less than the growth value, it will enter the recession mechanism.</p>
                  <p>3. Decline mechanism: VIP growth value decreases over time until it equals the number of CEC currently pledged by the user.
                      wait. When the number of CEC pledged by the user is greater than or equal to the growth value, the decline mechanism will be exited.</p>
                </div>
              </div>
            </div>
          </div>
          <div class="vip-top-right" @click="toStake">
            Go to stake CEC
          </div>
        </div>
        <div class="vip-bar">
          <div class="vip-bar-amount"></div>
          <span>2501/3000</span>
        </div>
        <div class="vip-swiper">
          <!--   :autoplay="{ delay: 3200, disableOnInteraction: true }"
              :navigation="navigation" -->
          <Swiper
            :modules="modules" 
            :slidesPerView="2"
            :loop="true"
            :initialSlide="vipGrade"
            :centeredSlides="false"
            :navigation="navigation"
            @slideChange="onSlideChange"
            class="mySwiper"
          >
            <SwiperSlide v-for="(slide, index) in vipList" :key="index">
              <div
                :class="vipGrade == index ? 'vip-card' : ''"
              >
              <div class="vip-tit">{{ slide.title }}</div>
              <p v-html="slide.text1"></p>
              <p v-html="slide.text2"></p>
              <p v-html="slide.text3"></p>
              </div>
            </SwiperSlide>
          </Swiper>
          <div class="swiper-button-next"></div>
          <div class="swiper-button-prev"></div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import {ref} from "vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Pagination, Navigation, Autoplay } from "swiper/modules";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";

const modules = [Pagination, Navigation, Autoplay];
const navigation = ref({
  nextEl: ".swiper-button-next",
  prevEl: ".swiper-button-prev",
});

const props = defineProps({
  vipDialogVisible: {
    type: Boolean,
    required: true,
  },
  buyDataArr: {
    type: Array,
    required: true,
  },
});

const vipGrade = ref(0);
const vipList = ref([
  {
    title: "VIP1 Privileges",
    text1: "1.Have all VIP4 privileges ",
    text2: "2. <span>9.2%</span> off in game mall ",
    text3: "3. Gold inc <span>5%</span>",
  },
  {
    title: "VIP2 Privileges",
    text1: "1.Have all VIP4 privileges ",
    text2: "2. <span>9.2%</span> off in game mall ",
    text3: "3. Gold inc <span>5%</span>",
  },
  {
    title: "VIP3 Privileges",
    text1: "1.Have all VIP4 privileges ",
    text2: "2. <span>9.2%</span> off in game mall ",
    text3: "3. Gold inc <span>5%</span>",
  },
  {
    title: "VIP4 Privileges",
    text1: "1.Have all VIP4 privileges ",
    text2: "2. <span>9.2%</span> off in game mall ",
    text3: "3. Gold inc <span>5%</span>",
  },
  {
    title: "VIP5 Privileges",
    text1: "1.Have all VIP4 privileges ",
    text2: "2. <span>9.2%</span> off in game mall ",
    text3: "3. Gold inc <span>5%</span>",
  }
])

const emit = defineEmits(["handleClose", "vipDialogCli"]);
const handleCancel = (e) => {
  emit("handleClose");
};

const toStake = () => {
  emit("vipDialogCli");
}

const onSlideChange = (swiper) => {
  console.log("Slide changed to index:", swiper.realIndex);
  // swiper.realIndex = vipGrade.value
};

</script>

<style lang="scss" scoped>
:deep(.vipDialog) {
  width: 1200px !important;
  height: 755px;
  .ant-modal-content {
    height: 100%;
    padding: 0px;
    background: #1a1821;
    border: 1px solid #b966ff;
    box-shadow: 0px 15px 28px 3px rgba(22, 22, 22, 0.13);
    border-radius: 100px;
  }
}
.vip-dialog {
  .top-close {
    position: absolute;
    top: -23px;
    right: -23px;
    width: 106px;
    height: 106px;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .vip-dialog-content {
    width: 1068px;
    margin: 0 auto;
    height: 100%;
    .vip-top {
      display: flex;
      justify-content: space-between;
      width: 987px;
      margin: 0 auto;
      margin-top: 31px;
      .vip-top-left {
        display: flex;
        align-items: center;
        color: #fff;
        .vip-logo {
          width: 195px;
          height: 189px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .vip-info {
          margin-left: 18px;
          h1 {
            height: 42px;
            font-family: 'Anton';
            font-weight: 400;
            font-size: 48px;
            line-height: 42px;
            margin-bottom: 12px;
          }
          .vip-status {
            height: 18px;
            font-family: 'Poppins';
            font-weight: 400;
            font-size: 22px;
            color: #9950FD;
            margin-bottom: 12px;
          }
          .vip-rules {
            position: relative;
            span {
              font-family: 'Poppins';
              font-weight: 400;
              font-size: 16px;
              color: #B29DD1;
              text-decoration-line: underline;
              cursor: pointer;
            }
            .vip-rules-box {
              display: none;
              position: absolute;
              top: -85px;
              right: -745px;
              width: 825px;
              padding: 30px 40px;
              height: 346px;
              background: #1A1821;
              box-shadow: 0px 15px 28px 3px rgba(22,22,22,0.13);
              border-radius: 20px;
              border: 1px solid #B966FF;
              z-index: 9;
              .vip-rules-box-tit {
                font-family: 'Poppins-Regular';
                font-weight: 400;
                font-size: 20px;
                border-bottom: 1px solid #ACA3C6;
                padding-bottom: 5px;
              }
              p {
                margin-top: 10px;
                line-height: 1.8;
                font-family: 'Poppins-Regular';
                font-weight: 400;
                font-size: 16px;
                color: #B29DD1;
              }
            }
            &:hover {
              .vip-rules-box {
                display: block;
              }
            }
          }
        }
      }
      .vip-top-right {
        width: 295px;
        height: 60px;
        line-height: 60px;
        margin-top: 110px;
        text-align: center;
        background: #FEC25D;
        border-radius: 30px;
        font-family: 'Poppins-Regular';
        font-weight: 400;
        font-size: 24px;
        color: #2D2738;
        cursor: pointer;
      }
    }
    .vip-bar {
      width: 987px;
      margin: 0 auto;
      height: 41px;
      line-height: 41px;
      display: flex;
      margin: 15px 0 46px 40px;
      background: #2A2736;
      border-radius: 21px;
      position: relative;
      overflow: hidden;
      .vip-bar-amount {
        width: 687px;
        height: 41px;
        background: linear-gradient(0deg, #5032EB, #6F4BF5);
      }
      span {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        font-family: 'Poppins-Regular';
        font-weight: 400;
        font-size: 20px;
        color: #FFFFFF;
      }
    }
    .vip-swiper {
      width: 1068px;
      height: 367px;
      margin: 0 auto;
      color: #fff;
      position: relative;
      overflow: hidden;
      .mySwiper {
          width: 983px !important;
        overflow: hidden;
        .swiper-wrapper {
          .swiper-slide {
            width: 474px !important;
            height: 367px;
            margin-right: 20px;
            position: relative;
            overflow: hidden;
            >div {
              width: 100%;
              height: 100%;
              background: #1a1821;
              border: 1px solid #2A2736;
              border-radius: 20px;
              .vip-tit {
                height: 53px;
                line-height: 53px;
                padding-left: 39px;
                margin-bottom: 20px;
                border-radius: 20px 20px 0px 0px;
                background: #2A2736;
                font-family: 'Poppins';
                font-weight: bold;
                font-size: 24px;
                color: #B29DD1;
              }
              p {
                padding-left: 39px;
                font-weight: 400;
                font-size: 18px;
                font-family: 'Poppins-Regular';
                color: #7A6F9D;
                :deep span {
                  color: #BB7FFF;
                }
              }
            }
            .vip-card {
              background: #24212E;
              border: 2px solid #BB7FFF;
              .vip-tit {
                background: #BB7FFF;
                color: #1A1821;
              }
              p {
                color: #fff;
                :deep span {
                  color: #BB7FFF;
                }
              }
            }
          }
        }
        
      }
    }
    .swiper-button-prev {
      width: 23px;
      height: 48px;
      position: absolute;
      left: -0px;
    }
    .swiper-button-prev::after {
      content: "";
      background: url("@/assets/img/staking/VIP_arrow.png") no-repeat;
      background-size: 100% 100%;
      width: 23px;
      height: 43px;
    }
    .swiper-button-next {
      width: 23px;
      transform: rotateY(180deg);
      position: absolute;
      right: -0px;
    }
    .swiper-button-next::after {
      content: "";
      background: url("@/assets/img/staking/VIP_arrow.png") no-repeat;
      background-size: 100% 100%;
      width: 23px;
      height: 43px;
    }
  }
}
</style>