<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 {
    loadUser, //修改
    addUser //添加
} from '@/api/scan/request'
import { mapGetters, mapActions } 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.editSave()
                    } else {
                        this.addSave()
                    }
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        addSave() {
            let param = {}
            param.ProjId = this.projectId
            param.UserId = this.userId
            param.User = this.form
            addUser(param).then(result => {
                if (result.data.Result == 'success') {
                    this.$message({
                        message: '保存成功',
                        type: 'success'
                    })
                    this.dialogVisible = false
                    this.$emit('refresh')
                }
            })
        },
        editSave() {
            let param = {
                ProjId: this.projectId,
                UserId: this.userId,
                UserList: [this.form]
            }
            loadUser(param).then(result => {
                if (result.data.Result == 'success') {
                    this.$message({
                        message: '保存成功',
                        type: 'success'
                    })
                    this.dialogVisible = false
                    this.$emit('refresh')
                }
            })
        },
        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>
