<template>
    <div>
        <a-modal :visible="visible" @ok="handOK" :confirmLoading="confirmLoading" @cancel="visible=false" width="700px"
            :maskClosable="false" :destroyOnClose="true" :width="900">
            <div slot="title">
                {{type==='add'?'创建':'编辑'}}用户
            </div>
            <div class="modal-box">
                <a-form :form="form" @submit="handOK" layout="horizontal">
                    <a-form-item label="用户名：" :label-col="{ span: 3 }" :wrapper-col="{ span: 20 }">
                        <a-input placeholder="请输入" v-decorator="[
                         'userName',
                         {rules: [{ required: true, message: '此项为必填!' },
                         { pattern: /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/, message: '字母开头，允许5-16字符，允许字母数字下划线!' },],
                         initialValue:record.userName
                        }, 
                         ]" />
                    </a-form-item>
                    <a-form-item label="姓" :label-col="{ span: 3 }" :wrapper-col="{ span: 20 }">
                        <a-input placeholder="请输入" v-decorator="[
                         'surname',
                         {rules: [{ required: true, message: '此项为必填!' },
                         { pattern: /^[A-Za-z\u4E00-\u9FFF]+$/, message: '只能为中英文!' },
                         ],initialValue:record.surname}
                         ]" />
                    </a-form-item>
                    <a-form-item label="名：" :label-col="{ span: 3 }" :wrapper-col="{ span: 20 }">
                        <a-input placeholder="请输入" v-decorator="[
                         'name',
                         {rules: [{ required: true, message: '此项为必填!' },
                         { pattern: /^[A-Za-z\u4E00-\u9FFF]+$/, message: '只能为中英文!' },
                         ],initialValue:record.name}
                         ]" />
                    </a-form-item>
                    <a-form-item label="手机号码：" :label-col="{ span: 3 }" :wrapper-col="{ span: 20 }">
                        <a-input v-decorator="[
                             'phoneNumber',
                             {rules: [{ required: true, message: '此项为必填!' },
                             { pattern: /^1[3456789]\d{9}$/, message: '手机号码不正确!' },
                             ],
                             initialValue:record.phoneNumber}
                             ]" />
                    </a-form-item>
                    <a-form-item label="邮箱地址：" :label-col="{ span: 3 }" :wrapper-col="{ span: 20 }">
                        <a-input v-decorator="[
                             'emailAddress',
                             {rules: [
                             { pattern: /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/, message: '邮箱格式不正确!' },
                             ],
                             initialValue:record.emailAddress}
                             ]" />
                    </a-form-item>
                    <a-form-item label="是否启用：" :label-col="{ span: 3 }" :wrapper-col="{ span: 20 }">
                        <a-radio-group v-decorator="[
                        'isActive',
                        {initialValue:record.isActive||false}
                        ]">
                            <a-radio :value="true">是</a-radio>
                            <a-radio :value="false">否</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    <a-form-item v-if="type==='add'" label="密码：" :label-col="{ span: 3 }" :wrapper-col="{ span: 20 }">
                        <a-input-password v-decorator="[
                             'password',
                             {rules: [{ required: true, message: '此项为必填!' },
                             { pattern: /^(?=^.{8,}$)(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s)[0-9a-zA-Z!@#$%^&*()]*$/, message: '密码须包含大小写和数字!' },
                             ],}
                             ]" />
                    </a-form-item>
                </a-form>
            </div>
        </a-modal>
    </div>
</template>
<script>
    import Editor from '@/components/Editor.vue'
    import { UserCreate, UserUpdate } from '@/api/api'
    export default {
        components: {
            Editor
        },
        data() {
            return {
                confirmLoading: false,
                visible: false,
                form: this.$form.createForm(this),
                type: '',
                record: {},
                detail: '',
            };
        },
        mounted() {

        },
        methods: {
            showModal(type, record) {
                console.log(type, 'type')
                console.log(record, 'record')
                this.visible = true;
                this.type = type;
                this.record = record;
            },
            //表单确认
            handOK(e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (!err) {
                        console.log(values)
                        if (this.type == 'add') {
                            this.confirmLoading = true;
                            UserCreate(values).then(res => {
                                this.$message.success('创建成功！');
                                this.$parent._UserGetAll();
                                this.confirmLoading = false;
                                this.visible = false;
                            }).catch(err => {
                                this.confirmLoading = false;
                            })
                        }
                        if (this.type == 'edit') {
                            console.log('修改了')
                            this.confirmLoading = true;
                            let params = {
                                id: this.record.id,
                                ...values
                            }
                            UserUpdate(params).then(res => {
                                this.$message.success('更新成功！');
                                this.$parent._UserGetAll();
                                this.confirmLoading = false;
                                this.visible = false;
                            }).catch(err => {
                                this.confirmLoading = false;
                            })
                        }
                    }
                })
            },
            classChange(value) {
                console.log(value, 'value');
            },
            //select框筛选
            filterOption(input, option) {
                return (
                    option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
                );
            },
        }
    };
</script>
<style scoped>
    .file-row {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
    }
</style>