<template>
<div>
    <img :src="bg" class="bg" alt="">
    <div class="content">
        <div class="form-list">
            <div class="form-item">
                <div class="item-label">姓名</div>
                <el-input v-model.trim="form.actualName" class="item-right" placeholder="请输入中文"></el-input>
            </div>

            <div class="warning" v-show="formItemShow[0]">
                <img :src="warning" alt="">
                <div class="warning-text">请填写姓名</div>
            </div>
            <div class="holder" v-show="!formItemShow[0]"></div>

            <div class="form-item">
                <div class="item-label">性别</div>
                <el-select v-model="form.sex" placeholder="请选择">
                    <el-option v-for="item in sexList" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>

            <div class="warning" v-show="formItemShow[1]">
                <img :src="warning" alt="">
                <div class="warning-text">请选择性别</div>
            </div>
            <div class="holder" v-show="!formItemShow[1]"></div>

            <div class="form-item">
                <div class="item-label">生日</div>
                <el-date-picker v-model="form.birthday" prefix-icon="none" type="date" placeholder="选择日期">
                </el-date-picker>
            </div>

            <div class="warning" v-show="formItemShow[2]">
                <img :src="warning" alt="">
                <div class="warning-text">请填写年龄</div>
            </div>
            <div class="holder" v-show="!formItemShow[2]"></div>

            <div class="form-item">
                <div class="item-label">区域</div>
                <el-select v-model="form.area" placeholder="请选择">
                    <el-option v-for="item in areaList" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>

            <div class="warning" v-show="formItemShow[3]">
                <img :src="warning" alt="">
                <div class="warning-text">请选择区域</div>
            </div>
            <div class="holder" v-show="!formItemShow[3]"></div>

            <div class="form-item">
                <div class="item-label">学校</div>
                <el-select v-model="form.school" filterable placeholder="请选择">
                    <el-option v-for="item in schoolList" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>

            <div class="warning" v-show="formItemShow[4]">
                <img :src="warning" alt="">
                <div class="warning-text">请填写学校完整名称</div>
            </div>
            <div class="holder" v-show="!formItemShow[4]"></div>

            <div class="form-item" v-show="schoolList.some(item => item.value === form.school) && schoolList.find(item => item.value === form.school).label.includes('其他')">
                <div class="item-label">其他</div>
                <el-input v-model.trim="form.other" class="item-right" placeholder="请输入学校名称"></el-input>
            </div>
            <div class="holder" v-show="schoolList.some(item => item.value === form.school) && schoolList.find(item => item.value === form.school).label.includes('其他')"></div>

            <div class="form-item">
                <div class="item-label">年级</div>
                <el-select v-model="form.grade" placeholder="请选择">
                    <el-option v-for="item in gradeList" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>

            <div class="warning" v-show="formItemShow[5]">
                <img :src="warning" alt="">
                <div class="warning-text">请选择年级</div>
            </div>

        </div>
    </div>
    <div class="confim-button" @click="submit">Start Now !</div>
</div>
</template>

