<template>
  <div :class="['about-container', 'container', isH5 && 'container-h5']" @click="closeAboutBox" @mousedown.stop>
    <div :class="['about-box', 'box', isH5 && 'box-h5']" @click.stop>
      <header v-if="isH5" class="title">
        <div class="title-back" @click="closeAboutBox">
          <Icon :file="backSVG" />
        </div>
        <div class="title-name">
          {{ TUITranslateService.t('Home.关于腾讯云·通信') }}
        </div>
      </header>
      <main class="main">
        <div class="main-name">
          <img class="logo" src="../assets/image/logo.svg" alt="" />
          <div class="name">
            {{ TUITranslateService.t('即时通信') }}
          </div>
        </div>
        <div class="main-version">{{ TUITranslateService.t('Home.SDK版本') }}: {{ SDKVersion }}</div>
      </main>
      <footer class="footer">
        <ul class="list">
          <li class="line">
            <a class="link" :href="Link.privacy.url" target="_blank">
              {{ TUITranslateService.t(`Login.${Link.privacy.label}`) }}
            </a>
            <a class="link" :href="Link.agreement.url" target="_blank">
              {{ TUITranslateService.t(`Login.${Link.agreement.label}`) }}
            </a>
            <a class="link" @click="toggleDisclaimer">
              {{ TUITranslateService.t('Home.免责声明') }}
              <div v-if="isDisclaimerBoxShow" :class="['disclaimer-container', 'container', isH5 && 'container-h5']" @click="toggleDisclaimer">
                <div :class="['disclaimer-box', 'box', isH5 && 'box-h5']" @click.stop>
                  <header v-if="isH5" class="title">
                    <div class="title-back" @click="toggleDisclaimer">
                      <Icon :file="backSVG" />
                    </div>
                    <div class="title-name">
                      {{ TUITranslateService.t('Home.关于腾讯云·通信') }}
                    </div>
                  </header>
                  <main class="main">
                    <header class="main-title">
                      {{ TUITranslateService.t(`Home.IM-免责声明`) }}
                    </header>
                    <p class="main-info">
                      {{
                        TUITranslateService.t(
                          `Home.IM（“本产品”）是由腾讯云提供的一款测试产品，腾讯云享有本产品的著作权和所有权。本产品仅用于功能体验，不得用于任何商业用途。依据相关部门监管要求，严禁在使用中有任何色情、辱骂、暴恐、涉政等违法内容传播。`
                        )
                      }}
                    </p>
                  </main>
                  <footer class="footer">
                    <button class="btn btn-default" @click.stop="submitDisclaimer">
                      {{ TUITranslateService.t('Home.同意') }}
                    </button>
                  </footer>
                </div>
              </div>
            </a>
          </li>
          <li class="line">
            <a class="link" :href="Link.contact.url" target="_blank">
              {{ TUITranslateService.t(`Home.${Link.contact.label}`) }}
            </a>
            <a class="link" @click="toggleCancellation">
              {{ TUITranslateService.t('Home.注销账户') }}
              <div v-if="isCancellationBoxShow" :class="['cancellation-container', 'container', isH5 && 'container-h5']" @click="toggleCancellation">
                <div :class="['cancellation-box', 'box', isH5 && 'box-h5']" @click.stop>
                  <header v-if="isH5" class="title">
                    <div class="title-back" @click="toggleCancellation">
                      <Icon :file="backSVG" />
                    </div>
                    <div class="title-name">
                      {{ TUITranslateService.t('Home.关于腾讯云·通信') }}
                    </div>
                  </header>
                  <main class="main">
                    <img src="../assets/image/warn.svg" width="60" height="60" />
                    <p class="main-text">
                      {{ TUITranslateService.t('Home.注销后，您将无法使用当前账号，相关数据也将删除无法找回') }}
                    </p>
                    <p>
                      <span>{{ TUITranslateService.t('Home.当前账号') + ': ' }}</span>
                      <span class="main-id">{{ props.userProfile.userID }}</span>
                    </p>
                  </main>
                  <footer class="footer">
                    <button class="btn btn-error" @click.stop="submitCancellation">
                      {{ TUITranslateService.t('Home.注销') }}
                    </button>
                    <button class="btn btn-default" @click.stop="toggleCancellation">
                      {{ TUITranslateService.t('Home.取消') }}
                    </button>
                  </footer>
                </div>
              </div></a
            >
          </li>
          <li class="line">
            <p class="copyright">Copyright © 2013-2023 Tencent Cloud. All Rights Reserved.</p>
          </li>
        </ul>
      </footer>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, withDefaults, defineProps, defineEmits } from '@/TUIKit/adapter-vue';
