<!-- 報名資訊填報 -->
<template>
  <div class="container-box">
    <el-form ref="form" :rules="rules" show-message :inline-message="true" :model="form" label-width="250px" class="form" size="mini">
      <el-row>
        <el-col :span="12">
          <el-form-item label="姓名:" prop="name">
            <el-input v-model="form.name" placeholder="請輸入姓名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="證件型別:">
            <el-select v-model="form.paperWorkType" placeholder="請選擇">
              <el-option v-for="item in paperWorkOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="證件號碼：">
            <el-input v-model="form.idCard" placeholder="請輸入證件號碼"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性別：">
            <el-select v-model="form.sex" placeholder="請選擇">
              <el-option key="0" label="女" value="0"></el-option>
              <el-option key="1" label="男" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="出生日期：">
            <el-date-picker v-model="form.birthDay" value-format="yyyy-mm-dd" type="date" placeholder="選擇日期" :picker-options="pickerOptions" @change="birthDayChoose"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="年齡：">
            <el-input v-model="form.age" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="報考級別：">
            <el-select v-model="form.applyLevel" placeholder="請選擇">
              <el-option key="0" label="初級" value="0"></el-option>
              <el-option key="1" label="中級" value="1"></el-option>
              <el-option key="2" label="高階" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="報考資格：">
            <el-select v-model="form.applyQualifications" placeholder="請選擇">
              <el-option key="0" label="軟體設計師" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="報考科目：">
            <el-select v-model="form.applySubject" placeholder="請選擇">
              <el-option key="0" label="基礎知識應用技術" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="現有職稱（資格）：">
            <el-input v-model="form.jobTitle"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="取得職稱（資格）時間：">
            <el-date-picker v-model="form.jobTitleTime" value-format="yyyy-mm-dd" type="date" placeholder="選擇日期" :picker-options="pickerOptions"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="在職情況：">
            <el-input v-model="form.onWork"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="工作單位：">
            <el-input v-model="form.workUnit"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="參加工作時間：">
            <el-date-picker v-model="form.onWorkTime" value-format="yyyy-mm-dd" type="date" placeholder="選擇日期" :picker-options="pickerOptions"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="本專業工作時間：">
            <el-date-picker v-model="form.majorWorkTime" value-format="yyyy-mm-dd" type="date" placeholder="選擇日期" :picker-options="pickerOptions"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="所在學校：">
            <el-input v-model="form.currentSchool"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所學專業：">
            <el-input v-model="form.discipline"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="畢業時間：">
            <el-date-picker v-model="form.graduationTime" value-format="yyyy-mm-dd" type="date" placeholder="選擇日期" :picker-options="pickerOptions"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="專業名稱：">
            <el-input v-model="form.disciplineName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="在學/已有學歷：">
            <el-select v-model="form.education" placeholder="請選擇">
              <el-option key="0" label="本科" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="學制：">
            <el-select v-model="form.educationalType" placeholder="請選擇">
              <el-option key="0" label="四年" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="學位：">
            <el-input v-model="form.educationalLevel"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="通訊地址：">
            <el-input v-model="form.address"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="郵箱：">
            <el-input v-model="form.email"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手機號碼：">
            <el-input v-model="form.phone"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="固定電話：">
            <el-input v-model="form.fixedTelephone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="郵政編碼：">
            <el-input v-model="form.zipCode"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row type="flex" justify="center">
      <button class="submitButton btn" @click="submit()">提交</button>
      <button class="resetButton btn" @click="reset()">重置</button>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'informationFill',
  components: {
  },
  data () {
    return {
      form: {
        name: '',//姓名
        paperWorkType: '',//證件型別
        idCard: '',//證件號碼
        birthDay: '',//出生日期
        age: '',//年齡
        applyLevel: '',//報考級別
        applyQualifications: '',//報考資格
        applySubject: '',//報考科目
        jobTitle: '',//現有職稱（資格）
        jobTitleTime: '',//取得職稱（資格）時間
        onWork: '',//在職情況
        workUnit: '',//工作單位
        onWorkTime: '',//參加工作時間
        majorWorkTime: '',//本專業工作時間
        currentSchool: '',//所在學校
        discipline: '',//所學專業
        graduationTime: '',//畢業時間
        disciplineName: '',//專業名稱
        education: '',//在學/已有學歷
        educationalType: '',//學制
        educationalLevel: '',//學位
        address: '',//通訊地址
        email: '',//郵箱
        phone: '',//手機號
        fixedTelephone: '',//固定電話
        zipCode: '',//郵政編碼
      },
      paperWorkOptions: [{
        value: '1',
        label: '居民身份證/社保卡'
      },],
      pickerOptions: {
        disabledDate (time) {
          // 設定禁用狀態，引數為當前日期，要求返回 Boolean
          return time.getTime() > Date.now()
        }
      },
      rules: {
        name: [{ required: true, message: '請輸入姓名', trigger: 'blur' }]

      }

    }
  },
  props: {},
  computed: {},
  watch: {},
  created () { },
  mounted () { },
  methods: {
    birthDayChoose (val) {
      if (val) {
        this.form.age = Number(new Date().getFullYear()) - Number(val.substring(0, 4))
      } else {
        this.form.age = ''
      }
    },
    submit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$message({
            type: 'success',
            message: '提交成功!'
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })

    },
    reset () {
      this.$confirm('此操作將會重置所有資訊, 是否繼續?', '提示', {
        confirmButtonText: '確定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '重置成功!'
        })
        this.$refs.form.resetFields()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消重置'
        })
      })
    }

  },
}

</script>

<style lang='scss' scoped>
.btn {
  margin-top: 30px;
  width: 120px;
  height: 40px;
  border-radius: 24px;
  font-size: 16px;
  color: #fff;
  border: none;
  line-height: 40px;
  cursor: pointer;
}
.submitButton {
  background-color: #00d2a4;
  margin-right: 10px;
}
.resetButton {
  background-color: #feb434;
  margin-left: 10px;
}
::v-deep.container-box .form {
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
//去除元件下邊距，設定為0
::v-deep.container-box .el-form-item {
  margin: 0;
  height: 40px;
  border-right: 1px solid #ccc;
  border-top: 1px solid #ccc;
}
::v-deep.container-box .el-input {
  width: 200px;
}
::v-deep.container-box .el-input__inner {
  border: #fff;
}
//label文字居中，背景色灰色，文字顏色黑色，右邊框淺灰色
::v-deep.container-box .el-form-item__label {
  //   background: #f0f0f0;
  color: black;
  height: 40px;
  line-height: 40px;
  border-right: 1px solid #ccc;
}
::v-deep.container-box .el-form-item__content {
  height: 40px;
  line-height: 40px;
}
//改變input框中文字 居中，在禁用時背景色使用白色，文字顏色黑色
::v-deep.container-box .el-input.is-disabled .el-input__inner {
  background: #fff;
  color: black;
}
// //改變input框中文字 居中，在不禁用時背景色使用白色，文字顏色黑色
// ::v-deep.container-box .el-input .el-input__inner {
//   text-align: center;
//   background: #fff;
//   color: black;
// }
</style>