<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="form.actualName" class="item-right" placeholder="请输入"></el-input>
            </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="form-item">
                <div class="item-label">年龄</div>
                <el-input v-model="form.age" class="item-right" placeholder="请输入"></el-input>
            </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="form-item">
                <div class="item-label">学校</div>
                <el-select v-model="form.school" filterable :filter-method="filterMethod" 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">
                <img :src="warning" alt="">
                <div class="warning-text">请填写学校完整名称</div>
            </div>

            <div class="form-item">
                <div class="item-label">年级</div>
                <el-input v-model="form.grade" class="item-right" placeholder="请输入"></el-input>
            </div>
            <div class="form-item">
                <div class="item-label">其他</div>
                <el-input v-model="form.other" class="item-right" placeholder="请输入"></el-input>
            </div>
        </div>
        <div class="confim-button">Start Now !</div>
    </div>
</div>
</template>

<script>
export default {
  data () {
    return {
      bg: require('../../public/img/info/bg.png'),
      warning: require('../../public/img/info/warning.png'),
      form: {},
      sexList: [{
        label: '男',
        vaule: 1
      }, {
        label: '女',
        value: 2
      }],
      schoolList: [],
      schoolData: [],
      areaList: []
    }
  },
  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 => {
        this.schoolData = r.list.map(item => ({
          label: item.schoolName,
          value: item.id
        }))
        this.schoolList = this.schoolData
      })
    },
    filterMethod (val) {
      this.schoolList = this.schoolData.filter(item => item.label.includes(val))
    }
  },
  mounted () {
    this.getareaList()
  },
  watch: {
    'form.area' (val) {
      this.getSchoolList(val)
    }
  }
}
</script>

<style lang="scss">
.el-input__inner {
    border: none;
    width: 340px !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;
    // justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-bottom: 20px;

    .form-list {
        padding-top: 400px;
        margin-bottom: 90px;

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

            image {
                width: 18px;
                height: 18px;
            }

            &-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: 20px;

            .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;
        border-radius: 60px;
        color: #FFFFFF;
        line-height: 65px;
        font-size: 24px;
        text-align: center;
    }
}
</style>
