<template>
  <div class="welfare-data">
    <div class="material-benefits">
      <h2>{{ $t('user.InvitationBenefits') }}</h2>
      <div class="invite-dataItem">
        <div class="invite-ItemData">
          <p>{{ $t('user.MyInvitationCode') }}</p>
          <p class="ItemData-p1">{{ formData.invite_code ?? '------' }}</p>
          <img
            @click="doCopy(formData.invite_code)"
            :src="Imgs.copySvg"
            alt=""
          />
        </div>
        <div class="invite-ItemData">
          <p>{{ $t('user.InvitationLinks') }}</p>
          <p class="ItemData-p1">{{ formData.invite_href ?? '------' }}</p>
          <img
            @click="doCopy(formData.invite_href)"
            :src="Imgs.copySvg"
            alt=""
          />
        </div>
        <div class="invite-ItemData">
          <p>{{ $t('user.InvitationPoints') }}</p>
          <p class="ItemData-p1">0</p>
        </div>
      </div>
      <div class="btn-list">
        <t-button
          class="custom_button_back_border"
          @click="QrCodevisible = true"
          >{{ $t('user.InvitationQRCode') }}</t-button
        >
        <t-button class="btn-item1" @click="InvitedVisible = true">{{
          $t('user.AwardCollection')
        }}</t-button>
        <InvitedDialog
          :InvitedVisible="InvitedVisible"
          @closeInvitedDialog="closeInvitedDialog"
        ></InvitedDialog>
      </div>
      <t-button
        @click="recordVisible = true"
        class="record-btn custom_button_back_border"
        >{{ $t('user.InvitationRecord') }}</t-button
      >
      <RecordDialog
        :inviteData="formData.inviteList"
        @closeRecordDialog="closeRecordDialog"
        :recordVisible="recordVisible"
      ></RecordDialog>
    </div>
    <div class="material-item">
      <div class="effectivity">
        <div class="effectivity-item1">
          <h2>{{ formData.invite_total ?? '0' }}</h2>
          <p>{{ $t('user.TotalNumber') }}</p>
        </div>
        <div class="line"></div>
        <div class="effectivity-item1">
          <h2>{{ formData.valid_invite_total ?? '0' }}</h2>
          <p>{{ $t('user.ValidInvitation') }}</p>
        </div>
      </div>
      <div class="regulation">
        <h1>{{ $t('user.InvitationRules') }}</h1>
        <div class="regulation-content narrow-scrollbar">
          <p>1、{{ $t('user.Rule1') }}</p>
          <p>2、{{ $t('user.Rule2') }}</p>
          <p>3、{{ $t('user.Rule3') }}</p>
          <p>4、{{ $t('user.Rule4') }}</p>
          <p>5、{{ $t('user.Rule5') }}</p>
        </div>
      </div>
    </div>
    <!-- 积分兑换弹框 -->
    <div class="credits-exchange">
      <t-dialog
        :footer="false"
        placement="center"
        v-model:visible="visible4"
        :draggable="true"
      >
        <template #header>
          <h2>积分兑换</h2>
        </template>
        <template #body>
          <div class="credits-data">
            <div class="credits-itemList">
              <p>兑换类型：</p>
              <p class="credits-p1">会员天数</p>
            </div>
            <div class="credits-itemList">
              <p>兑换积分：</p>
              <div class="credits-time">
                <span>100</span>
                <p>/1天</p>
              </div>
            </div>
            <div class="credits-itemList">
              <p>兑换数量：</p>
              <div class="credits-time">
                <t-input-number
                  v-model="value"
                  theme="row"
                  size="medium"
                  :max="100"
                  :min="1"
                  :disabled="false"
                ></t-input-number>
              </div>
            </div>
            <div class="credits-itemList">
              <div class="total-numver">
                <p>合计:</p>
                <p class="total-p">{{ value * value2 }}</p>
              </div>
              <t-button class="verify-btn custom_button_back_border"
                >确认</t-button
              >
            </div>
          </div>
        </template>
      </t-dialog>
    </div>
    <!-- 二维码弹窗 -->
    <QrCodeDialog
      id="qr-code-one"
      @closeDialog="closeDialog"
      :QrCodevisible="QrCodevisible"
      :QrCode="formData.invite_href"
    >
    </QrCodeDialog>
  </div>
