<template>
    <el-dialog :title='isEdit?"编辑用户":"添加用户"' :visible.sync='dialogVisible' width='500px'>
        <div class='edit-box'>
            <el-form ref='form' :model='form' :rules='rules' label-width='80px'>
              <el-form-item label='姓名' prop='userName'>
                <el-input v-model.trim='form.userName'></el-input>
              </el-form-item>
              <el-form-item label='联系电话' prop='phone'>
                <el-input v-model.trim='form.phone'></el-input>
              </el-form-item>
              <el-form-item label='备注'>
                <el-input v-model.trim='form.note'></el-input>
              </el-form-item>
            </el-form>
        </div>
        <span slot='footer' class='dialog-footer'>
            <el-button @click='dialogVisible = false'>取 消</el-button>
            <el-button type='primary' @click='save'>保 存</el-button>
        </span>
    </el-dialog>
</template>

<script>
import {addUser, loadUser} from '@/api/scan/request'
import {mapGetters} from 'vuex'

export default {
  data() {
    var validatePhone = (rule, value, callback) => {
      let reg = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/
      if (reg.test(value)) {
        callback()
      } else {
        callback(new Error('手机格式不正确'))
      }
    }
    return {
        dialogVisible: false,
        isEdit: false,
        form: {
          UserName: '',
          Phone: '',
          Note: ''
        },
        rules: {
          userName: [{required: true, message: '请输入姓名', trigger: 'blur'}],
          phone: [
            {required: true, message: '请输入联系电话', trigger: 'blur'},
            {validator: validatePhone, trigger: 'blur'}
          ]
        }
      }
    },
    computed: {
        ...mapGetters('layout', ['projectId', 'userId'])
    },
    methods: {
        show(row) {
            this.restForm()
            this.dialogVisible = true
            this.isEdit = false
            if (row) {
                this.isEdit = true
                this.form = {
                  note: row.note,
                  phone: row.phone,
                  userName: row.userName,
                  userId: row.userId,
                  projId: row.projId
                }
            }
        },
        save() {
            this.$refs['form'].validate(valid => {
                if (valid) {
                    if (this.isEdit) {
                      this.addSave('edit')
                    } else {
                      this.addSave('add')
                    }
                } else {
                  console.log('error submit!!')
                  return false
                }
            })
        },
      addSave(val) {
        let param = {
          projId: this.projectId,
          userId: this.form.userId || this.userId,
          phone: this.form.phone,
          userName: this.form.userName,
          note: this.form.note || undefined
        }
        let Content = {content: [param]}
        if (val == 'add') {
          addUser(Content, res => {
            this.$message.success('保存成功')
            this.$emit('refresh')

          })
        } else {
          loadUser(Content, res => {
            this.$message.success('修改成功')
            this.$emit('refresh')

          })
        }
        this.dialogVisible = false
      },
      restForm() {
        this.form = {
          UserName: '',
          Phone: '',
          Note: ''
        }
      }
    }
}
</script>

<style scoped lang='less'>
.input-length {
    width: 300px;
}
.edit-box {
    height: 300px;
    width: 380px;
    margin: 0 auto;
}
</style>
