
<template>
  <div class="layout-no-flex">
    <el-toolbar>
      <el-button @click="goBack" type="primary" size="medium" round class="shadow-primary"><i class="fa fa-chevron-left"></i> 返回上页</el-button>
    </el-toolbar>
    <div>
      <div class="create-blank-with-name">
        <el-form :model="customForm" ref="customForm" label-width="100px" class="customform-create">
          <el-form-item label="表单名称" prop="name" :rules="[{ required: true, message: '表单名称不能为空'},{ min: 3, max: 25, message: '表单名称长度需控制在 3 到 25 个字符'}]" class="customform-item__name">
            <el-input size="large" v-model="customForm.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item class="tac customform-item__submit">
            <el-button type="primary" @click="createCustomForm" :loading="submitLoading">立即创建</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="create-with-other">
        <i>或选择以下方式快速创建</i>
      </div>
      <el-row :gutter="40">

        <el-col :span="8">
          <el-card class="box-card-item" shadow="hover">
            <router-link tag="a" to="/formDesigner/addform">
              <img src="@static/assets/images/customform/addguide-02.png" alt="选择模板创建">
              <span>选择模板创建</span>
            </router-link>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card-item" shadow="hover">
            <a href="javascript:void(0);">
              <img src="@static/assets/images/customform/addguide-01.png" alt="从空白创建">
              <span>根据文本创建</span>
            </a>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card-item" shadow="hover">
            <a href="javascript:void(0);">
              <img src="@static/assets/images/customform/addguide-03.png" alt="导入Excel">
              <span>导入Excel创建</span>
            </a>
          </el-card>
        </el-col>
      </el-row>

    </div>
  </div>
</template>
<script>
import util from '@src/common/util.js'
export default {
  data() {
    return {
      customForm: {
        name: ''
      },
      submitLoading: false
    }
  },
  methods: {
    goBack() {
      this.$router.back()
    },
    // 新建空白自定义表单
    async createCustomForm() {
      this.submitLoading = true
      try {
        await util.validateForm(this.$refs['customForm'])
        let res = await axios.post('/ui/customforms', {
          name: this.customForm.name
        })
        if (res.data.status === 1) {
          util.showSuccess('新建成功，即将为您跳转到表单编辑界面')
          setTimeout(() => {
            this.$router.replace(`/formDesigner/editform/${res.data.data.ID}`)
            this.submitLoading = false
          }, 2000)
        } else {
          util.showResponseMessage(res.data)
          this.submitLoading = false
        }
      } catch (e) {
        util.showErrorMessageBox(e)
        this.submitLoading = false
      }
    }
  }
}
</script>
<style scoped>
.create-blank-with-name {
  padding: 55px 150px 40px;
}
.box-card-item {
  text-align: center;
  padding: 30px 20px;
  transition: all 0.3s;
}
.box-card-item:hover {
  transform: scale(1.06);
}
.box-card-item a:hover {
  text-decoration: none;
}
.box-card-item img {
  max-width: 80%;
  display: block;
  margin: 0 auto 15px;
}
.box-card-item span {
  font-size: 22px;
}
.create-with-other {
  font-size: 18px;
  border-top: 1px solid #ddd;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 30px;
}
.create-with-other i {
  top: -14px;
  color: #888;
  position: relative;
  font-style: normal;
  padding: 0 10px;
  background-color: #f6f7f9;
}
</style>
<style>
.customform-item__name label {
  font-size: 20px;
  font-weight: bold !important;
  color: #28b06e;
}
.customform-item__name .el-input__inner {
  height: 48px;
}
.customform-item__submit {
  margin-top: 30px;
}
.customform-item__submit .el-button {
  font-size: 24px;
  padding: 10px 40px;
}
</style>
