<!--
  @description: 招标人代表信息库-创建用户名
  @Modifier: haofengxian
  @routerPath:
  @date: 2020-5-8-11:21
-->
<template>
  <div>
    <div class="title p0-16 clearfix">
      <div class="title-back pointer" @click="back">
        <i class="iconfont icon-fanhui mr10" />创建用户名
      </div>
    </div>
    <div class="p0-16">
      <el-form
        ref="form"
        :rules="rules"
        :model="formData"
        :inline-message="true"
      >
        <table class="from_table">
          <tr>
            <td>
              <el-form-item label="用户名" prop="userName" />
            </td>
            <td>
              <el-input v-model.trim="formData.userName" type="text" placeholder="请输入用户名" />
            </td>
            <td>
              <el-form-item label="密码" />
            </td>
            <td><span style="color: red">默认为123456</span></td>
          </tr>
        </table>
      </el-form>
      <!--保存按钮-->
      <div class="but_footer">
        <div class="but_footer-h">
          <div class="but_footer-but">
            <el-button :loading="confirmLoading" type="primary" @click="save('form')">
              提 交
            </el-button>
            <el-button @click="back">
              返 回
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/* 公用方法*/
import { characters1_50 } from '@/assets/js/validate'// 校验输入内容
/* api*/
import { createAccountToRepresent } from '@api/common/user'
export default {
  name: 'SubmitCreateUserName',
  data() {
    return {
      confirmLoading: false, // 暂存Loding
      fileList: [], // 附件列表
      formData: {
        id: this.$route.params.id,
        userName: '' // 用户名
      },
      rules: {
        userName: [{ required: true, validator: characters1_50, trigger: 'blur' }] // 用户名
      }
    }
  },
  methods: {
    // 保存
    save(formName) {
      this.$refs[formName].validate((valid, field) => {
        if (valid) { // 校验通过
          this.saveData()
        } else { // 校验不通过
          this.$confirm('确认提交吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            confirmButtonClass: 'confirmBtn',
            cancelButtonClass: 'cancelBtn',
            type: 'warning'
          }).then(() => {
          }).catch(() => {
          })
        }
      })
    },
    // 调用接口保存
    saveData() {
      createAccountToRepresent(this.formData).then(res => {
        this.$message({
          message: '添加成功',
          type: 'success'
        })
        this.confirmLoading = false// btnLoding
        this.back()
      }).catch(() => {
        this.confirmLoading = false// btnLoding
      })
    },
    // 返回
    back() {
      this.$router.push({
        path: '/informationbase/representativeTendereeList'
      })
    }
  }
}
</script>

<style scoped>

</style>
