<template>
  <d2-container class="page" id="personalInfo_index_scoped">
    
    <el-tabs value="first">
      <el-tab-pane label="考生信息-请认真核对信息，如信息有误将影响录取1" name="first">
        <el-form ref="form" label-width="140px" :model="form">
          <el-row> 
            <el-col :span="2">&nbsp;</el-col>
            <el-col :span="8">
              <el-form-item label="生源省份">
                  <el-select v-model="value" placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="考生姓名">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">&nbsp;</el-col>
          </el-row>

          <el-row> 
            <el-col :span="2">&nbsp;</el-col>
            <el-col :span="8">
              <el-form-item label="证件类型">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="证件号码">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">&nbsp;</el-col>
          </el-row>
          <el-row> 
            <el-col :span="2">&nbsp;</el-col>
            <el-col :span="8">
              <el-form-item label="考生手机号码">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="考生性别">
                  <el-select v-model="value" placeholder="请选择">
                    <el-option label="男" value="shanghai"></el-option>
                    <el-option label="女" value="beijing"></el-option>
                  </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">&nbsp;</el-col>
          </el-row>

          <el-row> 
            <el-col :span="2">&nbsp;</el-col>
            <el-col :span="8">
              <el-form-item label="高考报名号">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="高考类型（文理）">
                <el-select v-model="value" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">&nbsp;</el-col>
          </el-row>
          <el-row> 
            <el-col :span="2">&nbsp;</el-col>
            <el-col :span="8">
              <el-form-item label="考生民族">
                <el-select v-model="value" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="毕业高中">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">&nbsp;</el-col>
          </el-row>

          <el-row> 
            <el-col :span="2">&nbsp;</el-col>
            <el-col :span="8">
              <el-form-item label="家人联系电话">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="邮寄地址">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">&nbsp;</el-col>
          </el-row>

          <el-row>
            <el-col :span="10">&nbsp;</el-col>
            <el-col :span="8">
              <el-form-item>
                <el-button type="primary" @click="onSubmit">立即创建</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="6">&nbsp;</el-col>
          </el-row>

        </el-form>
      </el-tab-pane>
    </el-tabs>
   
    <el-tabs value="second">
      <el-tab-pane label="上传图片" name="second">
        <el-row>
          <el-col :span="8">
            <!-- <center> -->
              <el-card class="box-card" style="width: 190px;" shadow="never">
                <div slot="header" class="clearfix">
                  <span style="font-size: 14px">近期免冠证件照</span>
                </div>
                <el-upload
                  class="avatar-uploader"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-card>
            <!-- </center> -->
          </el-col>
          <el-col :span="8">
            <!-- <center> -->
              <el-card class="box-card" style="width: 190px;" shadow="never">
                <div slot="header" class="clearfix">
                  <span style="font-size: 14px">近期免冠证件照</span>
                </div>
                <el-upload
                  class="avatar-uploader"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-card>
              <!-- </center> -->
          </el-col>
          <el-col :span="8">
            <!-- <center> -->
              <el-card class="box-card" style="width: 190px;" shadow="never">
                <div slot="header" class="clearfix">
                  <span style="font-size: 14px">近期免冠证件照</span>
                </div>
                <el-upload
                  class="avatar-uploader"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-card>
            <!-- </center> -->
          </el-col>
        </el-row>



      </el-tab-pane>
    </el-tabs>  
  </d2-container>
</template>

<script>
export default {
  components: {
  },
  data() {
    return {
      options:[{label:"label",value:"value"}],
      value:"",
      imageUrl:"",
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }
    };
  },
  methods:{
    beforeAvatarUpload(){},
    handleAvatarSuccess(){},
    onSubmit(){},
  }
};
</script>

<style>

 #personalInfo_index_scoped .el-card__body {
    padding: 5px 5px!important;
 }
 #personalInfo_index_scoped .el-card__header {
      padding: 11px 20px;
      
 }
 #personalInfo_index_scoped .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    /* margin: 10px 10px ; */
    background-color: #D5D5D5 !important;
  }
  #personalInfo_index_scoped .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  #personalInfo_index_scoped .avatar-uploader-icon {
    font-size: 28px;
    color: #0a0a0a;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  #personalInfo_index_scoped .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
