<template>
  <div class="setInfo-box">
    <div class="setInfo">
      <!-- <van-nav-bar title="修改个人信息" left-text="返回" left-arrow @click-left="onClickLeft" /> -->
      <van-form @submit="onSubmit">
        <van-field
          v-model="personInfo.name"
          label="姓名"
          placeholder="姓名"
          :rules="[{ required: true, message: '请填写姓名' }]"
        />
        <van-field
          v-model="personInfo.phone"
          type="number"
          maxlength="11"
          label="手机号"
          placeholder="手机号"
          :rules="[{ required: true, message: '请填写手机号码' }]"
        />

        <field-picker
          label="性别"
          placeholder="点击选择性别"
          v-model="personInfo.sex"
          value-id="id"
          value-key="label"
          :columns="sexArry"
        />

        <field-picker
          v-model="personInfo.termId"
          label="学期"
          placeholder="点击选择学期"
          value-id="termId"
          value-key="name"
          :columns="SemesterArry"
        />

        <field-picker
          v-model="personInfo.classId"
          label="班级"
          placeholder="点击选择班级"
          value-id="classId"
          value-key="name"
          :columns="ClasssArry"
        />

        <div style="margin: 20px; margin-top:3em;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { SetUser, getSchoolterm, getSchoolClass } from '@/util/api'

export default {
  components: {
    FieldPicker: () => import('@/components/FieldPicker')
  },

  data() {
    return {
      personInfo: {
        name: null,
        sex: null,
        phone: null,
        termId: null,
        classId: null,
      },
      sexArry: [{id: 1, label: '男'}, {id: 2, label: '女'}],
      SemesterArry: [],
      ClasssArry: [],
    }
  },
  computed: {
    ...mapState({
      user: (state) => state.user
    })
  },
  watch: {
    user: {
      handler(nw) {
        if (nw) {
          this.personInfo.name = nw.name
          this.personInfo.phone = nw.phone
          this.personInfo.classId = nw.classId
          this.personInfo.termId = nw.termId
          this.personInfo.sex = nw.sex
        }
      },
      immediate: true
    }
  },
  mounted() {
    this.getSemester()
  },
  methods: {
    // 获取学期班级 star
    getSemester() {
      getSchoolterm({ pageSize: 999 }).then((e) => {
        console.log('获取学期', e)
        this.SemesterArry = e.records

        if ((!this.ClasssArry || this.ClasssArry.length < 1) && e.total > 0) {
          const first = this.SemesterArry[0]

          this.getClass(first.termId)
        }
      })
    },

    getClass(termId) {
      getSchoolClass(termId, { pageSize: 999 }).then((e) => {
        console.log('获取班级', e)
        this.ClasssArry = e.records
      })
    },
    // 获取学期班级 end
    onClickLeft() {
      this.$router.go(-1)
    },
    //学期区------------------------

    onSubmit(values) {
      console.log('submit', values)

      this.$toast.success('修改成功！')
      SetUser(this.$store.state.user.personId, {
        ...this.personInfo,
        personId: this.$store.state.user.personId,
      }).then((e) => {
        this.$store.commit('SET_USER_INFO', this.personInfo)
        this.$router.go(-1)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.setInfo-box {
  background-color: #fff;
  height: 100%;

  width: 100vw;
  display: flex;
  .setInfo {
    align-items: center;
    margin: 0 auto;
    width: 100%;
    height: 50vh;
    // border-bottom-left-radius: 20px;
    // border-bottom-right-radius: 20px;
    .van-form {
      position: relative;
      top: 4vh;
      .van-field {
        margin-bottom: 2em;
        font-size: 17px;
        font-weight: 600;
      }
    }
  }
}
</style>