<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-input v-model="form.i9"></el-input>
        </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 v-model="form.i11"></el-input>
        </el-form-item>
        <el-form-item label="开户行、账号" label-width="100px">
          <el-input v-model="form.i12"></el-input>
        </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="填写模板" label-width="100px">
          <span style="color:#0053C6;cursor: pointer;">下载Excel模板</span>
          <el-upload
            style="margin-left:auto;"
            class="upload-demo"
            action="/api/microservices/admin_api/file/upload"
            :on-success="handleChange">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">请下载模板后，按照模板格式填写完整资料后，上传报名表。</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 action from '@action'
import breadcrumb from '@/components/breadcrumb'
export default {
  components: {
    breadcrumb
  },
  data() {
    return {
      file: '',
      fileList: [],
      crumbData: [
        {
          path: '/',
          name: '首页'
        },
        {
          name: '师资培训'
        }
      ],
      form: {
        i1: '',
        i2: '',
        i3: '',
        i4: '',
        i5: '',
        i6: '',
        i7: '',
        i8: '',
        i9: '',
        i10: '',
        i11: '',
        i12: ''
      },
      formName: {
        i1: '姓名',
        i2: '性别',
        i3: '名族',
        i4: '职务',
        i5: '手机号码',
        i6: '身份证号',
        i7: '邮箱',
        i8: '单/合住',
        i9: '抬头',
        i10: '税号',
        i11: '地址',
        i12: '开户行、账号'
      }
    }
  },
  methods: {
    onSubmit() {
      let flag = true
      Object.keys(this.form).map(item => {
        if (item === 'i11' || item === 'i12') {
        } else {
          if (this.form[item] === '') {
            flag = false
          }
        }
      })
      if (!flag) {
        this.$message('请完善信息');
      } else {
        const param = {}
        param.tag = 2
        param.url = this.file
        const formData = {}
        Object.keys(this.form).map(name => {
          formData[this.formName[name]] = this.form[name]
        })
        param.table_content = JSON.stringify(formData)
        action.articleAction.formCommit(param).then(res => {
          this.$message({
            message: '提交成功',
            type: 'success'
          })
        })
      }
    },
    handleChange(data) {
      this.file = data.data[0].full_path
    },
    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: 430px;
  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>
