<template>
  <div>
    <basic-container>
      <el-tabs v-model="activeTab" @tab-change="handleTabChange">
        <!-- 个人信息 Tab -->
        <el-tab-pane label="个人信息" name="info">
          <el-form ref="infoForm" :model="infoForm" label-width="auto">
            <el-form-item label="头像">
              <div class="avatar-upload-container">
                <div class="avatar-wrapper" v-if="infoForm.avatar">
                  <img :src="infoForm.avatar" alt="用户头像" class="avatar" />
                  <div class="avatar-overlay">
                    <el-icon class="avatar-action" @click="previewAvatar"><View /></el-icon>
                    <el-icon class="avatar-action" @click="deleteAvatar"><Delete /></el-icon>
                  </div>
                </div>
                <el-upload
                  v-else
                  class="avatar-uploader"
                  action="/api/blade-resource/oss/endpoint/put-file"
                  :headers="uploadHeaders"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                  accept=".jpg,.jpeg,.png,.gif"
                >
                  <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
                </el-upload>
                <div class="el-upload__tip">支持 JPG/PNG/GIF 格式，文件大小不超过 1MB</div>
              </div>
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="infoForm.realName" placeholder="请输入姓名">
                <template #prefix>
                  <el-icon><Bell /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="用户名">
              <el-input v-model="infoForm.name" placeholder="请输入用户名">
                <template #prefix>
                  <el-icon><User /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="infoForm.phone" placeholder="请输入手机号">
                <template #prefix>
                  <el-icon><Iphone /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="infoForm.email" placeholder="请输入邮箱">
                <template #prefix>
                  <el-icon><Message /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <div class="button-group">
                <el-button type="primary" @click="submitInfo" :loading="loading">
                  <el-icon><Check /></el-icon>
                  <span>提交</span>
                </el-button>
                <el-button @click="resetForm">
                  <el-icon><RefreshRight /></el-icon>
                  <span>清空</span>
                </el-button>
              </div>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 修改密码 Tab -->
        <el-tab-pane label="修改密码" name="password">
          <el-form ref="passwordForm" :model="passwordForm" label-width="auto">
            <el-form-item label="原密码">
              <el-input
                v-model="passwordForm.oldPassword"
                type="password"
                placeholder="请输入原密码"
                show-password
              >
                <template #prefix>
                  <el-icon><Lock /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="新密码">
              <el-input
                v-model="passwordForm.newPassword"
                type="password"
                placeholder="请输入新密码"
                show-password
              >
                <template #prefix>
                  <el-icon><Lock /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="确认密码">
              <el-input
                v-model="passwordForm.newPassword1"
                type="password"
                placeholder="请确认新密码"
                show-password
              >
                <template #prefix>
                  <el-icon><Lock /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <div class="button-group">
                <el-button type="primary" @click="submitPassword" :loading="loading">
                  <el-icon><Check /></el-icon>
                  <span>提交</span>
                </el-button>
                <el-button @click="resetForm">
                  <el-icon><RefreshRight /></el-icon>
                  <span>清空</span>
                </el-button>
              </div>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </basic-container>
    <!-- 头像预览组件 -->
    <el-image-viewer
      v-if="showAvatarPreview"
      :url-list="avatarPreviewList"
      :initial-index="0"
      :hide-on-click-modal="true"
      :teleported="true"
      @close="showAvatarPreview = false"
    />
  </div>
</template>

<script>
import { getUserInfo, updateInfo, updatePassword } from '@/api/system/user';
import md5 from 'js-md5';
import { sensitive } from '@/utils/sensitive';
import {
  Plus,
  Bell,
  User,
  Iphone,
  Message,
  Lock,
  Check,
  RefreshRight,
  View,
  Delete,
} from '@element-plus/icons-vue';
import { ElImageViewer } from 'element-plus';
import { getUploadHeaders } from '@/utils/upload';