import { TUITranslateService, TUIStore, StoreName } from '@tencentcloud/chat-uikit-engine';
import { TUILogin } from '@tencentcloud/tui-core';
import Icon from '@/TUIKit/components/common/Icon.vue';
import backSVG from '@/TUIKit/assets/icon/back.svg';
import { isH5 } from '@/TUIKit/utils/env';
import { Link } from '@/utils/link';
import { cancellation } from '@/api/im';
import { IUserProfile } from '@/TUIKit/interface';
import router from '@/router';

const props = withDefaults(
  defineProps<{
    userProfile: IUserProfile;
  }>(),
  {
    userProfile: () => ({}) as IUserProfile
  }
);

const emits = defineEmits(['closeAboutBox']);

const isAboutBoxShow = ref<boolean>(false);
const isDisclaimerBoxShow = ref<boolean>(false);
const isCancellationBoxShow = ref<boolean>(false);
const SDKVersion = TUIStore.getData(StoreName.APP, 'SDKVersion');

function closeAboutBox() {
  isAboutBoxShow.value = false;
  emits('closeAboutBox');
}
// Disclaimer dialog
function toggleDisclaimer() {
  isDisclaimerBoxShow.value = !isDisclaimerBoxShow.value;
}
function submitDisclaimer() {
  isDisclaimerBoxShow.value = false;
}
// Cancellation dialog
function toggleCancellation() {
  isCancellationBoxShow.value = !isCancellationBoxShow.value;
}
function submitCancellation() {
  isCancellationBoxShow.value = false;
  const deleteInfo: any = localStorage.getItem('TUIKit-userInfo');
  const deleteInfoList = JSON.parse(deleteInfo);
  const options: any = {
    userId: deleteInfoList.userId,
    token: deleteInfoList.token,
    phone: deleteInfoList.phone
  };
  TUILogin.logout().then(() => {
    localStorage.removeItem('TUIKit-userInfo');
    cancellation(options);
    router.push({ path: '/' });
  });
}
</script>
<style scoped lang="scss">
@import '../styles/common';

.main {
  flex: 1;

  @include flex;
}

.btn {
  flex: 1;
  margin-top: 14px;
  margin-right: 10px;

  &:last-child {
    margin-right: 0;
  }
}

.btn-default {
  @include btn-default;
}

.btn-error {
  @include btn-error;
}

.about-container {
  .about-box {
    padding: 100px 180px;
    padding-bottom: 0;

    .main {
      padding-bottom: 126px;

      .main-name {
        @include flex;

        padding-bottom: 28px;

        .logo {
          width: 110px;
        }

        .name {
          font-size: 40px;
          font-family: PingFangSC-Medium;
          font-weight: 500;
        }
      }

      .main-version {
        color: #999;
      }
    }

    .footer {
      .list {
        @include flex;

        list-style: none;

        .line {
          @include flex(row, center, center);

          padding-top: 10px;

          .link {
            font-size: 16px;
            padding: 0 10px;
            color: #006eff;
            border-right: 1px solid #eee;
          }

          .link:last-child {
            border-right: 0 solid #000;
          }

          .copyright {
            font-size: 14px;
            padding: 25px 0;
            color: #999;
          }
        }
      }
    }
  }

  .disclaimer-box {
    @include flex(column, center, stretch);

    padding: 10px 10px 0;

    .main {
      align-items: flex-start;
      width: 360px;
      font-size: 1rem;
      padding: 3.5rem 4rem;
      color: #000;

      .main-title {
        font-size: 18px;
        padding-bottom: 5px;
      }

      .main-info {
        text-wrap: wrap;
      }
    }

    .footer {
      display: flex;
      padding: 4rem;
    }
  }

  .cancellation-box {
    @include flex;

    padding: 55px 42px;
    max-width: 566px;

    .main {
      @include flex;

      padding-bottom: 30px;

      .main-text {
        margin-top: 20px;
        text-wrap: wrap;
        text-align: center;
      }

      .main-info {
        text-wrap: wrap;
      }

      .main-id {
        color: #006eff;
      }
    }

    .footer {
      display: flex;
      flex-direction: row;
      width: 100%;

      .btn {
        flex: 1;
      }
    }
  }
}

.about-box.box-h5 {
  padding: 0;
}

.disclaimer-box.box-h5,
.cancellation-box.box-h5 {
  padding: 0;
  width: 100%;
  height: 100%;
  justify-content: flex-start;

  .main {
    flex: none;
    box-sizing: border-box;
    padding: 30px;
    width: 100%;
  }

  .footer {
    box-sizing: border-box;
    padding: 10px 30px;

    .btn {
      height: 50px;
    }
  }
}
</style>