</template>
<script lang="ts" setup>
import InvitedDialog from './InvitedDialog.vue';
import RecordDialog from './recordDialog.vue';
import request from '@/utils/request';
import useCopy from '@/hooks/useCopy';
const { doCopy } = useCopy();
const Cookie = useCookie('userCookie');
const Imgs = {
  copySvg: '/images/svg/header/copy.svg',
};
const formData = reactive({
  invite_code: '',
  invite_href: '',
  invite_total: '',
  valid_invite_total: '',
  inviteList: [],
});
const InvitedVisible = ref(false);
const recordVisible = ref(false); //邀请记录弹出框
const QrCodevisible = ref(false); //邀请二维码弹出框
const visible4 = ref(false); //积分兑换弹出框
const value = ref(1); //默认数量
const value2 = ref(100); //默认消耗积分
onMounted(() => {
  getinvitationList();
});
const getinvitationList = async () => {
  const res: any = await request.get('/api/user/invite/info', {
    headers: {
      authorization: `Bearer ${Cookie.value}`,
    },
  });
  if (res.code === 0) {
    formData.invite_code = res.data.invite_code;
    formData.invite_href = res.data.invite_href;
    formData.invite_total = res.data.invite_total;
    formData.valid_invite_total = res.data.valid_invite_total;
    //邀请记录加上index-作为表格唯一标识符
    res.data.invite_list.forEach((item: any, index: number) => {
      item.index = index;
    });
    formData.inviteList = res.data;
  }
};
// 二维码弹窗关闭事件
const closeDialog = (value: boolean) => {
  if (!value) {
    QrCodevisible.value = value;
  }
};
// 领取奖励弹窗关闭事件
const closeInvitedDialog = (value: boolean) => {
  if (!value) {
    InvitedVisible.value = value;
  }
};
// 邀请记录弹窗关闭事件
const closeRecordDialog = (value: boolean) => {
  if (!value) {
    recordVisible.value = value;
  }
};
</script>
<style lang="less" scoped>
@import '@/style/flex.less';
.welfare-data {
  border: 1px solid var(--td-Search-info-border-bottom-2);
  width: calc(100vw - 410px);
  height: calc(100vh - 70px);
  border-radius: 5px;
  .credits-exchange {
    :deep(.t-dialog) {
      width: 396px;
      height: 260px;
      .t-dialog--default {
        padding: 0;
      }
      .t-dialog__header {
        padding: 10px 20px;
        height: 45px;
        background-color: #f8fafd;
        border-bottom: 1px solid var(--td-Search-info-border-bottom-2);
      }
      .t-dialog__header {
        h2 {
          color: #000;
          font-size: 19px;
        }
      }
      .t-dialog__body {
        padding: 10px 25px;
        height: 213px;
        max-height: none;
      }
      .t-dialog__close {
        background-color: #f8fafd;
      }
    }
    .credits-data {
      .dj(space-around);
      flex-direction: column;
      height: 100%;
      .credits-itemList {
        .dja(space-between,center);
        p {
          font-weight: 700;
          font-size: 16px;
        }
        .credits-p1 {
          font-weight: 900;
        }
        .credits-time {
          .da(baseline);
          span {
            color: #1890ff;
            font-weight: 800;
            font-size: 17px;
          }
          p {
            font-size: 12px;
          }
        }
        .total-numver {
          .da(baseline);
          .total-p {
            color: #1890ff;
            font-size: 18px;
            font-weight: 800;
            margin: 0 10px;
          }
          p {
            font-size: 18px;
            font-weight: 900;
          }
        }
        .verify-btn {
          width: 105px;
          height: 38px;
          line-height: 38px;
          text-align: center;
          border-radius: 3px;
          color: white;
          padding: 0;
          font-weight: 900;
        }
      }
    }
  }
  .material-benefits {
    border-bottom: 1px solid var(--td-Search-info-border-bottom-2);
    height: 20%;
    min-height: 200px;
    .dja(space-evenly,flex-start);
    flex-direction: column;
    padding: 10px 40px;
    position: relative;
    .invite-dataItem {
      height: 80px;
      .dj(space-between);
      flex-direction: column;
      .invite-ItemData {
        .da();
        p {
          font-weight: 700;
        }
        .ItemData-p1 {
          font-weight: 900;
          margin: 0 8px;
        }
        img {
          cursor: pointer;
        }
      }
    }
    .record-btn {
      position: absolute;
      top: 15px;
      right: 20px;
    }
    h2 {
      margin: 0 0 0 -15px;
    }
    .btn-list {
      .btn-item1 {
        box-shadow: 0px 0px 5px 0px #287eff;
        background-color: white;
        font-weight: 800;
        margin: 0 15px;
        color: black;
      }
    }
  }
  .material-item {
    height: 78%;
    .effectivity {
      width: 100%;
      height: 154px;
      border: 1px solid #1890ff;
      border-radius: 5px;
      .dj();
      .effectivity-item1 {
        width: 50%;
        .dja();
        flex-direction: column;
        h2 {
          margin: 0;
          font-size: 40px;
          color: #1890ff;
        }
        p {
          font-size: 20px;
          color: #4e5969;
          margin: 10px 0;
          padding-top: 6px;
        }
      }
      .line {
        width: 1px;
        border-left: 1px dashed var(--td--main-btn-color-1);
        margin: 8px 0;
      }
    }
    .regulation {
      width: 100%;
      height: calc(100% - 200px);
      border: 1px solid #1890ff;
      border-radius: 5px;
      margin: 40px auto 0 auto;
      .dj(space-evenly);
      flex-direction: column;
      h1 {
        color: #752123;
        text-align: center;
      }
      .regulation-content {
        height: 70%;
        margin: 0 60px;
        overflow-y: auto;
        p {
          font-size: 18px;
          font-weight: 800;
          margin: 22px 0;
        }
      }
    }
  }
  .t-dialog__header {
    h2 {
      margin: 0;
      color: #287eff;
    }
  }
  .t-dialog--default {
    padding: 18px 20px 30px 20px;
  }
  .t-dialog__close {
    position: absolute;
    top: 3px;
    right: 5px;
    font-size: 20px;
    width: 40px;
    height: 40px;
    .t-icon {
      width: 2rem;
      height: 2rem;
    }
  }
  .t-table table {
    border: 1px solid #cbcaca;
  }
  .t-table th {
    text-align: center;
  }
  .t-table td {
    border-bottom: transparent;
    text-align: center;
  }
}
</style>
