<template>
  <div class="personal-details">
    <div class="personal-title">
      <h2>{{ $t('user.PersonalInfo') }}</h2>
      <div class="personal-userinfo">
        <div class="head-portrait">
          <img src="/images/svg/header/toux.svg" alt="tx" />
        </div>
        <div class="replace-box">
          <t-button class="custom_button_back_border">{{
            $t('user.ChangeAvatar')
          }}</t-button>
          <p>JPEG、PNG 或 GIF，并且不能超过 10MB。</p>
        </div>
      </div>
    </div>
    <div class="box-line">
      <div class="redact-data" v-show="hasChangePass">
        <h2>{{ $t('user.EditProfile') }}</h2>
        <div class="redact-item">
          <p>{{ $t('user.userName') }}</p>
          <t-input
            type="text"
            :maxlength="30"
            v-model="user_name"
            :placeholder="$t('user.enterUserName')"
          />
          <p>{{ $t('user.WalletAddress') }}</p>
          <div class="money-item">
            <t-input
              :disabled="true"
              type="text"
              v-model="wallet_address"
              :placeholder="$t('user.enterWalletAddress')"
              id="inputValue"
            />
            <t-tooltip content="点击复制" class="tooltip-cl">
              <CopySvg></CopySvg>
            </t-tooltip>
          </div>
          <p class="warm-text">{{ $t('user.updateWallet') }}</p>
        </div>
        <h2>{{ $t('user.Password') }}</h2>
        <div class="password-btn">
          <t-button
            @click="hasChangePass = false"
            class="custom_button_back_border"
            >{{ $t('user.changePwd') }}</t-button
          >
          <p>{{ $t('user.Increase') }}</p>
        </div>
        <div class="change-btn">
          <t-button
            @click="confirmDialog = true"
            class="custom_button_back_border"
            >{{ $t('user.KeepChanges') }}</t-button
          >
        </div>
      </div>
      <ChangePassword
        v-show="!hasChangePass"
        @backPersonal="backPersonal"
      ></ChangePassword>
    </div>
    <comfirmDialog
      :confirmDialog="confirmDialog"
      @comfimawal="comfimawal"
      @closeComfrimDialog="closeComfrimDialog"
    >
      <template #header> {{ $t('user.ConfirmChangeName') }}? </template>
    </comfirmDialog>
  </div>
</template>
<script lang="ts" setup>
import CopySvg from '/public/images/svg/header/copy.svg';
import ChangePassword from './ChangePassword.vue';
import request from '@/utils/request';
import { MessagePlugin } from 'tdesign-vue-next';
const route = useRoute();
const userInfo = useTokenInfo();
const Cookie = useCookie('userCookie');
const user_name = ref('');
const wallet_address = ref('');
const confirmDialog = ref(false);
// 修改密码模块的显示隐藏
const hasChangePass = ref(true);
// 确认修改
const comfimawal = (value: boolean) => {
  if (value) {
    confirmDialog.value = false;
    changeUserName();
  }
};
// 修改密码模块返回
const backPersonal = (value: boolean) => {
  hasChangePass.value = value;
};
onMounted(() => {
  // 此时routename还没有切换，等待一毫秒
  setTimeout(() => {
    if (route.name === 'personal' && Object.keys(userInfo.value).length) {
      user_name.value = userInfo.value.name;
    }
  }, 10);
});
// 关闭确认对话框
const closeComfrimDialog = (value: boolean) => {
  confirmDialog.value = value;
};
watch(
  () => userInfo.value,
  (v) => {
    if (v) {
      user_name.value = userInfo.value.name;
    }
  }
);
// 修改用户名
const changeUserName = async () => {
  const res: any = await request.post(
    '/api/user/edit',
    {
      name: user_name.value,
    },
    {
      headers: {
        authorization: `Bearer ${Cookie.value}`,
      },
    }
  );
  if (res.code === 0) {
    MessagePlugin.success('修改成功！');
    // 同步修改左上角的用户信息
    userInfo.value.name = user_name.value;
  } else if (res.code === 2) {
    //  路由跳转
  }
};
</script>

<style lang="less" scoped>
@import '@/style/variables.less';
@import '@/style/flex.less';
.personal-details {
  width: calc(100vw - 410px);
  .box-line {
    border: 1px solid var(--td-Search-info-border-bottom-2);
  }
  .personal-title {
    border: 1px solid var(--td-Search-info-border-bottom-2);
    border-bottom: transparent;
    h2 {
      text-align: left;
      margin: 20px 30px;
    }
    .personal-userinfo {
      .da();
      padding: 0 30px 20px 30px;
      .head-portrait {
        width: 125px;
        height: 125px;
        display: block;
      }
      .replace-box {
        height: 125px;
        .dj(space-evenly);
        flex-direction: column;
        p {
          margin: 0;
          font-weight: bold;
        }
        .t-button {
          color: white;
          font-size: 18px;
          font-weight: bold;
          width: auto;
        }
      }
    }
  }
  .redact-data {
    padding: 30px 0 0 50px;
    position: relative;
    h2 {
      text-align: left;
    }
    .redact-item {
      .da(flex-start);
      flex-direction: column;
      p {
        color: #4e5969;
        font-size: 20px;
        margin: 20px 0;
      }
      .t-input__wrap {
        width: 427px;
        :deep(.t-input) {
          background: var(--user-center-input-back-color);
        }
      }
      .money-item {
        .da();
        .tooltip-cl {
          margin-left: 12px;
          cursor: pointer;
        }
        span {
          margin: 0 10px;
        }
      }
      .warm-text {
        font-size: @font-size-base;
      }
    }
    .password-btn {
      .da(flex-start);
      flex-direction: column;
      .t-button {
        width: 150px;
        height: 41px;
        margin-top: 20px;
      }
      p {
        font-size: 16px;
        margin: 10px 0;
        color: #4e5969;
      }
    }
    .change-btn {
      position: absolute;
      bottom: 12px;
      left: 50%;
      transform: translate(-50%);
      .t-button {
        width: 150px;
        height: 41px;
      }
    }
  }
}
</style>
