<template>
  <div class="Member-Center narrow-scrollbar">
    <div class="Member-item1">
      <div class="Member-open">
        <img
          class="member-img"
          :src="userInfo.avatar ?? '/images/svg/header/userOne.svg'"
          alt=""
        />
        <p class="p1-blue">{{ userInfo.vip_type ?? '---' }}</p>
        <div class="expire-time">
          <p>{{ $t('user.ExpirationDate') }}</p>
          <p class="p1-item">
            {{
              userInfo.vip_type === '免费会员'
                ? $t('user.NotOpen')
                : userInfo.vip_time
            }}
          </p>
        </div>
      </div>
      <div class="Member-invite">
        <div class="Member-center1">
          <h3>{{ $t('user.Dear') }} {{ userInfo.name }}：</h3>
          <div class="Menber-grade">
            {{ $t('user.PackageLevel') }}:
            <p class="Menber-grade-p1">{{ userInfo.vip_type ?? '---' }}</p>
          </div>
          <div class="Menber-bound" v-if="!userInfo.is_bind">
            <p>{{ $t('user.BindingInvitationCode') }}：</p>
            <t-input
              v-model="BindCode"
              type="text"
              :placeholder="$t('login.enterInvitationCode')"
              :maxlength="8"
            />
            <t-button
              @click="BindingInCode"
              class="custom_button_back_border"
              >{{ $t('user.Confirm') }}</t-button
            >
          </div>
          <div class="Menber-bound" v-else>
            <span class="member-span">{{ $t('user.haveBound') }}！</span>
          </div>
        </div>
        <div class="Member-center2">
          <t-button class="custom_button_back_border">{{
            $t('user.BillingDetails')
          }}</t-button>
        </div>
      </div>
    </div>
    <div class="Member-item2">
      <h3>{{ $t('user.PackageOpening') }}</h3>
      <div class="Member-set-meal">
        <div class="vip-item" v-for="item in comboData.list" :key="item.title">
          <p>{{ item.title }}</p>
          <p>${{ item.price }}</p>
          <p class="delete-p">
            {{ $t('user.OriginalPrice') }}{{ item.origin_price }}
          </p>
          <p>{{ $t('user.MemberDays') }}{{ item.vip_days }}</p>
          <t-divider class="divider-box" />
          <p v-for="it in item.describe" :key="it">{{ it }}</p>
          <t-button
            @click="payBtn(item.price)"
            class="custom_button_back_border"
            >{{ $t('user.BuyNow') }}</t-button
          >
        </div>
      </div>
    </div>
    <div class="defeate-succeed"></div>
    <PayFox
      :hasPayDialog="hasPayDialog"
      @closePayDialog="closePayDialog"
      :price="comboData.price"
    ></PayFox>
  </div>
</template>
<script lang="ts" setup>
import PayFox from './payFox.vue';
import request from '@/utils/request';
import { MessagePlugin } from 'tdesign-vue-next';
// 用户信息
const userInfo = useTokenInfo();
// 用户token
const Cookie = useCookie('userCookie');
// 绑定邀请码输入框
const BindCode = ref('');
// 支付弹窗的打开与关闭
const hasPayDialog = ref(false);
onMounted(() => {
  getMemberList();
});
// 套餐
const comboData = reactive({
  list: [],
  // 当前选择的价格
  price: '',
});
// 获取会员列表
const getMemberList = async () => {
  const res: any = await request.get('/api/vip/list', {});
  if (res.code === 0) {
    comboData.list = res.data.list;
  }
};
// 打开支付弹窗并传入价格
const payBtn = (price: string) => {
  hasPayDialog.value = true;
  comboData.price = price;
};
// 绑定邀请码
const BindingInCode = async () => {
  try {
    const res: any = await request.post(
      '/api/user/bind',
      {
        invite_code: BindCode.value,
      },
      {
        headers: {
          authorization: `Bearer ${Cookie.value}`,
        },
      }
    );
    if (res.code === 0) {
      MessagePlugin.success('绑定成功');
      // 修改当前状态
      userInfo.value['is_bind'] = 1;
    } else {
      MessagePlugin.warning('绑定失败');
    }
  } catch (e) {}
};
// 关闭支付弹窗
const closePayDialog = (value: boolean) => {
  hasPayDialog.value = value;
};
</script>

<style lang="less" scoped>
@import '@/style/variables.less';
@import '@/style/flex.less';
.Member-Center {
  height: calc(100vh - 70px);
  overflow-x: auto;
  .Member-item1 {
    width: calc(100vw - 410px);
    .dj(space-between);
    margin-top: 20px;
    height: 20%;
    min-height: 200px;
    .Member-open {
      border: 1px solid var(--td-Search-info-border-bottom-2);
      width: 24%;
      min-width: 270px;
      border-radius: 5px;
      .dja();
      flex-direction: column;
      .member-img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
      }
      .p1-blue {
        color: #257bfb;
        margin: 12px 0;
        font-size: 16px;
        font-weight: bolder;
      }
      .expire-time {
        .da();
        height: 27px;
        margin-bottom: 15px;
        .p1-item {
          font-weight: bolder;
        }
      }
    }
    .Member-invite {
      width: 74%;
      min-width: 600px;
      border-radius: 5px;
      border: 1px solid var(--td-Search-info-border-bottom-2);
      .dj(space-between);
      padding: 20px;
      margin-left: 12px;
      .Member-center1 {
        .dja(space-around,flex-start);
        flex-direction: column;
        .Menber-grade {
          .da();
          height: 22px;
          line-height: 20px;
          .Menber-grade-p1 {
            background-color: #d3e5fe;
            color: var(--td--main-btn-color-1);
            font-weight: bolder;
            padding: 3px 6px;
            margin: 0 10px;
            border-radius: 3px;
          }
        }
        .Menber-bound {
          .da();
          .t-button {
            margin: 0 10px;
            overflow: visible;
          }
          // 已经绑定
          .member-span {
            font-weight: bold;
            font-size: @font-size-l;
          }
          p {
            white-space: nowrap;
          }
        }
      }
      .Member-center2 {
        text-align: right;
      }
    }
  }
  .Member-item2 {
    min-width: 860px;
    margin-top: 30px;
    border: 1px solid var(--td-Search-info-border-bottom-2);
    padding: 15px 20px;
    height: calc(80% - 88px);
    h3 {
      text-align: left;
    }
    .Member-set-meal {
      margin-top: 70px;
      .dj(space-around);
      .vip-item {
        cursor: pointer;
        width: 300px;
        .dja(space-evenly,center);
        flex-direction: column;
        border: 1px solid var(--td-Search-info-border-bottom-2);
        border-radius: 6px;
        .divider-box {
          width: 80%;
          margin: 0 !important;
        }
        > p:nth-child(1) {
          font-size: @font-size-xl;
          font-weight: bold;
          padding-top: 6px !important;
          color: rgb(68, 68, 68);
        }
        > p:nth-child(2) {
          font-size: 26px;
          font-weight: bold;
          padding-top: 22px !important;
        }
        > p:nth-child(3) {
          font-size: @font-size-base;
          text-decoration: line-through;
          color: rgb(68, 68, 68);
        }
        > p:nth-child(n + 6) {
          color: rgb(68, 68, 68);
        }
        &:hover {
          box-shadow: 0px 0px 20px 0px #92bdfd;
          border: 1px solid #92bdfd;
          transition: all 0.3s;
        }
        .t-button {
          width: 96px;
          height: 33px;
          margin: 20px 0;
        }
      }
    }
  }
}
</style>
