<template>
  <div class="personal-info">
    <PageHeader
      title="个人信息"
      :is-back="true"
      :border-bottom="false"
      :background="headerBackground"
    />

    <div class="content-wrapper">
      <div class="form-container">
        <div class="form-item">
          <div class="form-label">头像</div>
          <div class="form-value">
            <image
              class="avatar"
              :src="teacherInfo.avatar || '@/static/notes/default-avatar.png'"
              mode="aspectFill"
            ></image>
          </div>
        </div>

        <div class="form-item">
          <div class="form-label">姓名</div>
          <div class="form-value">
            <u-input
              v-model="teacherInfo.name"
              :border="false"
              placeholder="请输入姓名"
              :clearable="false"
              :custom-style="{ textAlign: 'right' }"
            ></u-input>
          </div>
        </div>

        <div class="form-merge">
          <div class="form-item-merge">
            <div class="form-label">所属学校</div>
            <div class="form-value">
              <u-input
                v-model="teacherInfo.schoolName"
                :border="false"
                placeholder="请输入学校名称"
                :clearable="false"
                :custom-style="{ textAlign: 'right' }"
                :disabled="true"
              ></u-input>
            </div>
          </div>
          <div class="line" style="height: 1px"></div>
          <div class="form-item-merge">
            <div class="form-label">学院</div>
            <div class="form-value" @click="showCollegePicker = true">
              {{ teacherInfo.collegeName || "请选择学院" }}
              <u-icon name="arrow-right" color="#999" size="24"></u-icon>
            </div>
          </div>
          <div class="line" style="height: 1px"></div>
          <div class="form-item-merge">
            <div class="form-label">专业</div>
            <div class="form-value" @click="showMajorPicker = true">
              {{ teacherInfo.professionalName || "请选择专业" }}
              <u-icon name="arrow-right" color="#999" size="24"></u-icon>
            </div>
          </div>
          <div class="line" style="height: 1px"></div>
          <div class="form-item-merge">
            <div class="form-label">岗位</div>
            <div class="form-value">
              <u-input
                v-model="teacherInfo.post"
                :border="false"
                placeholder="请输入岗位"
                :clearable="false"
                :custom-style="{ textAlign: 'right' }"
              ></u-input>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="save-btn" @click="saveInfo">保存</div>
    <!-- 学院选择器 -->
    <u-select
      v-model="showCollegePicker"
      :list="collegeList"
      @confirm="confirmCollege"
    ></u-select>

    <!-- 专业选择器 -->
    <u-select
      v-model="showMajorPicker"
      :list="majorList"
      @confirm="confirmMajor"
    ></u-select>
  </div>
</template>

<script>
import PageHeader from "@/components/PageHeader.vue";

