<template>
    <div class="addPerson">
        <p class="dialog-header">
            <span>新增人员</span>
        </p>
        <div class="content">
            <el-form :model="form" :rules="rules" ref="form" label-width="90px">
                <p class="rowForm">
                    <el-form-item label="名称:" class="inline" prop="name">
                        <el-input v-model="form.name" placeholder="请输入名称"></el-input>
                    </el-form-item>
                    <el-form-item label="性别:" class="inline" prop="sex">
                        <el-radio-group v-model="form.sex">
                            <el-radio label="男"></el-radio>
                            <el-radio label="女"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                </p>
                <p class="rowForm">
                    <el-form-item label="账户:" class="inline" prop="userName">
                        <el-input v-model="form.userName" placeholder="请输入账户名称"></el-input>
                    </el-form-item>
                    <el-form-item label="电话:" class="inline" prop="phone">
                        <el-input v-model="form.phone" placeholder="请输入电话"></el-input>
                    </el-form-item>
                </p>
                <p class="rowForm">
                    <el-form-item label="角色:" class="inline" prop="role">
                        <el-select v-model="form.role" placeholder="请选择角色">
                            <el-option v-for="item of roleList" :label="item.name" :value="item.id" :key="item.name"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="单位:" class="inline" prop="unit">
                        <el-select v-model="form.unit" placeholder="请选择单位">
                            <el-option v-for="item of unitList" :label="item.name" :value="item.id" :key="item.name"></el-option>
                        </el-select>
                    </el-form-item>
                </p>
                <p>
                    <el-form-item label="照片:" class="inline">
                        <el-upload
                            action="https://jsonplaceholder.typicode.com/posts/"
                            list-type="picture-card"
                            :limit="1"
                            :http-request="uploadFile"
                            :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                        </el-upload>
                    </el-form-item>
                </p>
                <p class="line"></p>
                <p class="buttonClick">
                    <span class="buttonCancl" @click="resetForm('form')">取消</span>
                    <span class="buttonSave" @click="submitForm('form')">保存</span>
                </p>
            </el-form>
        </div>

    </div>
</template>

<script>
export default {
    props: ['roleList', 'unitList'],
    data () {
        return {
            form: {
                name: '',
                sex: '男',
                userName: '',
                phone: '',
                role: '',
                unit: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入名称', trigger: 'blur' }
                ],
                userName: [
                    { required: true, message: '请输入账户', trigger: 'blur' }
                ]
            },
            dialogImageUrl: ''
        }
    },
    created() {
    },
    mounted(){
    },
    methods: {
        // 表单提交
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log(this.form);
                    let val = {
                        'name': this.form.name,
                        'number': this.form.phone,
                        'roleId': this.form.role,
                        'unitId': this.form.unit,
                        'userName': this.form.userName,
                        'sex': this.form.sex
                    }
                    this.$server.postUserAdd(val).then((res) => { // 数据请求
                        if (res.data.code === 200) {
                            this.$message.success('新增人员成功！');
                            this.resetForm('form')
                        }
                    })
                } else {
                    return false;
                }
            });
        },
        // 取消
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.$emit('on-cancel')
        },
        uploadFile(file) {
            console.log(file)
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        }
    },
    components: {
    },
    watch: {
    }
}
</script>
<style scoped>
    .addPerson .content{
        padding: 50px 80px 0 80px;
    }
    .addPerson>>>.el-input__inner{
        border: 1px solid rgba(8,104,157,.3);
        border-radius: 2px;
        font-size: 18px;
        color: #999;
        height: 34px;
        line-height: 34px;
        width: 180px;
    }
    .addPerson .line{
        margin: 0px 30px 0 30px;
        height: 1px;
        background: rgba(72,119,230,0.2);
    }
    .addPerson .buttonClick{
        display: flex;
        justify-content: space-evenly;
        margin-top: 20px;
    }
    .addPerson .inline{
        display: inline-block;
    }
    .addPerson>>>.el-form-item__label{
        font-size: 18px;
        color: #666;
    }
    .addPerson>>>.el-radio__label{
        font-size: 18px;
        color: #999;
    }
    .addPerson>>>.el-upload-list--picture-card .el-upload-list__item, .addPerson>>>.el-upload--picture-card{
        height: 90px;
        width: 70px;
        line-height: 90px;
    }
    .addPerson>>>.el-form-item{
        margin-bottom: 15px;
    }

</style>
