<template>
  <mobile-sub-layout :title="$t('vip.VIP')" :bgColor="themeStore.theme.bgColor">
    <view class="vip-body"
      :style="{ background: `top / cover no-repeat ${themeStore.theme.home.bgColor}`, minHeight: (appStore.windowInfo.screenHeight - appStore.appStatusBarHeight - 50) + 'px' }">
      <HomeUserInfo />
      <view class="vip-swiper">
        <swiper class="swiper-view" :duration="500" previous-margin="60rpx" circular next-margin="60rpx"
          @change="handleSwipeChange">
          <swiper-item v-for="(vipData, index) in vipConfigList" :key="index" class="swiper-item">
            <view class="vip-box" style="width: 95%; margin: auto;">
              <VipItem :vip-info="vipData" />
            </view>
          </swiper-item>
        </swiper>
      </view>
      <view class="vip-bonus">
        <view class="vip-list-item-content-top-item">
          <view class="item-wrap">
            <theme-image src="@/static/vip/UpGrade-icon.png" class="item-icon" mode="aspectFit"></theme-image>
            <view class="vip-list-item-content-top-item-right">
              <text :style="{ color: themeStore.theme.vip.titleColor }">{{ $t("vip.upGradeBouns") }}</text>
              <text :style="{ color: themeStore.theme.vip.valueColor, 'margin-top': '10rpx' }">{{
                currentVipConfig.upgradeReward }}</text>
            </view>
          </view>
        </view>
        <view class="vip-list-item-content-top-item">
          <view class="item-wrap">
            <theme-image src="@/static/vip/bet-icon.png" class="item-icon" mode="aspectFit"></theme-image>
            <view class="vip-list-item-content-top-item-right">
              <text :style="{ color: themeStore.theme.vip.titleColor }">{{ $t("vip.betRebate") }}</text>
              <text :style="{ color: themeStore.theme.vip.valueColor, 'margin-top': '10rpx' }">{{
                $formatFloat(currentVipConfig.betRebateRate *
                  100, 2)
              }}%</text>
            </view>
          </view>
        </view>
        <view class="vip-list-item-content-top-item" v-if="currentVipConfig.weekReward">
          <view class="item-wrap">
            <theme-image src="@/static/vip/weekly-icon.png" class="item-icon" mode="aspectFit"></theme-image>
            <view class="vip-list-item-content-top-item-right">
              <text :style="{ color: themeStore.theme.vip.titleColor }">{{ $t("vip.weeklyBouns") }}</text>
              <text :style="{ color: themeStore.theme.vip.valueColor, 'margin-top': '10rpx' }">{{
                currentVipConfig.weekReward }}</text>
            </view>
          </view>
        </view>
        <view class="vip-list-item-content-top-item" v-if="currentVipConfig.birthdayReward">
          <view class="item-wrap">
            <theme-image src="@/static/vip/Birthday-icon.png" class="item-icon" mode="aspectFit"></theme-image>
            <view class="vip-list-item-content-top-item-right">
              <text :style="{ color: themeStore.theme.vip.titleColor }">{{ $t("vip.birthdayBouns") }}</text>
              <text :style="{ color: themeStore.theme.vip.valueColor, 'margin-top': '10rpx' }">{{
                currentVipConfig.birthdayReward }}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="rights-box">
        <view class="inner-box">
          <view class="vip-list-item-content-bottom-item">
            <text :style="{ color: themeStore.theme.vip.titleColor }">{{ $t("vip.withdrawDailyLimited")
              }}:</text>
            <text :style="{ color: themeStore.theme.vip.valueColor }">{{ currentVipConfig.withdrawLimit }}</text>
          </view>
          <view class="vip-list-item-content-bottom-item">
            <text :style="{ color: themeStore.theme.vip.titleColor }">{{ $t("vip.withdrawFee") }}:</text>
            <text :style="{ color: themeStore.theme.vip.valueColor }">{{ $formatFloat(currentVipConfig.withdrawFee *
              100, 2)
              }}%</text>
          </view>
          <view class="vip-list-item-content-bottom-item">
            <text :style="{ color: themeStore.theme.vip.titleColor }">{{ $t("vip.withdrawDailyTimes")
              }}:</text>
            <text :style="{ color: themeStore.theme.vip.valueColor }">{{ currentVipConfig.withdrawCountLimit }}</text>
          </view>
          <view class="vip-list-item-content-bottom-item">
            <text :style="{ color: themeStore.theme.vip.titleColor }">{{ $t("vip.relegationRequirements")
              }}:</text>
            <text :style="{ color: themeStore.theme.vip.valueColor }">{{ $t("vip.deposit") }}
              {{ currentVipConfig.relegationRechargeAmount }}</text>
          </view>
          <view class="vip-list-item-content-bottom-item">
            <text :style="{ color: themeStore.theme.vip.titleColor }">{{ $t("vip.VIPCustomerService")
              }}：</text>
            <text :style="{ color: themeStore.theme.vip.valueColor }"
              v-if="current + 1 < userStore.minVipLevel || userStore.currentVipLevel < userStore.minVipLevel">{{
                $t("vip.exclusiveforVlP") }}>{{
                userStore.minVipLevel
              }}</text>
            <view v-else class="customer" :style="{
              border: themeStore.theme.vip.border,
              background: themeStore.theme.vip.bg,
              backgroundSize: '100% 100%',
            }" @click="openCustomer">
              <theme-image src="@/static/vip/dh.png" mode="scaleToFill" class="customer-image-size" />
              <text :style="{
                color: themeStore.theme.vip.customerTextColor,
              }">{{ $t("vip.customer") }}</text>
            </view>
          </view>
        </view>
      </view>
      <view v-if="false">
        <view class="vip-top" :style="{ 'background-image': themeStore.imageCssUrl.vipBg }">
          <view class="vip-lv-content">
            <view class="vip-top-item">
              <theme-image :src="vipData.vipLevelUrl" class="vip-icon"></theme-image>
              <view class="vip-lv-text" :style="{ background: themeStore.theme.themeBgColor }">{{ $t("vip.VIP") }} {{
                vipData.vipLevel }}</view>
            </view>
            <theme-image src="@/static/vip/excessive.png" class="excessive-size"></theme-image>
            <view class="vip-top-item">
              <theme-image :src="vipData.nextLevelUrl" class="vip-icon"></theme-image>
              <view class="vip-lv-text" :style="{ background: themeStore.theme.themeBgColor }">{{ $t("vip.VIP") }} {{
                vipData.nextLevel }}</view>
            </view>
          </view>
          <view class="vip-exp">
            <view class="vip-max-exp" :style="{ background: themeStore.theme.themeBgColor }">
              <theme-image v-if="vipData.vipLevel > 1" class="vip-grading-iamge" :style="{ left: expWidth }"
                src="@/static/vip/g.png"></theme-image>
            </view>
            <view class="vip-exp-text" :style="{ 'text-stroke-color': themeStore.theme.themeBgColor }">{{ vipData.exp
              }}/{{ vipData.expMax }}</view>
            <view class="vip-current-exp" :style="{ width: expWidth }"></view>
          </view>
          <view class="vip-tips">
            <template v-if="vipData.vipLevel > 1">
              {{ $t("vip.relegationSuccessfuIl") }}:
              <text class="text-color">{{
                vipData.relegationRechargeAmount
                }}</text>
              ({{ $t("vip.thisMonth") }})
            </template>
          </view>
          <view class="vip-top-bottom">
            <view class="vip-top-bottom-text">
              {{ $t("vip.continueToDeposit") }}
              <text class="text-color">{{ vipData.expMax - vipData.exp }}</text>
              {{ $t("vip.toReach") }} {{ vipData.nextLevelName }}
            </view>
            <view class="vip-top-bottom-btn" :style="{ background: themeStore.theme.vip.topBottomBtnColor }"
              @click.stop="deposit">{{ $t("vip.deposit") }}</view>
          </view>
        </view>
        <view class="vip-list-body" :style="{ background: themeStore.theme.itemLightBgColor }">
          <view class="vip-list-item">
            <view class="vip-list-item-top">
              <theme-image class="vip-list-item-top-icon" src="@/static/vip/prev.png" @click="prev"></theme-image>
              <view class="vip-list-item-text"
                :style="{ color: themeStore.theme.vip.segTitleColor, 'background-image': themeStore.imageCssUrl.privileageBg }">
                {{ $t("vip.VIP") }} {{ current + 1 }}
                {{ $t("vip.privileges") }}</view>
              <theme-image class="vip-list-item-top-icon" src="@/static/vip/next.png" @click="next"></theme-image>
            </view>
            <view class="vip-list-item-content">
              <swiper class="swiper-style" :circular="false" :current="current" @change="handleChange">
                <swiper-item v-for="(item, index) in vipConfigList" :key="index">
                  <view class="plr30">
                    <view class="vip-list-item-content-top">
                      <view class="vip-list-item-content-top-item">
                        <theme-image src="@/static/vip/UpGrade-icon.png" class="item-icon"
                          mode="aspectFit"></theme-image>
                        <view class="vip-list-item-content-top-item-right">
                          <text :style="{ color: themeStore.theme.vip.titleColor }">{{ $t("vip.upGradeBouns") }}</text>
                          <text :style="{ color: themeStore.theme.vip.valueColor }">{{ item.upgradeReward }}</text>
                        </view>
                      </view>
                      <view class="vip-list-item-content-top-item">
                        <theme-image src="@/static/vip/bet-icon.png" class="item-icon" mode="aspectFit"></theme-image>
                        <view class="vip-list-item-content-top-item-right">
                          <text :style="{ color: themeStore.theme.vip.titleColor }">{{ $t("vip.betRebate") }}</text>
                          <text :style="{ color: themeStore.theme.vip.valueColor }">{{ $formatFloat(item.betRebateRate *
                            100, 2)
                            }}%</text>
                        </view>
                      </view>
                      <view class="vip-list-item-content-top-item" v-if="item.weekReward">
                        <theme-image src="@/static/vip/weekly-icon.png" class="item-icon"
                          mode="aspectFit"></theme-image>
                        <view class="vip-list-item-content-top-item-right">
                          <text :style="{ color: themeStore.theme.vip.titleColor }">{{ $t("vip.weeklyBouns") }}</text>
                          <text :style="{ color: themeStore.theme.vip.valueColor }">{{ item.weekReward }}</text>
                        </view>
                      </view>
                      <view class="vip-list-item-content-top-item" v-if="item.birthdayReward">
                        <theme-image src="@/static/vip/Birthday-icon.png" class="item-icon"
                          mode="aspectFit"></theme-image>
                        <view class="vip-list-item-content-top-item-right">
                          <text :style="{ color: themeStore.theme.vip.titleColor }">{{ $t("vip.birthdayBouns") }}</text>
                          <text :style="{ color: themeStore.theme.vip.valueColor }">{{ item.birthdayReward }}</text>
                        </view>
                      </view>
                    </view>
                    <view class="vip-list-item-content-bottom mt40">
                      <view class="vip-list-item-content-bottom-item">
                        <text :style="{ color: themeStore.theme.vip.titleColor }">{{ $t("vip.withdrawDailyLimited")
                          }}: </text>
                        <text :style="{ color: themeStore.theme.vip.valueColor }">{{ item.withdrawLimit }}</text>
                      </view>
                      <view class="vip-list-item-content-bottom-item">
                        <text :style="{ color: themeStore.theme.vip.titleColor }">{{ $t("vip.withdrawFee") }}: </text>
                        <text :style="{ color: themeStore.theme.vip.valueColor }">{{ $formatFloat(item.withdrawFee *
                          100, 2)
                          }}%</text>
                      </view>
                      <view class="vip-list-item-content-bottom-item">
                        <text :style="{ color: themeStore.theme.vip.titleColor }">{{ $t("vip.withdrawDailyTimes")
                          }}: </text>
                        <text :style="{ color: themeStore.theme.vip.valueColor }">{{ item.withdrawCountLimit }}</text>
                      </view>
                      <view class="vip-list-item-content-bottom-item">
                        <text :style="{ color: themeStore.theme.vip.titleColor }">{{ $t("vip.relegationRequirements")
                          }}: </text>
                        <text :style="{ color: themeStore.theme.vip.valueColor }">{{ $t("vip.deposit") }}
                          {{ item.relegationRechargeAmount }}</text>
                      </view>
                      <view class="vip-list-item-content-bottom-item">
                        <text :style="{ color: themeStore.theme.vip.titleColor }">{{ $t("vip.VIPCustomerService")
                          }}: </text>
                        <text :style="{ color: themeStore.theme.vip.valueColor }"
                          v-if="current + 1 < userStore.minVipLevel || userStore.currentVipLevel < userStore.minVipLevel">{{
                            $t("vip.exclusiveforVlP") }}>{{
                            userStore.minVipLevel
                          }}</text>
                        <view v-else class="customer" :style="{
                          border: themeStore.theme.vip.border,
                          background: themeStore.theme.vip.bg,
                          backgroundSize: '100% 100%',
                        }" @click="openCustomer">
                          <theme-image src="@/static/vip/dh.png" mode="scaleToFill" class="customer-image-size" />
                          <text :style="{
                            color: themeStore.theme.vip.customerTextColor,
                          }">{{ $t("vip.customer") }}</text>
                        </view>
                      </view>
                    </view>
                  </view>
                </swiper-item>
              </swiper>
            </view>
          </view>
        </view>
      </view>
    </view>
  </mobile-sub-layout>
