<template>
  <div class="container">
    <div class="inner">
      <h1>个人信息</h1>
      <ul>
        <li>
          <p class="label"><span>*</span>姓名</p>
          <span class="txt">{{ name }}</span>
        </li>
        <li>
          <p class="label"><span>*</span>编号</p>
          <span class="txt">{{ code }}</span>
        </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" @click="submitClick">提交</button>
    </div>
  </div>
</template>

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

export default {
  data() {
    return {
      name: "",
      code: null,
      gender: 0,
      phoneNum: "",
      school: "",
      profession: "",
      userType: 0,
    };
  },
  methods: {
    changeUserType(value) {
      this.userType = value;
    },
    fetchUsrInfo() {
      const that = this;
      axios.get("/api/userInfo").then(function (response) {
        const { error, data = {} } = response.data;
        if (error === 0) {
          that.name = data.name;
          that.code = data.code;
          that.gender = data.gender;
          that.phoneNum = data.phoneNum;
          that.school = data.school;
          that.profession = data.profession;
          that.userType = data.userType;
        }
      });
    },
    check() {
      var phoneNum = this.phoneNum;
      var school = this.school;
      var profession = this.profession;

      if (phoneNum === "") {
        showToast("手机号不可为空");
        return;
      }
      if (school === "") {
        showToast("学校不可为空");
        return;
      }
      if (profession === "") {
        showToast("专业不可为空");
        return;
      }

      const payload = {
        name: this.name,
        code: this.code,
        gender: this.gender,
        phoneNum,
        school,
        profession,
        userType: this.userType,
      };
      return payload;
    },
    submitClick() {
      var payload = this.check();
      if (!payload) {
        return;
      }

      axios.post("/api/userInfo/submit", payload).then(function (response) {
        const { error, msg } = response.data;
        if (error === 0) {
          showSuccessToast("操作成功");
        } else {
          showFailToast(msg || "网络错误，请稍后重试");
        }
      });
    },
  },
  mounted() {
    this.fetchUsrInfo();
  },
};
</script>

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

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

ul {
  list-style: none;
}

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

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

.label span {
  color: red;
}

.txt {
  color: #666;
}

input[type="text"], input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-top: 5px;
}

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

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

.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;
}
</style>
