<template>
  <div class="user-center-container">
    <div class="container-wrapper">
      <div>
        <UserMenu title="用户中心" active-menu="basic" />
      </div>
      <div class="container-content">
        <el-card class="content-card" shadow="never">
          <div class="text-md font-semibold">用户中心</div>
          <div class="flex items-start gap-8 mt-5">
            <upload
              class="card-avatar"
              type="image"
              :show-progress="true"
              :multiple="false"
              @beforeUpload="handleBeforeUpload"
              @allSuccess="handleChangeAvatar"
              v-loading="isLoading"
            >
              <div class="card-avatar">
                <el-avatar class="card-avatar__image" :src="userStore.userInfo.avatar" />
                <div class="card-avatar__actions">
                  <el-icon :size="28"><Edit /></el-icon>
                </div>
              </div>
            </upload>
            <div class="card-info">
              <div class="info-item">
                <span class="text-sm text-[var(--el-text-color-regular)]">ID</span>
                <span class="text-base break-all">{{ userStore.userInfo.user_no }}</span>
              </div>
              <div class="info-item">
                <span class="text-sm text-[var(--el-text-color-regular)]">用户名</span>
                <span class="text-base break-all">{{ userStore.userInfo.nickname }}</span>
              </div>
              <div class="info-item">
                <span class="text-sm text-[var(--el-text-color-regular)]">最后登录时间</span>
                <span class="text-base break-all">{{ userStore.userInfo.login_time }}</span>
              </div>
            </div>
          </div>
        </el-card>
        <el-card class="content-card mt-4 md:mt-6" shadow="never">
          <div class="text-md font-semibold">账户安全</div>
          <div class="card-security">
            <div class="flex justify-between items-center gap-4">
              <div class="flex gap-1.5 items-center">
                <div class="card-security__icon">
                  <el-icon color="var(--el-color-primary)"><Lock /></el-icon>
                </div>
                <span class="text-md leading-6">登录密码</span>
              </div>
              <el-tag class="card-security__tag" type="primary" v-if="userStore.userInfo.password_set === 1">
                已设置
              </el-tag>
              <el-tag class="card-security__tag" type="danger" v-else> 未设置 </el-tag>
            </div>
            <el-button class="card-security__btn" type="primary" link @click="openPasswordDialog">修改密码</el-button>
          </div>
        </el-card>
      </div>
    </div>
    <LayoutFooter />
    <ChangePassword ref="changePasswordRef" />
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from '~/stores/user'
import { Lock, Edit } from '@element-plus/icons-vue'
import { setUserInfo } from '~/api/user'
import LayoutFooter from '~/layouts/components/Footer/index.vue'

const userStore = useUserStore()
const changePasswordRef = ref()
const isLoading = ref(false)

const openPasswordDialog = () => {
  changePasswordRef.value?.open()
}
const handleBeforeUpload = () => {
  isLoading.value = true
}
const handleChangeAvatar = (response: any) => {
  if (response?.data?.url) {
    setUserInfo({ avatar: response?.data?.url }).then(() => {
      getUserInfo()
    }).catch(() => {
      isLoading.value = false
    })
  }
}
const getUserInfo = () => {
  userStore.getUser().then(() => {
    isLoading.value = false
    ElMessage.success('更新成功')
  })
}

onMounted(() => {
  if (!userStore.token) {
    useRouter().replace('/')
  }
})
</script>

<style lang="scss" scoped>
.user-center-container {
  @apply flex flex-col;
  min-height: calc(100vh - var(--nav-height));

  .container-wrapper {
    @apply flex-1 flex gap-4 py-8;
  }

  .container-content {
    @apply flex-1;

    .content-card {
      @apply rounded-[1rem];
      --el-card-padding: 1.5rem;

      .card-avatar {
        @apply relative size-[6rem] lg:size-[8.5rem] xl:size-[10rem] cursor-pointer;

        &__image {
          @apply size-full rounded-full;
        }

        &__actions {
          @apply flex justify-center items-center gap-2 rounded-full;
          opacity: 0;
          transition: opacity 0.3s ease-in-out;
          position: absolute;
          top: 0;
          bottom: 0;
          width: 100%;
          color: #fff;
          background-color: rgba(0, 0, 0, 0.4);
        }

        &:hover .card-avatar__actions {
          opacity: 1;
        }
      }

      .card-info {
        @apply flex-1 min-w-0 grid grid-cols-2 gap-4;

        .info-item {
          @apply flex flex-col gap-1;
        }
      }

      .card-security {
        @apply mt-4 border border-br rounded-lg px-6 py-4 max-w-[32rem];

        &__icon {
          @apply size-[1.75rem] flex items-center justify-center rounded-full;
          background: var(--el-color-primary-light-9);
        }

        &__tag {
          @apply text-[0.75rem] rounded-xl;
          border: none;
        }

        &__btn {
          @apply rounded-xl mt-4 text-md leading-6;
          border: none;
        }
      }
    }
  }

  @media screen and (max-width: 768px) {
    .container-wrapper {
      @apply flex-col-reverse py-4 justify-end;
    }

    .container-menu {
      @apply w-full;
    }

    .container-content {
      @apply flex-none;

      .content-card .card-info {
        @apply grid-cols-1;
      }
    }
  }
}
</style>
