<template>
  <div class="login-container">
    <!--<div class="logo">
      <img src="@/assets/login_images/logo.png" />
    </div>-->
    <div class="input-wrap">
      <div class="input_list">
        <img src="@/assets/login_images/el_login.png" class="login_img" />
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="60px"
          label-position="left"
        >
          <el-form-item :label="$t('staff.xm')">
            <el-input
              v-model="form.name"
              size="small"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input
              v-model="form.phone"
              size="small"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="公司">
            <el-input
              v-model="form.company"
              size="small"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="职务">
            <el-input
              v-model="form.position"
              size="small"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('staff.yx')">
            <el-input
              v-model="form.email"
              size="small"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-button
            type="primary"
            size="small"
            style="width: 100%"
            @click="save"
          >
            提交
          </el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { doAdd } from '@/api/intention';
export default {
  name: 'TrialAdd',
  data() {
    return {
      dialogFormVisible: false,
      form: {
        name: '',
        phone: '',
        company: '',
        position: '',
        email: '',
      },
      rules: {
        name: [{ required: true, trigger: 'blur', message: '请输入姓名' }],
        phone: [{ required: true, trigger: 'blur', message: '请输入手机号' }],
      },
    };
  },
  methods: {
    TrialAdd() {
      this.dialogFormVisible = true;
    },
    save() {
      this.$refs['form'].validate(async valid => {
        if (valid) {
          const { msg } = await doAdd(this.form);
          this.$notify({
            title: msg,
            type: 'success',
          });
          this.$refs['form'].resetFields();
          this.dialogFormVisible = false;
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.login-container {
  height: 100vh;
  background: url('~@/assets/login_images/background.png') center center fixed
    no-repeat;
  background-size: 100% 100%;
  position: relative;
  .input-wrap {
    position: absolute;
    top: 150px;
    left: 0;
    right: 0;
    width: 100%;
    .input_list {
      width: 500px;
      padding: 20px;
      margin: auto;
      background-image: linear-gradient(to bottom, #71a8f9, #3978f7);
      border-radius: 10px;
      .login_img {
        display: block;
        width: 400px;
        margin: -80px auto;
      }
      .el-form {
        background-color: white;
        padding: 40px;
        margin-top: 80px;
        .el-form-item {
          margin-bottom: 10px !important;
          .el-button {
            width: 100px;
          }
        }
      }
    }
  }
}
</style>