</template>

<script setup>
import { ref, onMounted, reactive, computed } from "vue";
import { requestAppEventUpload } from "@/api/app.js";
import { useAppStore } from "@/store/useAppStore";
import { useThemeStore } from "@/store/useThemeStore";
import { useUserStore } from "@/store/useUserStore";
import { openUrl } from '@/module/utils/openUrl.js'
import HomeUserInfo from "@/pages/home/components/HomeUserInfo.vue";
import VipItem from "../account/components/VipItem/VipItem.vue";

const themeStore = useThemeStore();
const appStore = useAppStore();
const userStore = useUserStore()

let expWidth = ref("");
let vipData = reactive({
  vipLevel: "",
  vipLevelUrl: "",
  nextLevel: "",
  nextLevelUrl: "",
  nextLevelName: "",
  exp: 0,
  expMax: 0,
  relegationRechargeAmount: "",
});
let vipConfigList = ref([{}]);
let current = ref(0);

const handleSwipeChange = (e) => {
  current.value = e.detail.current;
};

const currentVipConfig = computed(() => {
  return vipConfigList.value[current.value];
});
onMounted(() => {
  loadData()
  requestAppEventUpload({
    logParam: "",
    logType: 1030,
  })
})

const next = () => {
  if (current.value == vipConfigList.value.length - 1) {
    current.value = 0;
  } else {
    current.value++;
  }
};
const prev = () => {
  if (current.value == 0) {
    current.value = vipConfigList.value.length - 1;
  } else {
    current.value--;
  }
};

