<template>
  <div class="information-container">
    <el-card class="info-card">
      <div class="info-header">
        <h2>个人信息</h2>
        <p class="motto">
          <i class="el-icon-reading"></i>
          By reading we enrich the mind, by conversation we polish it.
        </p>
      </div>

      <div
        class="info-content"
        v-loading="loading"
        element-loading-text="加载中..."
      >
        <template v-if="show">
          <el-row :gutter="20">
            <el-col :span="24">
              <div class="info-item">
                <i class="el-icon-collection-tag"></i>
                <span class="label">借阅证编号：</span>
                <span class="value">{{ user.cardNumber }}</span>
              </div>
              <div class="info-item">
                <i class="el-icon-user"></i>
                <span class="label">借阅证姓名：</span>
                <span class="value">{{ user.cardName }}</span>
              </div>
              <div class="info-item">
                <i class="el-icon-document"></i>
                <span class="label">规则编号：</span>
                <span class="value">{{ user.ruleNumber }}</span>
              </div>
              <div class="info-item">
                <i class="el-icon-circle-check"></i>
                <span class="label">状态：</span>
                <el-tag :type="user.status === 1 ? 'success' : 'danger'">
                  {{ user.status === 1 ? "可用" : "禁用" }}
                </el-tag>
              </div>
            </el-col>
          </el-row>

          <div class="action-buttons">
            <el-button
              type="primary"
              @click="showEditDialog"
              icon="el-icon-key"
            >
              修改密码
            </el-button>
          </div>
        </template>
      </div>
    </el-card>

    <el-dialog
      title="修改密码"
      :visible.sync="editDialogVisible"
      width="40%"
      @close="editDialogClosed"
      center
    >
      <el-form
        :model="editForm"
        ref="editFormRef"
        :rules="editFormRules"
        label-width="100px"
      >
        <el-form-item label="新密码" prop="password">
          <el-input
            v-model="editForm.password"
            type="password"
            placeholder="请输入新密码"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            v-model="editForm.confirmPassword"
            type="password"
            placeholder="请再次输入新密码"
            show-password
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="changePassword">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Information",
  data() {
    const validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.editForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      user: {
        ruleNumber: "",
        cardNumber: "",
        status: 0,
        userId: "",
        cardName: "",
        username: "",
        password: "",
        createTime: "",
        updateTime: "",
      },
      editForm: {
        password: "",
        confirmPassword: "",
      },
      editFormRules: {
        password: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
        confirmPassword: [{ validator: validatePass2, trigger: "blur" }],
      },
      editDialogVisible: false,
      show: false,
      loading: true,
    };
  },
  methods: {
    showEditDialog() {
      this.editDialogVisible = true;
    },
    editDialogClosed() {
      this.$refs.editFormRef.resetFields();
    },
    async getUserInformaton() {
      try {
        const userId = window.sessionStorage.getItem("userId");
        const { data: res } = await this.$http.get(
          `user/get_information/${userId}`
        );

        if (res.status !== 200) {
          return this.$message.error(res.msg);
        }

        this.user = res.data;
        this.show = true;
        this.$message.success({ message: res.msg, duration: 1000 });
      } catch (error) {
        this.$message.error("获取用户信息失败");
      } finally {
        this.loading = false;
      }
    },
    async changePassword() {
      try {
        const { data: res } = await this.$http.post("user/update_password", {
          password: this.editForm.password,
          userId: window.sessionStorage.getItem("userId"),
        });

        if (res.status !== 200) {
          return this.$message.error(res.msg);
        }

        this.$message.success(res.msg);
        this.editDialogVisible = false;
        this.$refs.editFormRef.resetFields();
        window.sessionStorage.clear();
        this.$router.push("/login");
      } catch (error) {
        this.$message.error("修改密码失败");
      }
    },
  },
  created() {
    this.getUserInformaton();
  },
};
</script>

<style lang="less" scoped>
.information-container {
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
  background: #f0f2f5;

  .background-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.3;
    }
  }

  .info-card {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 40px auto;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.95);

    .info-header {
      text-align: center;
      padding: 20px 0;
      border-bottom: 1px solid #eee;

      h2 {
        font-size: 28px;
        color: #303133;
        margin-bottom: 10px;
      }

      .motto {
        color: #606266;
        font-size: 16px;

        i {
          margin-right: 5px;
          color: #409eff;
        }
      }
    }

    .info-content {
      padding: 30px;

      .info-item {
        margin-bottom: 20px;
        padding: 15px;
        background: #f8f9fa;
        border-radius: 6px;
        transition: all 0.3s;

        &:hover {
          transform: translateX(5px);
          background: #f0f7ff;
        }

        i {
          color: #409eff;
          margin-right: 10px;
          font-size: 18px;
        }

        .label {
          color: #606266;
          margin-right: 10px;
          font-weight: 500;
        }

        .value {
          color: #303133;
        }
      }

      .action-buttons {
        text-align: center;
        margin-top: 30px;

        .el-button {
          padding: 12px 30px;
          font-size: 16px;
        }
      }
    }
  }
}

// 响应式适配
@media screen and (max-width: 768px) {
  .information-container {
    padding: 10px;

    .info-card {
      margin: 20px auto;

      .info-header {
        h2 {
          font-size: 24px;
        }
      }

      .info-content {
        padding: 15px;
      }
    }
  }
}
</style>
