<template>
  <div class="Invited-record-box">
    <t-dialog
      :footer="false"
      @close="closerecordDialog"
      placement="center"
      class="record-dialog-box"
      :visible="recordVisible"
      :draggable="true"
    >
      <template #header>
        <h3>{{ $t('user.InvitationRecord') }}</h3>
      </template>
      <template #body>
        <div class="Invited-title">
          <div class="Invited-content">
            <div class="Invited-item1">
              <p>{{ $t('user.MyInvitationCode') }}</p>
              <p class="Invited-active">{{ inviteData.invite_code }}</p>
            </div>
            <div class="Invited-item1">
              <p>{{ $t('user.TotalNumber') }}</p>
              <p class="Invited-active">{{ inviteData.invite_total }}</p>
            </div>
            <div class="Invited-item1">
              <p>{{ $t('user.ValidInvitation') }}</p>
              <p class="Invited-active">{{ inviteData.valid_invite_total }}</p>
            </div>
          </div>
          <div class="Invited-href">
            <div class="Invited-item1">
              <p>{{ $t('user.InvitationLinks') }}</p>
              <p class="Invited-active">{{ inviteData.invite_href }}</p>
            </div>
            <div class="href-btn">
              <t-button @click="QrCodevisible = true">{{
                $t('user.InvitationQRCode')
              }}</t-button>
            </div>
          </div>
        </div>
        <div class="Invited-table">
          <t-table
            row-key="index"
            :data="inviteData.invite_list"
            :columns="columns1"
          >
            <template #userName="{ row }">
              <span>{{ row.user.name }}</span>
            </template>
            <template #time="{ row }">
              <span>{{ row.user.created_at }}</span>
            </template>
          </t-table>
        </div>
      </template>
      <template #footer></template>
    </t-dialog>
    <QrCodeDialog
      class="hierarchy-dialog"
      @closeDialog="closeDialog"
      :QrCodevisible="QrCodevisible"
      :QrCode="inviteData.invite_href"
      id="qr-code-two"
    ></QrCodeDialog>
  </div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const props = defineProps({
  recordVisible: Boolean,
  inviteData: Object as any,
});
const emit = defineEmits(['closeRecordDialog']);
const QrCodevisible = ref(false);
const closerecordDialog = () => {
  emit('closeRecordDialog', false);
};
// 二维码窗口关闭
const closeDialog = (value: boolean) => {
  if (!value) {
    QrCodevisible.value = value;
  }
};
const columns1 = computed(() => [
  {
    colKey: 'userName',
    title: t('user.InviteUsername'),
  },
  {
    colKey: 'up_time',
    title: t('user.RechargeTime'),
  },
  {
    colKey: 'time',
    title: t('user.InvitationTime'),
  },
  {
    colKey: 'email',
    title: t('user.InvitationEmail'),
  },
]);
</script>

<style lang="less" scoped>
@import '@/style/components/hierarchyDialog.less';
@import '@/style/flex.less';
.Invited-record-box {
  .record-dialog-box {
    :deep(.t-dialog) {
      width: 800px;
      .t-dialog__header {
        border-bottom: 1px solid #cbcaca;
        h3 {
          margin: 0;
          padding: 10px 0;
        }
      }
      .Invited-title {
        height: 130px;
        .dja();
        flex-direction: column;
        border-bottom: 1px solid #cbcaca;
        .Invited-content {
          width: 100%;
          .dj(space-between);
        }
        .Invited-href {
          margin-top: 20px;
          width: 100%;
          .dj(space-between);
        }
        .Invited-item1 {
          .dja(space-around,center);
          p {
            color: #444444;
            text-align: left;
            font-size: var(--font-size-base);
          }
          .Invited-active {
            color: #0057ff;
            margin: 0 5px;
            text-align: left;
            font-size: var(--font-size-base);
          }
        }
      }
      .Invited-table {
        margin-top: 30px;
        .t-table {
          border: 1px solid rgb(203, 202, 202);
          white-space: nowrap;
          .t-table__header {
            th {
              border-right: 1px solid rgb(203, 202, 202);
            }
          }
          th {
            text-align: center;
          }
          th:last-child {
            border-right: none;
          }
          td {
            text-align: center;
          }
        }
      }
    }
  }
  .hierarchy-dialog {
    :deep(.t-dialog) {
      width: 400px;
    }
  }
}
</style>
