<template>
  <div>
    <!-- <breadcrumb class="content-max-width crumb" :data="crumbData"/> -->
    <div class="form-box">
      <el-form ref="form" :model="form" label-width="80px" class="forms">
        <el-form-item label="姓名" label-width="100px">
          <el-input v-model="form.i1"></el-input>
        </el-form-item>
        <el-form-item label="性别" label-width="100px">
          <el-select v-model="form.i2" placeholder="请选择" class="width100">
            <el-option label="男" value="shanghai"></el-option>
            <el-option label="女" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机号" label-width="100px">
          <el-input v-model="form.i3"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" label-width="100px">
          <el-input v-model="form.i4"></el-input>
        </el-form-item>
        <el-form-item label="发票抬头" label-width="100px">
          <el-input v-model="form.i5"></el-input>
        </el-form-item>
        <el-form-item label="纳税人识别号" label-width="100px">
          <el-input v-model="form.i6"></el-input>
        </el-form-item>
        <el-form-item label="职务" label-width="100px">
          <el-input v-model="form.i7"></el-input>
        </el-form-item>
        <el-form-item label="单/合住" label-width="100px">
          <el-select v-model="form.i8" placeholder="请选择" class="width100">
            <el-option label="单住" value="shanghai"></el-option>
            <el-option label="合住" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="付款方式" label-width="100px">
          <el-select v-model="form.i9" placeholder="请选择" class="width100">
            <el-option label="微信" value="shanghai"></el-option>
            <el-option label="支付宝" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="身份证号" label-width="100px">
          <el-input v-model="form.i10"></el-input>
        </el-form-item>
        <el-form-item label="地址" label-width="100px">
          <el-input type="textarea" v-model="form.i11"></el-input>
        </el-form-item>
        <el-form-item label="培训需求" label-width="100px">
          <el-input type="textarea" v-model="form.i12"></el-input>
        </el-form-item>
        <!-- <el-form-item label-width="100px">
          <el-upload
            class="upload-demo"
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item> -->
        <el-form-item label-width="100px">
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button @click="back">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import breadcrumb from '@/components/breadcrumb'
export default {
  components: {
    breadcrumb
  },
  data() {
    return {
      crumbData: [
        {
          path: '/',
          name: '首页'
        },
        {
          name: '师资培训'
        }
      ],
      form: {
        i1: '',
        i2: '',
        i3: '',
        i4: '',
        i5: '',
        i6: '',
        i7: '',
        i8: '',
        i9: '',
        i10: '',
        i11: '',
        i12: ''
      }
    }
  },
  methods: {
    onSubmit() {
      const isN = Object.values(this.form).find(item => {
        return item === '' ? false : true
      })
      console.log(Object.values(this.form))
      if (isN === undefined) {
        this.$message('请完善信息');
      } else {
        this.$message({
          message: '提交成功',
          type: 'success'
        })
        setTimeout(() => {
          this.back()
        }, 2000)
      }
    },
    back() {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="scss" scoped>
.content-max-width{
  width: 1112px;
  margin: 24px auto 0 auto;
}
.form-box{
  padding: 30px 0;
  width: 400px;
  margin: 0 auto;
  .width100{
    width: 100%;
  }
}
.reg-form-box{
  width: 380px;
  margin: 0 auto;
  padding: 24px 0;
}
::v-deep{
  .forms{
    i {
      font-size: 20px;
    }
    input{
      border-radius: 4px;
    }
  }
}
</style>
