<template>
  <div class="dialog-overlay" v-if="visible" @click.self="closeDialog">
    <div class="dialog-content">
      <div class="dialog-header">
        <h3>修改密码</h3>
        <button class="close-button" @click="closeDialog">&times;</button>
      </div>
      <div class="dialog-body">
        <div class="form-group">
          <label>原密码：</label>
          <input type="password" v-model="formData.old_password" placeholder="请输入原密码">
        </div>
        <div class="form-group">
          <label>新密码：</label>
          <input type="password" v-model="formData.new_password" placeholder="请输入新密码">
        </div>
        <div class="form-group">
          <label>确认密码：</label>
          <input type="password" v-model="formData.confirm_password" placeholder="请确认新密码">
        </div>
      </div>
      <div class="dialog-footer">
        <button class="cancel-button" @click="closeDialog">取消</button>
        <button class="confirm-button" @click="handleSubmit">确认</button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: 'ChangePasswordDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {
        old_password: '',
        new_password: '',
        confirm_password: ''
      }
    }
  },
  methods: {
    closeDialog() {
      this.$emit('update:visible', false)
      this.resetForm()
    },
    resetForm() {
      this.formData = {
        old_password: '',
        new_password: '',
        confirm_password: ''
      }
    },
    async handleSubmit() {
      if (!this.formData.old_password) {
        this.$message.error('请输入原密码')
        return
      }
      if (!this.formData.new_password) {
        this.$message.error('请输入新密码')
        return
      }
      if (!this.formData.confirm_password) {
        this.$message.error('请确认新密码')
        return
      }
      if (this.formData.new_password !== this.formData.confirm_password) {
        this.$message.error('两次输入的新密码不一致')
        return
      }

      try {
        const response = await axios.post(`${import.meta.env.VITE_BASE_AI_API}/user/change_password`, {
          old_password: this.formData.old_password,
          new_password: this.formData.new_password,
          confirm_password: this.formData.confirm_password
        },
        {
          headers: {
            'Authorization': `JWT ${localStorage.getItem('token')}`
          }
        }
    )

        if (response.data.code === 200) {
          this.$message.success('密码修改成功')
          this.closeDialog()
          // 调用退出登录接口
          try {
            await axios.post(`${import.meta.env.VITE_BASE_AI_API}/user/logout`, {}, {
              headers: {
                'Authorization': `JWT ${localStorage.getItem('token')}`
              }
            })
            // 清除token
            localStorage.removeItem('token')
            // 跳转到登录页面
            this.$router.push('/login')
          } catch (logoutError) {
            console.error('退出登录失败：', logoutError)
            // 即使退出失败，也清除token并跳转
            localStorage.removeItem('token')
            this.$router.push('/login')
          }
        } else {
          this.$message.error(response.data.message || '密码修改失败')
        }
      } catch (error) {
        this.$message.error('密码修改失败：' + (error.response?.data?.message || error.message))
      }
    }
  }
}
</script>

<style scoped>
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.dialog-content {
  background: white;
  border-radius: 8px;
  padding: 20px;
  width: 400px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.dialog-header h3 {
  margin: 0;
  color: #333;
}

.close-button {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  color: #333;
}

.form-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.cancel-button, .confirm-button {
  padding: 8px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.cancel-button {
  background: #f5f5f5;
  border: 1px solid #ddd;
  color: #666;
}

.confirm-button {
  background: #409EFF;
  border: 1px solid #409EFF;
  color: white;
}

.confirm-button:hover {
  background: #66b1ff;
}

.cancel-button:hover {
  background: #e8e8e8;
}
</style> 