<template>

  <div style="width: 30%;margin: 4% 10%">
    <el-form ref="form" :model="form" label-position="left" label-width="100px">
      <el-form-item label="姓名">
        <el-input v-model="form.xm"></el-input>
      </el-form-item>
      <el-form-item label="身份证号">
        <el-input v-model="form.sfzh"></el-input>
      </el-form-item>
      <el-form-item label="年级">
        <el-select v-model="form.nj" placeholder="请选择年级">
          <el-option
            v-for="item in njDicData"
            :key="item.value"
            :label="item.text"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="院系">
        <el-select v-model="form.yuanxi" placeholder="请选择院系" @change="changeXy">
          <el-option
            v-for="item in yxDicData"
            :key="item.value"
            :label="item.text"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="专业">
        <el-select v-model="form.zhuanye" placeholder="请选择专业" @change="changgeZy">
          <el-option
            v-for="item in zyDicData"
            :key="item.value"
            :label="item.text"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>


      <el-form-item label="班级">
        <el-select v-model="form.banji" placeholder="请选择班级">
          <el-option
            v-for="item in bjDicData"
            :key="item.value"
            :label="item.text"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>


      <el-form-item label="性别">
        <el-select v-model="form.xb" placeholder="请选择性别">
          <el-option
            v-for="item in xbDicData"
            :key="item.value"
            :label="item.text"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="民族">
        <el-select v-model="form.mz" placeholder="请选择民族">
          <el-option
            v-for="item in mzDicData"
            :key="item.value"
            :label="item.text"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="政治面貌">
        <el-select v-model="form.zzmm" placeholder="请选择政治面貌">
          <el-option
            v-for="item in zzmmDicData"
            :key="item.value"
            :label="item.text"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="培养方向">
        <el-select v-model="form.pyfx" placeholder="请选择培养方向">
          <el-option
            v-for="item in pyfxDicData"
            :key="item.value"
            :label="item.text"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>


      <el-form-item label="户籍所在地">
        <el-input v-model="form.hjszd" placeholder="请输入户籍所在地"></el-input>
      </el-form-item>
      <el-form-item label="学号">
        <el-input v-model="form.xh" placeholder="请输入学号"></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="form.sjh" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
      </el-form-item>

      <!--    <el-form-item label="即时配送">
           <el-switch v-model="form.delivery"></el-switch>
         </el-form-item>
        <el-form-item label="活动性质">
           <el-checkbox-group v-model="form.type">
             <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
             <el-checkbox label="地推活动" name="type"></el-checkbox>
             <el-checkbox label="线下主题活动" name="type"></el-checkbox>
             <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
           </el-checkbox-group>
         </el-form-item>
         <el-form-item label="特殊资源">
           <el-radio-group v-model="form.resource">
             <el-radio label="线上品牌商赞助"></el-radio>
             <el-radio label="线下场地免费"></el-radio>
           </el-radio-group>
         </el-form-item>
         <el-form-item label="活动形式">
           <el-input type="textarea" v-model="form.desc"></el-input>
         </el-form-item>-->
      <el-form-item>
        <el-button type="primary" @click="onSubmit">更新个人信息</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>


import DataTable from '@/components/DataTable'
import MeetRole from '@/components/MeetRole'
import {queryData,saveData, getZyList, getBjList} from '@/api/sys/grxxgl/grxxgl'
import DepartTreeSelect from '@/components/DepartTreeSelect'
//  import { fetchTree } from '@/api/sys/depart/depart'
import {getSelectOptions} from '@/api/sys/dict/dict'
import {dataFormatter} from '@/utils'

export default {
  name: 'qrxxgl',
  components: {
    DepartTreeSelect,
    DataTable,
    MeetRole
  },

  data() {
    return {

      form: {
        zhuanye: '',
        userid: '',
        xb: '',
        sfzh: '',
        email: '',
        id: '',
        xh: '',
        banji: '',
        nj: '',
        pyfx: '',
        hjszd: '',
        yuanxi: '',
        zzmm: '',
        xm: '',
        mz: '',
        sjh: ''
      },
      xbDicData: [], // 性别字典 DIC_XB
      mzDicData: [],// 民族字典 DIC_MZ
      pyfxDicData: [],// 培养方向字典 DIC_PYFX
      zzmmDicData: [],// 政治面貌字典 DIC_ZZMM
      njDicData: [],// 年级字典 DIC_NJ
      yxDicData: [],// 院系字典 DIC_XY
      zyDicData: [],// 专业字典 DIC_ZY
      bjDicData: [],// 班级字典 DIC_BJ

      defaultProps: {
        value: 'value',
        text: 'text',
        label: 'deptName',
        children: 'children'
      },

    }
  },

  //  页面初始化
  created() {
    getSelectOptions('DIC_XB').then(response => {
      //  性别字典
      this.xbDicData = response.data
    })
    getSelectOptions('DIC_MZ').then(response => {
      //  教师民族字典字典
      this.mzDicData = response.data
    })
    getSelectOptions('DIC_PYFX').then(response => {
      //  培养方向字典
      this.pyfxDicData = response.data
    })

    getSelectOptions('DIC_ZZMM').then(response => {
      //  政治面貌字典
      this.zzmmDicData = response.data
    })
    getSelectOptions('DIC_NJ').then(response => {
      //  年级字典
      this.njDicData = response.data
    })
    getSelectOptions('DIC_XY').then(response => {
      //  院系字典
      this.yxDicData = response.data
    })
    getSelectOptions('DIC_ZY').then(response => {
      //  专业字典
      this.zyDicData = response.data
    })
    getSelectOptions('DIC_BJ').then(response => {
      //  班级字典
      this.bjDicData = response.data
    })


    queryData().then((response) =>{
      if(response.data){
        this.form=response.data;
      }
    })

  },

// 方法
  methods: {

    // 根据学院获取专业list
    changeXy(){
      getZyList(this.form).then((response) => {
        this.form.zhuanye='' // 专业输入框清空
        this.form.banji='' // 班级输入框清空
        this.zyDicData=[] // 重置专业字典
        this.bjDicData=[] // 班级字典清空
        this.zyDicData = response.data // 专业字典重新赋值

      })
    },
    // 根据专业获取班级list
    changgeZy(){
      getBjList(this.form).then((response) =>{
        this.form.banji='' // 班级输入框清空
        this.bjDicData=[] // 班级字典清空
        this.bjDicData = response.data
      })
    },
    onSubmit() {
      saveData(this.form).then((response) =>{
        this.$message({
          type: 'success',
          message: '更新成功!'
        },{
          type:'error',
          message: response.msg
        })
      })
    },
    //取消按钮按下
    handleUpCancel() {
      this.dialogVisible = false;
    },

    departSelected(data) {
      this.formData.id = data.id
      console.log(data + "----depart")
    },

    //  批量操作监听
    handleMultiAction(obj) {
      if (obj.opt === 'cancel') {
        this.handleCancelOrder(obj.ids)
      }
    }
  }
}
</script>
