<template>
  <div>
    <el-form
      inline
      :model="form"
      :rules="rules"
      ref="form"
      class="form-wrap dialog-info-full"
      label-width="150px">

      <el-form-item
        verify
        class="is-required"
        label="项目名"
        prop="projectName">
        <el-input v-model="form.projectName"></el-input>
      </el-form-item>
      <el-form-item
        verify
        class="is-required"
        label="项目的中文名称"
        prop="projectNickName">
        <el-input v-model="form.projectNickName"></el-input>
      </el-form-item>
      <el-form-item
        label="项目描述"
        prop="projectDesc">
        <el-input v-model="form.projectDesc"></el-input>
      </el-form-item>
      <el-form-item
        label="线下系统的地址"
        prop="offlineUrl">
        <el-input v-model="form.offlineUrl"></el-input>
      </el-form-item>
    </el-form>

    <div class="dialog-btn-wrap">
      <el-button @click="reset">重置</el-button>
      <el-button
        @click="submit"
        type="primary">保存</el-button>
    </div>
  </div>

</template>

<script>
import { addProject } from '@/api/platform'

export default {
  data () {
    return {
      visible: false,
      roleList: [],
      form: {
        projectName: '',
        projectNickName: '',
        projectDesc: '',
        offlineUrl: ''
      },
      rules: {}
    }
  },
  methods: {
    handleClose () {
      this.$parent.handleClose()
    },
    reset () {
      this.$refs.form.resetFields()
    },
    submit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.addAccount()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    addAccount () {
      addProject(this.form).then(res => {
        this.$message.success('添加成功')
        this.reset()
        this.handleClose()
        this.$emit('updateList')
      })
    }
  },
  watch: {
    visible (val) {
      // 获取角色列表
      // 重置表单
      this.reset()
    }
  }
}
</script>
<style scoped>
.btn-wrap{
  padding-right: 20px;
}
</style>
