<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head th:replace="components/vue/vue-list :: head('新增', 'commit')"></head>
<body>
<div id="app" style="padding-top: 10px">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <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}">
                <template>
                    <el-form-item th:label="#{codeGen.allowedRoles}">
                        <el-select v-model="ruleForm.allowedRoles" multiple th:placeholder="#{pleaseChoose}">
                            <el-option
                                    v-for="item in roleTypeList"
                                    :key="item.typeCode"
                                    :label="item.typeName"
                                    :value="item.typeCode">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item th:label="#{codeGen.parentMenu}">
                        <el-select v-model="ruleForm.pid" th:placeholder="#{pleaseChoose}">
                            <el-option
                                    v-for="item in parentMenus"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item th:label="#{codeGen.icon}">
                        <el-select v-model="ruleForm.icon" filterable th:placeholder="#{pleaseChoose}">
                            <el-option
                                    v-for="item in icons"
                                    :key="item.iconClass"
                                    :label="item.label"
                                    :value="item.iconClass">
                                <span style="float: left"><i v-bind:class="item.iconClass" style="font-size: 1.2em"></i></span>
                                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.label }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-alert
                            th:title="#{codeGen.recommendModuleDir}"
                            type="info"
                            th:close-text="#{iKnow}">
                    </el-alert>
                    <el-form-item th:label="#{codeGen.moduleDir}" prop="moduleDir">
                        <el-select v-model="ruleForm.moduleDir" th:placeholder="#{pleaseChoose}">
                            <el-option label="common" value="/common"></el-option>
                            <el-option label="web" value="/web"></el-option>
                            <el-option label="api" value="/api"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item th:label="#{codeGen.genModules}" prop="genModules">
                        <el-checkbox-group v-model="ruleForm.genModules">
                            <el-checkbox label="modelAndMapper"></el-checkbox>
                            <el-checkbox label="repository"></el-checkbox>
                            <el-checkbox label="service"></el-checkbox>
                            <el-checkbox label="controller"></el-checkbox>
                            <el-checkbox label="controllerAndPage"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item th:label="#{codeGen.basePackage}" prop="basePackage">
                        <el-input v-model="ruleForm.basePackage" th:placeholder="#{pleaseInput} + #{codeGen.basePackage}"></el-input>
                    </el-form-item>
                    <el-form-item th:label="#{codeGen.location}" prop="mainOrTest">
                        <el-select v-model="ruleForm.mainOrTest" th:placeholder="#{pleaseChoose}">
                            <el-option label="/src/test" value="test"></el-option>
                            <el-option label="/src/main" value="main"></el-option>
                            <el-option label="/src/codeGenerate" value="codeGenerate"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item th:label="#{codeGen.tableName}" prop="tableName" :disabled="true">
                        <el-input v-model="ruleForm.tableName" th:placeholder="#{pleaseInput} + #{codeGen.tableName}"></el-input>
                    </el-form-item>
                    <el-form-item th:label="#{codeGen.entityName}" prop="entityName">
                        <el-input v-model="ruleForm.entityName" th:placeholder="#{pleaseInput} + #{codeGen.entityName}"></el-input>
                    </el-form-item>
                    <el-form-item th:label="#{codeGen.tableComment}" prop="tableComment">
                        <el-input v-model="ruleForm.tableComment" th:placeholder="#{pleaseInput} + #{codeGen.tableComment}"></el-input>
                    </el-form-item>
                    <el-form-item th:label="#{codeGen.idType}" prop="idType">
                        <el-select v-model="ruleForm.idType" th:placeholder="#{pleaseChoose}">
                            <el-option label="Long" value="Long"></el-option>
                            <el-option label="Integer" value="Integer"></el-option>
                            <el-option label="String" value="String"></el-option>
                        </el-select>
                    </el-form-item>
                </template>
            </el-col>
        </el-row>
        <el-row>
            <el-col :xs="{span: 24, offset: 0}" :sm="{span: 24, offset: 0}" :md="{span: 24, offset: 0}"
                    :lg="{span: 24, offset: 0}" :xl="{span: 20, offset: 2}">
                <el-form-item th:label="#{codeGen.columns}" props="columns">
                    <elx-editable ref="editable" :data.sync="ruleForm.columns" border>
                        <elx-editable-column align="center" type="index" width="50"></elx-editable-column>
                        <elx-editable-column align="center" prop="name" th:label="#{codeGen.columns.name}" width="180"></elx-editable-column>
                        <elx-editable-column align="center" prop="type" th:label="#{codeGen.columns.type}" width="100"></elx-editable-column>
                        <elx-editable-column align="center" prop="comment" th:label="#{codeGen.columns.comment}" width="180"></elx-editable-column>
                        <elx-editable-column align="center" prop="uiType" th:label="#{codeGen.columns.uiType}" width="180" :edit-render="{name : 'ElSelect', options: elementComponents}"></elx-editable-column>
                        <elx-editable-column align="center" prop="extraInfo" th:label="#{codeGen.columns.extraInfo}" width="160" :show-overflow-tooltip="true" :edit-render="{name: 'ElSelect', options: typeGroups}"></elx-editable-column>
                        <elx-editable-column align="center" prop="allowSearch" th:label="#{codeGen.columns.allowSearch}" width="160" :edit-render="{name: 'ElSwitch', type: 'visible'}"></elx-editable-column>
                        <elx-editable-column align="center" prop="hidden" th:label="#{codeGen.columns.hidden}" width="100" :edit-render="{name: 'ElSwitch', type: 'visible'}"></elx-editable-column>
                        <elx-editable-column align="center" prop="allowInput" th:label="#{codeGen.columns.allowInput}" width="160" :edit-render="{name: 'ElSwitch', type: 'visible'}">
                    </elx-editable>
                </el-form-item>
            </el-col>
        </el-row>
        <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-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-col>
        </el-row>
    </el-form>