export default {
  components: {
    ElImageViewer,
    Plus,
    Bell,
    User,
    Iphone,
    Message,
    Lock,
    Check,
    RefreshRight,
    View,
    Delete,
  },
  data() {
    return {
      activeTab: 'info',
      loading: false,
      infoForm: {
        id: '',
        avatar: '',
        name: '',
        realName: '',
        phone: '',
        email: '',
      },
      passwordForm: {
        oldPassword: '',
        newPassword: '',
        newPassword1: '',
      },
      sensitiveManager: null,
      showAvatarPreview: false,
      avatarPreviewList: [],
    };
  },
  created() {
    // 初始化脱敏工具
    this.sensitiveManager = sensitive.create({
      fields: ['phone', 'email'],
    });
    // 初始化时根据默认tab加载数据
    if (this.activeTab === 'info') {
      this.loadUserInfo();
    }
  },
  computed: {
    uploadHeaders() {
      return getUploadHeaders();
    },
  },
  methods: {
    // Tab切换处理
    handleTabChange(name) {
      if (name === 'info') {
        this.loadUserInfo();
      }
    },
    // 加载用户信息
    loadUserInfo() {
      getUserInfo().then(res => {
        const user = res.data.data;
        this.infoForm = {
          id: user.id,
          avatar: user.avatar,
          name: user.name,
          realName: user.realName,
          phone: user.phone,
          email: user.email,
        };
        // 保存初始脱敏数据
        this.sensitiveManager.saveInitialData(this.infoForm);
      });
    },
    // 提交个人信息
    submitInfo() {
      this.loading = true;
      const submitData = this.sensitiveManager.getSubmitData(this.infoForm);
      updateInfo(submitData).then(
        res => {
          if (res.data.success) {
            this.$message({
              type: 'success',
              message: '修改信息成功!',
            });
          } else {
            this.$message({
              type: 'error',
              message: res.data.msg,
            });
          }
          this.loading = false;
        },
        error => {
          window.console.log(error);
          this.loading = false;
        }
      );
    },
    // 提交密码修改
    submitPassword() {
      this.loading = true;
      updatePassword(
        md5(this.passwordForm.oldPassword),
        md5(this.passwordForm.newPassword),
        md5(this.passwordForm.newPassword1)
      ).then(
        res => {
          if (res.data.success) {
            this.$message({
              type: 'success',
              message: '修改密码成功!',
            });
            // 清空密码表单
            this.passwordForm = {
              oldPassword: '',
              newPassword: '',
              newPassword1: '',
            };
          } else {
            this.$message({
              type: 'error',
              message: res.data.msg,
            });
          }
          this.loading = false;
        },
        error => {
          window.console.log(error);
          this.loading = false;
        }
      );
    },
    // 头像上传成功处理
    handleAvatarSuccess(response) {
      if (response && response.data) {
        this.infoForm.avatar = response.data.link || response.data;
      }
    },
    // 头像上传前验证
    beforeAvatarUpload(file) {
      const isValidType = ['image/jpeg', 'image/png', 'image/gif'].includes(file.type);
      const isLt1M = file.size / 1024 < 1024;

      if (!isValidType) {
        this.$message.error('上传头像只支持 JPG/PNG/GIF 格式!');
      }
      if (!isLt1M) {
        this.$message.error('上传头像大小不能超过 1MB!');
      }
      return isValidType && isLt1M;
    },
    // 重置表单
    resetForm() {
      if (this.activeTab === 'info') {
        // 清空个人信息表单，但保留id
        const id = this.infoForm.id;
        this.infoForm = {
          id: id,
          avatar: '',
          name: '',
          realName: '',
          phone: '',
          email: '',
        };
      } else if (this.activeTab === 'password') {
        // 清空密码表单
        this.passwordForm = {
          oldPassword: '',
          newPassword: '',
          newPassword1: '',
        };
      }
    },
    // 预览头像
    previewAvatar() {
      if (this.infoForm.avatar) {
        this.avatarPreviewList = [this.infoForm.avatar];
        this.showAvatarPreview = true;
      } else {
        this.$message.warning('暂无头像可预览');
      }
    },
    // 删除头像
    deleteAvatar() {
      this.$confirm('确定要删除头像吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.infoForm.avatar = '';
          this.$message.success('头像已删除');
        })
        .catch(() => {});
    },
  },
};
</script>

<style scoped>
.avatar-upload-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.avatar-wrapper {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.avatar-wrapper:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.avatar-wrapper .avatar {
  width: 200px;
  height: 200px;
  display: block;
  border-radius: 12px;
  object-fit: cover;
}

.avatar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.6) 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(2px);
}

.avatar-wrapper:hover .avatar-overlay {
  opacity: 1;
}

.avatar-action {
  font-size: 20px;
  color: #fff;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-action:hover {
  background-color: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.avatar-uploader :deep(.el-upload) {
  border: 2px dashed #d9d9d9;
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  width: 200px;
  height: 200px;
  background-color: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-uploader :deep(.el-upload:hover) {
  border-color: var(--el-color-primary);
  background-color: #f5f5f5;
}

.avatar-uploader-icon {
  font-size: 40px;
  color: #8c939d;
  transition: color 0.3s ease;
}

.avatar-uploader :deep(.el-upload:hover) .avatar-uploader-icon {
  color: var(--el-color-primary);
}

.el-upload__tip {
  font-size: 12px;
  color: #969799;
  margin-top: 10px;
  line-height: 1.5;
  padding-left: 4px;
}

.button-group {
  display: flex;
  justify-content: center;
  gap: 16px;
  width: 100%;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