export default {
  name: "PersonalInfo",
  components: {
    PageHeader,
  },
  data() {
    return {
      teacherInfo: {
        name: "",
        id: "",
        collegeName: "",
        professionalName: "",
        post: "",
        collegeManagementId: "",
        professionalManagementId: "",
        schoolName: ""
      },
      headerBackground: {
        background: "transparent",
      },
      showCollegePicker: false,
      showMajorPicker: false,
      collegeList: [],
      majorList: [],
    };
  },
  onLoad() {
    // 从vuex获取教师信息
    const info = this.vuex_teacherInfo || {};
    this.teacherInfo = {
      ...info,
      schoolName: "江西新能源科技职业技术学院",
    };

    this.getSchoolInfo();
  },
  methods: {
    // 获取学院和专业信息
    getSchoolInfo() {
      this.$u.api.getData().then((res) => {
        if (res.succeed && res.data) {
          this.handleSchoolInfo(res);
        }
      });
    },
    // 处理获取的接口数据
    handleSchoolInfo(res) {
      // 处理学院信息
      if (res.data && res.data.length > 0) {
        // 设置学院列表
        this.collegeList = res.data.map((item) => ({
          value: item.value,
          label: item.label,
        }));

        // 设置初始专业列表为第一个学院的专业
        if (res.data[0].children && res.data[0].children.length > 0) {
          this.majorList = res.data[0].children;
        }

        // 如果已有选择的学院，则设置对应的专业列表
        if (this.teacherInfo.collegeName) {
          const selectedCollege = res.data.find(
            (item) => item.label === this.teacherInfo.collegeName
          );
          if (selectedCollege && selectedCollege.children) {
            this.majorList = selectedCollege.children;
            
            // 如果没有collegeManagementId，则设置它
            if (!this.teacherInfo.collegeManagementId) {
              this.teacherInfo.collegeManagementId = selectedCollege.value;
            }
            
            // 如果有专业名称但没有专业ID，则设置专业ID
            if (this.teacherInfo.professionalName && !this.teacherInfo.professionalManagementId) {
              const selectedMajor = selectedCollege.children.find(
                (item) => item.label === this.teacherInfo.professionalName
              );
              if (selectedMajor) {
                this.teacherInfo.professionalManagementId = selectedMajor.value;
              }
            }
          }
        }
      }
    },

    // 确认学院选择
    confirmCollege(e) {
      this.teacherInfo.collegeName = e[0].label;
      this.teacherInfo.collegeManagementId = e[0].value;

      // 根据选中的学院更新专业列表
      this.$u.api.getData().then((res) => {
        if (res.succeed && res.data) {
          const selectedCollege = res.data.find(
            (item) => item.label === this.teacherInfo.collegeName
          );

          if (selectedCollege && selectedCollege.children) {
            this.majorList = selectedCollege.children;
            // 清空之前选择的专业
            this.teacherInfo.professionalName = "";
          }
        }
      });
    },

    // 确认专业选择
    confirmMajor(e) {
      this.teacherInfo.professionalName = e[0].label;
      this.teacherInfo.professionalManagementId = e[0].value;
    },

    // 保存个人信息
    saveInfo() {
      // 表单验证
      if (!this.teacherInfo.name) {
        return this.$u.toast("请输入姓名");
      }
      if (!this.teacherInfo.schoolName) {
        return this.$u.toast("请输入学校名称");
      }
      if (!this.teacherInfo.collegeName) {
        return this.$u.toast("请选择学院");
      }
      if (!this.teacherInfo.professionalName) {
        return this.$u.toast("请选择专业");
      }
      if (!this.teacherInfo.post) {
        return this.$u.toast("请输入岗位");
      }

      this.$u.vuex("vuex_teacherInfo", this.teacherInfo);
      console.log("this.teacherInfo----", this.teacherInfo);
      let query = {
        ...this.teacherInfo,
        schoolName: "江西新能源科技职业技术学院",
      };

      this.$u.api
        .updateTeacherInfo(query)
        .then((res) => {
          this.$u.toast("保存成功");
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        })
        .catch((err) => {
          this.$u.toast("保存失败，请重试");
        });

      // 模拟保存成功
      this.$u.toast("保存成功");
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    },
  },
};
</script>

<style scoped>
.personal-info {
  height: 100vh;
  background-image: url("@/static/notes/bg.png");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto;
  display: flex;
  flex-direction: column;
  position: relative;
}

.content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20rpx 30rpx 60px;
  overflow: hidden;
}

.form-container {
  border-radius: 8px;
  margin-top: 46rpx;
}

.form-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
}

.form-merge {
  display: flex;
  flex-direction: column;
  border-radius: 20rpx;
  background-color: #fff;
}

.form-item-merge {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
}

.line {
  width: 90%;
  height: 1px;
  background-color: #f0f0f0;
  margin: 0 auto;
}

.form-label {
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
  flex-shrink: 0;
  width: 160rpx;
}

.form-value {
  display: flex;
  align-items: center;
  font-size: 27rpx;
  font-weight: 500;
  color: #333;
  flex: 1;
  justify-content: flex-end;
  text-align: right;
}

.avatar {
  width: 52rpx;
  height: 52rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.save-btn {
  width: 90%;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  color: #fff;
  background: #4f6aff;
  border-radius: 16rpx;
  margin: 60rpx auto;
  font-size: 32rpx;
  font-weight: bold;
  display: fixed;
  bottom: 0;
}
</style>
