<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="components/vue/vue-list :: head('新增', 'commit')"></head>
<body>
<div id="app" style="padding-top: 10px">
    <el-row>
        <el-col :xs="{span: 24, offset: 0}" :sm="{span: 12, offset: 6}" :md="{span: 8, offset: 8}"
                :lg="{span: 8, offset: 8}" :xl="{span: 8, offset: 8}">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item th:label="#{oauthUser.username}" prop="username">
                    <el-input v-model.trim="ruleForm.username" th:placeholder="#{pleaseInput} + #{oauthUser.username}"></el-input>
                </el-form-item>
                <el-form-item th:label="#{password}" prop="password">
                    <el-input v-model="ruleForm.password" th:placeholder="#{pleaseInput} + #{password}" show-password></el-input>
                </el-form-item>
                <el-form-item th:label="#{oauthUser.enabled}">
                    <el-select v-model="ruleForm.enabled" th:placeholder="#{pleaseChoose}">
                        <el-option
                                v-for="item in enabledStatusList"
                                :key="item.typeCode"
                                :label="item.typeName"
                                :value="item.typeCode">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item th:label="#{oauthUser.areaCode}">
                    <el-select v-model="ruleForm.areaCode" th:placeholder="#{pleaseInput} + #{oauthUser.areaCode}">
                        <el-option label="+86" value="+86"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item th:label="#{oauthUser.phone}" prop="phone">
                    <el-input v-model.trim="ruleForm.phone" th:placeholder="#{pleaseInput} + #{oauthUser.phone}" type="tel"></el-input>
                </el-form-item>
                <el-form-item th:label="#{oauthUser.email}" prop="email">
                    <el-input v-model.trim="ruleForm.email" th:placeholder="#{pleaseInput} + #{oauthUser.email}" type="email"></el-input>
                </el-form-item>
                <el-form-item th:label="#{oauthUser.address}" prop="address">
                    <el-input v-model.trim="ruleForm.address" th:placeholder="#{pleaseInput} + #{oauthUser.address}"></el-input>
                </el-form-item>
                <el-form-item th:label="#{oauthUser.sex}">
                    <el-select size="small" v-model="ruleForm.sex" th:placeholder="#{pleaseChoose} + #{oauthUser.sex}">
                        <el-option
                                v-for="item in sexTypeList"
                                :key="item.typeCode"
                                :label="item.typeName"
                                :value="item.typeCode">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item th:label="#{oauthUser.age}" prop="age">
                    <el-input v-model.number="ruleForm.age" th:placeholder="#{pleaseInput} + #{oauthUser.age}"></el-input>
                </el-form-item>
                <el-form-item th:label="#{oauthUser.birth}" prop="birth">
                    <el-date-picker
                            v-model="ruleForm.birth"
                            type="date"
                            th:placeholder="#{pleaseChoose}">
                    </el-date-picker>
                </el-form-item>
                <el-form-item th:label="#{oauthUser.headPhoto}" prop="headPhoto">
                    <el-upload
                            class="avatar-uploader"
                            action="/fileUploads/upload"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="ruleForm.headPhoto" :src="ruleForm.headPhoto" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item th:label="#{oauthUser.personBrief}" prop="personBrief">
                    <el-input
                            type="textarea"
                            :autosize="{ minRows: 2, maxRows: 4}"
                            th:placeholder="#{pleaseInput} + #{oauthUser.personBrief}"
                            v-model.trim="ruleForm.personBrief">
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')"><span th:text="#{submit}"></span></el-button>
                    <el-button @click="closeWindow"><span th:text="#{close}"></span></el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
</div>
</body>
<script th:src="@{/js/vue/common.js}"></script>
<script th:src="@{/js/vue/validateRule.js}"></script>
<script th:inline="javascript">
    /*<![CDATA[*/
    //Vue.http.options.emulateJSON = true;
    //Vue.http.options.emulateHTTP = true;
    var headerName = [[${_csrf.headerName}]];
    axios.defaults.headers.common[headerName] = [[${_csrf.token}]];

    //国际化
    international([[${session.locale}]]);

    var requestUrls = {
        add: "/api/oauthUsers/add"
    };

    /*ELEMENT.locale(ELEMENT.lang.en);*/

    var app = new Vue({
        el: '#app',
        data: {
            sexTypeList: [[${sexTypeList}]],
            enabledStatusList: [[${enabledStatusList}]],
            ruleForm: {
                username: '',
                password: '',
                enabled: 'true',
                areaCode: '+86',
                phone: '',
                email: '',
                address: '',
                sex: 'true',
                age: '',
                birth: '',
                headPhoto: '',
                personBrief: ''
            },
            rules: {
                username: [
                    {required: true, message: '请输入用户名', trigger: 'blur'},
                    {validator: checkSpecialChar, trigger: 'blur'},
                    {min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur'}
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'},
                    {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur'}
                ],
                phone: [
                    {required: true, message: '请输入手机号', trigger: 'blur'},
                    {validator: checkPhone, trigger: 'blur'}
                ],
                email: [
                    {required: false, validator: checkEmail, trigger: 'blur'}
                ],
                age: [
                    {required: false, validator: checkAge, trigger: 'blur'}
                ],
                personBrief: [
                    {required: false, message: '请输入简介', trigger: 'blur'},
                    {min: 3, message: '长度超过 3 个字符', trigger: 'blur'}
                ],
            }
        },
        mounted: function () {

        },
        methods: {
            sendMessage(event) {
                console.log("sendMessage");
                closeLayer();
            },
            submitForm(formName) {
                parent.openLoading();
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$http.post(requestUrls.add, this.ruleForm).then((response) => {
                            parent.closeLoading();
                            parent.showSuccess([[#{insertSuccess}]]);
                            parent.updateListData();
                            closeLayer();
                        }).catch((error) => {
                            parent.closeLoading();
                            let errorMessage = [[#{insertFailed}]];
                            if (error.response) {
                                errorMessage = error.response.data.message;
                            }
                            this.$message.error(errorMessage);
                        });
                    } else {
                        parent.closeLoading();
                        setTimeout(()=>{
                            let isError= document.getElementsByClassName("is-error");
                            isError[0].querySelector('input').focus();
                        },100);
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            closeWindow(event) {
                closeLayer();
            },
            handleAvatarSuccess(res, file) {
                //this.ruleForm.headPhoto = URL.createObjectURL(file.raw);
                console.log(eval(res));
                res = eval(res);
                this.ruleForm.headPhoto = res.data[0];
            },
            beforeAvatarUpload(file) {
                console.log(file.type);
                const isJPG = file.type === 'image/jpeg';
                const isPNG = file.type === 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG && !isPNG) {
                    this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        }
    });
    /*]]>*/
</script>
</html>