<template>
  <div class="container">
    <div class="inner">
      <h1>个人信息</h1>
      <ul>
        <li>
          <p class="label"><span>*</span>姓名</p>
          <input placeholder="请输入姓名" v-model.trim="name" />
        </li>

        <li>
          <p class="label"><span>*</span>编号</p>
          <input placeholder="请输入编号" v-model.trim="codeStr" />
        </li>

        <li>
          <p class="label"><span>*</span>性别</p>
          <input type="radio" value="0" v-model="gender" />男
          <input type="radio" value="1" v-model="gender" />女
        </li>

        <li>
          <p class="label"><span>*</span>手机号</p>
          <input placeholder="请输入手机号" v-model.trim="phoneNum" />
        </li>

        <li>
          <p class="label"><span>*</span>学校</p>
          <input placeholder="请输入学校名称" v-model.trim="school" />
        </li>

        <li>
          <p class="label"><span>*</span>专业</p>
          <input placeholder="请输入专业名称" v-model.trim="profession" />
        </li>

        <li>
          <p class="label"><span>*</span>人员属性</p>
          <div class="userTypeList">
            <span :class="{ active: userType === 0 }" @click="changeUserType(0)">群众</span>
            <span :class="{ active: userType === 1 }" @click="changeUserType(1)">团员</span>
            <span :class="{ active: userType === 2 }" @click="changeUserType(2)">党员</span>
          </div>
        </li>
      </ul>

      <button class="subBtn" :disabled="saving" @click="submitClick">
        {{ saving ? "保存中..." : "保存" }}
      </button>

      <button class="subBtn subBtn-ghost" :disabled="saving" @click="resetClick">
        取消修改
      </button>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { showToast, showSuccessToast, showFailToast } from "vant";

export default {
  data() {
    return {
      name: "",
      code: null,
      codeStr: "",

      gender: "0",
      phoneNum: "",
      school: "",
      profession: "",
      userType: 0,

      saving: false,
      original: null,
    };
  },
  methods: {
    changeUserType(value) {
      this.userType = value;
    },

    snapshot() {
      return {
        name: this.name,
        code: this.code,
        codeStr: this.codeStr,
        gender: this.gender,
        phoneNum: this.phoneNum,
        school: this.school,
        profession: this.profession,
        userType: this.userType,
      };
    },

    applyData(data = {}) {
      this.name = data.name ?? "";
      this.code = data.code ?? null;
      this.codeStr = data.code != null ? String(data.code) : "";

      this.gender = data.gender != null ? String(data.gender) : "0";

      this.phoneNum = data.phoneNum ?? "";
      this.school = data.school ?? "";
      this.profession = data.profession ?? "";
      this.userType = data.userType ?? 0;
    },

    fetchUsrInfo() {
      axios
        .get("/api/userInfo")
        .then((response) => {
          const { error, data = {}, msg } = response.data || {};
          if (error === 0) {
            this.applyData(data);
            this.original = this.snapshot();
          } else {
            showFailToast(msg || "获取用户信息失败");
          }
        })
        .catch(() => showFailToast("网络错误，请稍后重试"));
    },

    check() {
      const name = this.name.trim();
      const codeStr = this.codeStr.trim();
      const phoneNum = this.phoneNum.trim();
      const school = this.school.trim();
      const profession = this.profession.trim();

      if (!name) {
        showToast("姓名不可为空");
        return;
      }
      if (!codeStr) {
        showToast("编号不可为空");
        return;
      }
      if (!phoneNum) {
        showToast("手机号不可为空");
        return;
      }
      if (!school) {
        showToast("学校不可为空");
        return;
      }
      if (!profession) {
        showToast("专业不可为空");
        return;
      }

      const codeNum = Number(codeStr);
      const code = Number.isFinite(codeNum) ? codeNum : codeStr;

      const payload = {
        name,
        code,
        gender: Number(this.gender),
        phoneNum,
        school,
        profession,
        userType: this.userType,
      };
      return payload;
    },

    submitClick() {
      const payload = this.check();
      if (!payload) return;
      if (this.saving) return;

      this.saving = true;
      axios
        .post("/api/userInfo/submit", payload)
        .then((response) => {
          const { error, msg } = response.data || {};
          if (error === 0) {
            showSuccessToast("保存成功");
            this.original = this.snapshot();
          } else {
            showFailToast(msg || "网络错误，请稍后重试");
          }
        })
        .catch(() => showFailToast("网络错误，请稍后重试"))
        .finally(() => {
          this.saving = false;
        });
    },

    resetClick() {
      if (!this.original) return;
      this.name = this.original.name;
      this.code = this.original.code;
      this.codeStr = this.original.codeStr;
      this.gender = this.original.gender;
      this.phoneNum = this.original.phoneNum;
      this.school = this.original.school;
      this.profession = this.original.profession;
      this.userType = this.original.userType;
      showToast("已还原");
    },
  },
  mounted() {
    this.fetchUsrInfo();
  },
};
</script>

<style scoped>
.inner {
  padding: 20px;
  background: white;
  color: #333;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  padding: 15px 0;
  border-bottom: 1px solid #eee;
  color: #333;
}

.label {
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

.label span {
  color: red;
}

li input:not([type="radio"]) {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-top: 5px;
  box-sizing: border-box;

  color: #333;
  background-color: #fff;
}

li input:not([type="radio"])::placeholder {
  color: #999;
}

input[type="radio"] {
  margin-right: 6px;
  margin-left: 10px;
}
input[type="radio"]:first-of-type {
  margin-left: 0;
}

.userTypeList {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.userTypeList span {
  padding: 8px 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  color: #333;
}

.userTypeList span.active {
  background: #ff5d23;
  color: white;
  border-color: #ff5d23;
}

.subBtn {
  width: 100%;
  padding: 15px;
  background: #ff5d23;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  margin-top: 20px;
  cursor: pointer;
}

.subBtn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.subBtn-ghost {
  background: transparent;
  color: #333;
  border: 1px solid #ddd;
}
</style>