const handleChange = (e) => {
  current.value = e.detail.current
}

const loadData = async () => {
  await userStore.getUserTotalInfo()
  const data = userStore.vipInfo
  vipConfigList.value = data.vipConfigList
  vipData.vipLevel = data.currentVipConfig.level;
  vipData.vipLevelUrl = data.currentVipConfig.picUrl;
  vipData.relegationRechargeAmount = data.currentVipConfig.relegationRechargeAmount;
  vipData.nextLevel = data.nextVipConfig.level;
  vipData.nextLevelUrl = data.nextVipConfig.picUrl;
  vipData.nextLevelName = data.nextVipConfig.name;
  vipData.exp = data.exp;
  vipData.expMax = data.expMax;
  expWidth.value = (vipData.exp / vipData.expMax) * 100 + "%";
}


const deposit = () => {
  uni.navigateTo({
    url: "/pages/wallet/Deposit",
  });
}

const openCustomer = () => {
  openUrl(userStore.serviceUrl)
}
</script>

<style lang="scss" scoped>
.vip-body {
  width: 100%;
  box-sizing: border-box;
  padding: 0 28rpx;
  padding-bottom: 80rpx;
  padding-top: 28rpx;

  .text-color {
    color: #ffdf3f;
  }

  .vip-swiper {
    margin-top: 46rpx;
    height: 244rpx;

    .swiper-view {
      height: 100%;
    }
  }

  .vip-box {
    border-radius: 16rpx;
    overflow: hidden;
  }

  .vip-bonus {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: 16rpx;
    margin-top: 28rpx;

    .vip-list-item-content-top-item {
      width: 340rpx;
      height: 132rpx;
      border-radius: 19rpx;
      background: linear-gradient(180deg, rgba(247, 164, 33, 1), rgba(253, 247, 171, 1), rgba(245, 127, 8, 1));
      padding: 1px;

      .item-wrap {
        width: 100%;
        height: 100%;
        border-radius: 19rpx;
        display: flex;
        align-items: center;
        background: linear-gradient(270deg, #3B0F10 0%, #6E1719 100%);
        padding: 0 26rpx;

        .item-icon {
          width: 58rpx;
          height: 58rpx;
          margin-right: 28rpx;
        }

        .vip-list-item-content-top-item-right {
          display: flex;
          flex-direction: column;
          font-weight: 500;
          font-size: 26rpx;
          color: #FFFFFF;
        }
      }

    }
  }

  .rights-box {
    width: 692rpx;
    min-height: 427rpx;
    margin-top: 16rpx;
    border-radius: 19rpx;
    padding: 1px;
    background: linear-gradient(180deg, rgba(247, 164, 33, 1), rgba(253, 247, 171, 1), rgba(245, 127, 8, 1));

    .inner-box {
      width: 100%;
      height: 100%;
      border-radius: 19rpx;
      background: linear-gradient(270deg, #3B0F10 0%, #6E1719 100%);
      padding: 27rpx;

      .vip-list-item-content-bottom-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 50rpx;
        font-weight: 500;
        font-size: 27rpx;
        color: #FFFFFF;
        &:last-child{
          margin-bottom: 0;
        }

        .customer {
          width: 158rpx;
          height: 47rpx;
          box-sizing: border-box;
          border-radius: 19rpx;
          padding-left: 14rpx;
          padding-right: 19rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 24rpx;

          .customer-image-size {
            width: 30rpx;
            height: 30rpx;
          }
        }
      }
    }
  }

  .vip-top {
    width: 100%;
    height: 356rpx;
    background-size: 100% 100%;

    .vip-lv-content {
      width: 100%;
      height: 190rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .excessive-size {
        width: 140rpx;
        height: 76rpx;
      }

      .vip-top-item {
        width: 40%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;

        .vip-lv-text {
          width: 121rpx;
          height: 32rpx;
          border-radius: 16rpx;
          line-height: 32rpx;
          text-align: center;
          margin-top: 5rpx;
          color: #fff;
          font-size: 26rpx;
        }

        .vip-icon {
          width: 144rpx;
          height: 115rpx;
        }
      }
    }

    .vip-exp {
      width: 100%;
      box-sizing: border-box;
      padding: 0 22rpx;
      height: 25rpx;
      margin-top: 35rpx;
      position: relative;

      .vip-max-exp {
        width: 100%;
        height: 100%;
        background: #791120;
        border-radius: 13rpx;
        position: relative;
      }

      .vip-exp-text {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        text-align: center;
        text-rendering: 1px #610505;
        font-size: 20rpx;
        color: #ffffff;
        line-height: 25rpx;
        z-index: 10;
        -webkit-text-stroke: 1rpx #610505;
      }

      .vip-current-exp {
        position: absolute;
        top: 0;
        height: 100%;
        background: linear-gradient(90deg, #ffd202 0%, #feffa0 100%);
        border-radius: 13rpx;
      }

      .vip-grading-iamge {
        position: absolute;
        left: 0;
        top: -27rpx;
        width: 24rpx;
        height: 65rpx;
        z-index: 10;
      }
    }

    .vip-tips {
      width: 100%;
      box-sizing: border-box;
      padding-left: 22rpx;
      font-size: 20rpx;
      color: #fff;
      height: 22rpx;
      margin-top: 19rpx;
    }

    .vip-top-bottom {
      width: 100%;
      box-sizing: border-box;
      padding-left: 22rpx;
      padding-right: 36rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .vip-top-bottom-text {
        font-size: 20rpx;
        color: #fff;
      }

      .vip-top-bottom-btn {
        width: 132rpx;
        height: 40rpx;
        border-radius: 20rpx;
        text-align: center;
        line-height: 40rpx;
        color: #fff;
        font-size: 24rpx;
      }
    }
  }

  .vip-list-body {
    width: 100%;
    margin-top: 30rpx;
    box-sizing: border-box;
    border-radius: 20rpx;

    .vip-list-item {
      width: 100%;

      .vip-list-item-top {
        width: 100%;
        box-sizing: border-box;
        padding: 0 30rpx;
        padding-top: 35rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .vip-list-item-top-icon {
          width: 40rpx;
          height: 56rpx;
        }

        .vip-list-item-text {
          width: 359rpx;
          height: 61rpx;
          background-size: 100% 100%;
          text-align: center;
          line-height: 61rpx;
          font-size: 34rpx;
        }
      }

      .vip-list-item-content {
        width: 100%;
        margin-top: 32rpx;
        box-sizing: border-box;

        .swiper-style {
          width: 100%;
          height: 800rpx;
          // height: 100% !important;
        }

        .vip-list-item-content-top {
          width: 100%;
          display: flex;
          justify-content: flex-start;
          flex-wrap: wrap;

          .vip-list-item-content-top-item {
            width: 49.9%;
            display: flex;
            align-items: center;
            padding: 24rpx 8rpx;

            .item-icon {
              width: 60rpx;
              height: 60rpx;
              margin-right: 20rpx;
            }

            .vip-list-item-content-top-item-right {
              display: flex;
              justify-content: space-between;
              flex-direction: column;
              font-size: 28rpx;
              color: #fff;
            }
          }
        }

        .vip-list-item-content-bottom {
          width: 100%;

          .vip-list-item-content-bottom-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 50rpx;
            font-size: 28rpx;

            .customer {
              width: 158rpx;
              height: 47rpx;
              box-sizing: border-box;
              border-radius: 19rpx;
              padding-left: 14rpx;
              padding-right: 19rpx;
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-size: 24rpx;

              .customer-image-size {
                width: 30rpx;
                height: 30rpx;
              }
            }
          }
        }
      }
    }
  }
}
</style>