</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 = {
        url: "/api/tables/genCode"
    };

    var app = new Vue({
        el: '#app',
        data: {
            elementComponents: [],
            typeGroups: [[${typeGroups}]],
            tableLoading: false,
            roleTypeList: [[${roleTypeList}]],
            parentMenus: [[${parentMenus}]],
            icons: [[${icons}]],
            ruleForm: {
                mainOrTest: "test",
                basePackage: "com.simon",
                allowedRoles: [],
                pid: "",
                icon: "",
                moduleDir: "/common",
                tableName: [[${tableName}]],
                entityName: [[${entityName}]],
                tableComment: [[${tableComment}]],
                idType: [[${idType}]],
                genModules: ["modelAndMapper", "repository", "service"],
                /*genModules: ["controllerAndPage"],*/
                columns: [[${tableEntity.columns}]]
            },
            rules: {
                basePackage: [
                    {required: true, message: '基础包名不能为空', trigger: 'blur'}
                ],
                tableName: [
                    {required: true, message: '表名不能为空', trigger: 'blur'}
                ],
                entityName: [
                    {required: true, message: '实体名不能为空', trigger: 'blur'}
                ],
                tableComment: [
                    {required: true, message: '表标注不能为空', trigger: 'blur'}
                ]
            }
        },
        mounted: function () {
            this.initElementComponents();

        },
        methods: {
            changeGenModules(moduleDir) {
                if ('/common' === moduleDir) {
                    this.ruleForm.genModules = ["modelAndMapper", "repository", "service"];
                } else if ('/api' === moduleDir) {
                    this.ruleForm.genModules = ["controller"];
                } else if ('/web' === moduleDir) {
                    this.ruleForm.genModules = ["controllerAndPage"];
                }
            },
            initElementComponents(){
                let list = [[${elementComponents}]];
                for(let i = 0; i < list.length; i++){
                    this.elementComponents.push({
                       'label' : list[i].typeName,
                        'value': list[i].typeCode
                    });
                }
            },
            sendMessage(event) {
                console.log("sendMessage");
                closeLayer();
            },
            submitForm(formName) {
                parent.openLoading();
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        // 遍历ruleForm.columns，如果是uiType是Select选择器，extraInfo必须有值。
                        if (this.ruleForm.genModules.join(",").indexOf("controllerAndPage") >= 0) {
                            for(let i = 0, len = this.ruleForm.columns.length; i < len; i++) {
                                if (this.ruleForm.columns[i].uiType === 'Select' && !this.ruleForm.columns[i].extraInfo) {
                                    parent.closeLoading();
                                    this.$message.error(this.ruleForm.columns[i].name + "属性UI是选择器，但未设置选择器数据");
                                    return false;
                                }
                            }
                        }
                        this.$http.post(requestUrls.url, this.ruleForm).then((response) => {
                            parent.closeLoading();
                            parent.showSuccess([[#{codeGen.success}]]);
                            /*this.$message({
                                message: [[#{codeGen.success}]],
                                type: 'success'
                            });*/
                            closeLayer();
                        }).catch((error) => {
                            parent.closeLoading();
                            let errorMessage = [[#{codeGen.failed}]];
                            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;
            }
        },//method
        watch: {
            'ruleForm.moduleDir':function(moduleDir) {
                if ('/common' === moduleDir) {
                    this.ruleForm.genModules = ["modelAndMapper", "repository", "service"];
                } else if ('/api' === moduleDir) {
                    this.ruleForm.genModules = ["controller"];
                } else if ('/web' === moduleDir) {
                    this.ruleForm.genModules = ["controllerAndPage"];
                }
            }
        }
    });
    /*]]>*/
</script>
</html>