<script>
export default {
  data () {
    return {
      bg: require('../../public/img/info/bg.png'),
      warning: require('../../public/img/info/warning.png'),
      form: {
        sex: 1,
        school: ''
      },
      sexList: [{
        label: '男',
        value: 1
      }, {
        label: '女',
        value: 2
      }],
      schoolList: [],
      areaList: [],
      gradeList: [{
        label: '一年级',
        value: '一年级'
      },
      {
        label: '二年级',
        value: '二年级'
      },
      {
        label: '三年级',
        value: '三年级'
      },
      {
        label: '四年级',
        value: '四年级'
      },
      {
        label: '五年级',
        value: '五年级'
      },
      {
        label: '六年级',
        value: '六年级'
      },
      {
        label: '七年级',
        value: '七年级'
      },
      {
        label: '八年级',
        value: '八年级'
      },
      {
        label: '九年级',
        value: '九年级'
      },
      {
        label: '高一',
        value: '高一'
      },
      {
        label: '高二',
        value: '高二'
      },
      {
        label: '高三',
        value: '高三'
      }
      ],
      formItemList: ['actualName', 'sex', 'birthday', 'area', 'school', 'grade'],
      formItemShow: [false, false, false, false, false, false],
      user: JSON.parse(localStorage.getItem('user')) || {}
    }
  },
  methods: {
    getareaList () {
      this.$api.post('/user/queryAllArea', {}).then(r => {
        this.areaList = r.list.map(item => ({
          label: item.areaName,
          value: item.id
        }))
      })
    },
    getSchoolList (val) {
      this.$api.post('/user/querySchoolByAreaId', {
        reqdata: {
          id: val
        }
      }).then(r => {
        let list = r.list
        let index = list.findIndex(item => item.schoolName.includes('其他'))
        let obj = list.splice(index, 1)
        list.push(obj[0])
        this.schoolList = list.map(item => ({
          label: item.schoolName,
          value: item.id
        }))
        this.$set(this.form, 'school', null)
      })
    },
    submit (e) {
      let {
        actualName,
        sex,
        birthday,
        area,
        grade,
        other,
        school
      } = this.form
      console.log(this.form)
      this.formItemShow = this.formItemList.map(item => !this.form[item])
      if (!actualName || !birthday || !area || !grade || !school || !sex) {
        return
      }
      this.$api.post('/user/updateUser', {
        reqdata: {
          actualName,
          sex,
          birthday: this.$utils.formatYMD(birthday),
          area,
          grade,
          other,
          school,
          id: this.user.id
        }
      }).then(() => {
        this.$api.post('/user/queryUserById', {
          reqdata: {
            id: this.user.id
          }
        }).then(res => {
          let loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          localStorage.setItem('user', JSON.stringify(res.object))
          let time = setTimeout(() => {
            location.reload()
            loading.close()
            clearTimeout(time)
          }, 500)
        })
      })
    },
    login () {
      this.$api.get('/weChat/pc/login').then(res => {
        location.href = res.object
      })
    },
    getUserInfo () {
      let {
        code,
        state
      } = this.$route.query
      this.$api.get(`/weChat/callback/pc?code=${code}&state=${state}`).then(res => {
        localStorage.setItem('user', JSON.stringify(res.object))
        let time = setTimeout(() => {
          location.href = location.origin + location.pathname
          clearTimeout(time)
        }, 500)
      })
    }
  },
  mounted () {
    let user = localStorage.getItem('user') && JSON.parse(localStorage.getItem('user'))
    user || this.login()
    this.getareaList()
  },
  watch: {
    'form.area' (val) {
      this.getSchoolList(val)
    },
    'form.actualName' (val) {
      this.form.actualName = val.replace(/[^\u4E00-\u9FA5]/g, '')
    }
  }
}
</script>

<style lang="scss">
.el-input__inner {
    border: none;
    width: 340px !important;
    padding-left: 15px !important;
}

.el-input {
    width: 340px !important;
}
</style><style lang="scss" scoped>
.bg {
    // width: 100%;
    margin: 0;
    padding: 0;
    float: left;
    position: absolute;
    z-index: 0;
    left: 50%;
    transform: translateX(-50%);
}

.content {
    position: relative;
    z-index: 9;
    display: flex;
    height: 700px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-bottom: 20px;
    padding-top: 300px;

    .form-list {

        .warning {
            width: 440px;
            display: flex;
            margin-bottom: 6px;
            padding-left: 20px;

            >image {
                width: 16px;
                height: 16px;
            }

            &-text {
                margin-left: 12px;
                font-weight: 400;
                color: #59598D;
                font-size: 14px;
            }
        }

        .form-item {
            width: 471px;
            height: 53px;
            background: #FFFFFF;
            box-shadow: 0px 2px 15px 0px rgba(228, 231, 246, 0.5);
            border-radius: 100px;
            display: flex;
            align-items: center;
            margin-bottom: 10px;

            .item-label {

                height: 16px;
                width: 80px;
                font-size: 16px;
                font-weight: 400;
                color: #161616;
                line-height: 16px;
                padding: 0 0 0 25px;
                box-sizing: border-box;
                border-right: 1px solid #D8D8D8;
            }
        }
    }

}

.confim-button {
    background-image: linear-gradient(to right, #6247FF, #57A8EF);
    width: 330px;
    height: 65px;
    margin: 20px auto;
    border-radius: 60px;
    color: #FFFFFF;
    line-height: 65px;
    font-size: 24px;
    text-align: center;
}

.holder {
    height: 24px;
}
</style>
