<template>
    <div v-loading="loading" element-loading-text="拼命加载中">
        <el-form :model="formData" :rules="rules" ref="form" label-width="80px" label-position="right" size="small">
            <el-form-item prop="readTable" label="读表">

                <el-switch :value="formData.readTable" on-text="读表" off-text="不读" @change="updateReadTable()">
                </el-switch>

            </el-form-item>
            <el-form-item prop="typeFlag" label="分类">
                <el-input v-model="formData.typeFlag" style="width: 215px;"></el-input>
            </el-form-item>
            <el-form-item prop="className" label="类名">
                <el-input v-model="formData.className" style="width: 215px;"></el-input>
            </el-form-item>

            <el-form-item prop="remark" label="描述">
                <el-input v-model="formData.remark" style="width: 215px;"></el-input>
            </el-form-item>

            <el-form-item prop="dataBaseType" label="库类型">
                <el-select placeholder="库类型" size="small" v-model="formData.dataBaseType" @change="changeDataBaseType" class="filter-item">
                    <el-option label="Mysql" value="Mysql">
                    </el-option>
                    <el-option label="SqlServer" value="SqlServer">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="dataSourceCode" label="数据库">

                <el-select placeholder="数据库" size="small" v-model="formData.dataSourceCode" @change="changeDataSourceCode" class="filter-item">
                    <el-option v-for="item in datasourceInfoList" :label="item.databaseName" :value="item.code" :key="item.code"></el-option>
                </el-select>

            </el-form-item>

            <el-form-item prop="tableName" label="表名" v-if="!formData.readTable">
                <el-input v-model="formData.tableName" style="width: 215px;"></el-input>
            </el-form-item>
            <el-form-item prop="tableName" label="表名" v-if="formData.readTable">

                <el-select placeholder="表名" size="small" clearable filterable v-model="formData.tableName" @change="changeTableName" class="filter-item">
                    <el-option v-for="item in tableList" :label="item" :value="item" :key="item"></el-option>
                </el-select>

            </el-form-item>

            <el-form-item prop="modules" label="功能">
                <el-select placeholder="modules" size="small" multiple v-model="formData.modules" class="filter-item">
                    <el-option label="搜索" value="search">
                    </el-option>
                    <el-option label="高级搜索" value="query">
                    </el-option>
                    <el-option label="排序" value="orders">
                    </el-option>
                    <el-option label="导出Excel" value="excel">
                    </el-option>
                    <el-option label="添加" value="add">
                    </el-option>
                    <el-option label="编辑" value="edit">
                    </el-option>
                    <el-option label="删除" value="del">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item prop="genCode" label="生成">
                <el-checkbox v-model="formData.genTable" label="表"></el-checkbox>
                <el-checkbox v-model="formData.genClass" label="类"></el-checkbox>
                <el-checkbox v-model="formData.genList" label="列表"></el-checkbox>
                <el-checkbox v-model="formData.genForm" label="表单"></el-checkbox>
                <el-checkbox v-model="formData.genRouter" label="路由"></el-checkbox>
            </el-form-item>
            <el-form-item prop="javaPath" label="根目录">
                <el-input v-model="formData.rootPath"></el-input>
            </el-form-item>
            <el-form-item prop="fields" label="数据">
                <el-tabs value="1" type="border-card">
                    <el-tab-pane label="字段" name="1">
                        <el-table :data="fields" border ref="fieldsTable">
                            <el-table-column v-if="multipleMode" align="center" type="selection" width="50">
                            </el-table-column>
                            <el-table-column width="130" align="center">
                                <template slot-scope="{ row, column, $index }" v-if="$index>1||formData.dataBaseType!='Mysql'">
                                    <!-- <el-button @click="moveUp($index)" size="small" type="text">上移</el-button>
									<el-button @click="moveDown($index)" size="small" type="text">下移</el-button> -->
                                    <el-button @click="removeField($index)" size="small" type="text">删除</el-button>
                                </template>
                            </el-table-column>
                            <el-table-column prop="name" label="字段名" min-width="150" align="center">
                                <template slot-scope="{row}">
                                    <el-input v-model="row.name"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="type" label="类型" width="150" align="center">
                                <template slot-scope="{row}">
                                    <el-select v-model="row.jdbcType" filterable>
                                        <el-option v-for="item in fieldTypes" :value="item" :label="item" :key="item"></el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column prop="length" label="长度" width="80" align="center">
                                <template slot-scope="{row}">
                                    <el-input v-model.number="row.length"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="decimalPlaces" label="小数点" width="80" align="center">
                                <template slot-scope="{row}">
                                    <el-input v-model.number="row.decimalPlaces"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="remark" label="描述" min-width="150" align="center">
                                <template slot-scope="{row}">
                                    <el-input v-model="row.remark"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="defaultValue" label="默认值" align="center">
                                <template slot-scope="{row}">
                                    <el-input v-model="row.defaultValue"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="notNull" label="非空" width="50" align="center">
                                <template slot-scope="{row}">
                                    <el-checkbox v-model="row.notNull"></el-checkbox>
                                </template>
                            </el-table-column>
                            <el-table-column prop="primaryKey" label="主键" width="50" align="center">
                                <template slot-scope="{row}">
                                    <el-checkbox v-model="row.primaryKey"></el-checkbox>
                                </template>
                            </el-table-column>
                            <el-table-column prop="autoIncrease" label="自增" width="50" align="center">
                                <template slot-scope="{row}">
                                    <el-checkbox v-model="row.autoIncrease"></el-checkbox>
                                </template>
                            </el-table-column>

                        </el-table>
                        <el-button @click="addField" type="text" icon="el-icon-plus">添加</el-button>
                        <el-button @click="addFieldFromTableFieldsDialog = !addFieldFromTableFieldsDialog" type="text" icon="el-icon-plus">从表中添加</el-button>
                        <el-button size="small" v-if="!multipleMode" @click="toggleMultipleMode(true)">批量编辑</el-button>
                        <el-button-group v-else>
                            <el-button size="small" @click="operation1" type="danger" plain>批量删除</el-button>
                            <el-button size="small" @click="operation2" v-if="0">批量上移</el-button>
                            <el-button size="small" @click="toggleMultipleMode(false)">取消</el-button>
                        </el-button-group>
                        <el-button @click="changeRankDialog = !changeRankDialog" type="primary" size="small" icon="el-icon-sort" class="filter-item">排序
                        </el-button>
                    </el-tab-pane>
                    <el-tab-pane label="页面属性" name="2">
                        <el-table :data="editableFields" border>
                            <el-table-column prop="name" label="字段" align="center">
                            </el-table-column>
                            <el-table-column prop="showInList" label="列表" width="50" align="center">
                                <template slot-scope="{row}">
                                    <el-checkbox v-model="row.showInList"></el-checkbox>
                                </template>
                            </el-table-column>
                            <el-table-column prop="showInForm" label="表单" width="50" align="center">
                                <template slot-scope="{row}">
                                    <el-checkbox v-model="row.showInForm" :disabled="row.primaryKey&&!formData.readTable"></el-checkbox>
                                </template>
                            </el-table-column>
                            <el-table-column prop="searchable" label="搜索" width="50" align="center">
                                <template slot-scope="{row}">
                                    <el-checkbox v-model="row.searchable"></el-checkbox>
                                </template>
                            </el-table-column>
                            <!-- <el-table-column prop="sortable" label="排序" width="50" align="center">
                                <template slot-scope="{row}">
                                    <el-checkbox v-model="row.sortable"></el-checkbox>
                                </template>
                            </el-table-column> -->
                            <el-table-column prop="formType" label="表单类型" width="150" align="center">
                                <template slot-scope="{row}">
                                    <el-select v-model="row.formType">
                                        <el-option v-for="item in formTypes" :label="item.label" :value="item.value" :key="item.value"></el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column prop="apiFlag" label="接口" width="300" align="center">
                                <template slot-scope="{row}">
                                    <el-radio v-model="row.apiFlag" label="1" :disabled="row.formType!='select'&&row.formType!='multiSelect'">枚举</el-radio>
                                    <el-radio v-model="row.apiFlag" label="2" :disabled="row.formType!='select'&&row.formType!='multiSelect'">接口</el-radio>
                                    <el-radio v-model="row.apiFlag" label="3" :disabled="row.formType!='select'&&row.formType!='multiSelect'">表</el-radio>
                                </template>
                            </el-table-column>
                            <el-table-column prop="optionsValue" label="选项" min-width="150" align="center">
                                <template slot-scope="{row}">
                                    <el-input type="textarea" v-if="row.apiFlag=='1'&&(row.formType=='select'||row.formType=='multiSelect')" v-model="row.optionsValue"></el-input>
                                    <div v-if="(row.apiFlag=='2'||row.apiFlag=='3')&&(row.formType=='select'||row.formType=='multiSelect')" @click="editSelectField(row)">
                                        <el-input type="textarea" :value="optionsInfo(row)"></el-input>
                                    </div>

                                </template>
                            </el-table-column>
                            <!-- <el-table-column prop="searchMethod" label="搜索方式" width="150" align="center">
                                <template slot-scope="{row}">
                                    <el-select v-model="row.searchMethod">
                                        <el-option v-for="item in searchMethods" :label="item" :value="item" :key="item"></el-option>
                                    </el-select>
                                </template>
                            </el-table-column> -->
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="表单校验" name="3">
                        <el-table :data="fields" border>
                            <el-table-column prop="name" label="字段" align="center">
                            </el-table-column>
                            <el-table-column prop="remark" label="描述" min-width="150" align="center">
                            </el-table-column>
                            <el-table-column prop="jdbcType" label="类型" width="150" align="center">
                            </el-table-column>
                            <el-table-column prop="length" label="长度" width="80" align="center">
                            </el-table-column>
                            <el-table-column prop="logicalKey" label="逻辑关键字" width="50" align="center">
                                <template slot-scope="{row}">
                                    <el-checkbox v-model="row.logicalKey"></el-checkbox>
                                </template>
                            </el-table-column>
                            <el-table-column prop="required" label="必填" width="50" align="center">
                                <template slot-scope="{row}">
                                    <el-checkbox v-model="row.required"></el-checkbox>
                                </template>
                            </el-table-column>
                            <el-table-column prop="validate" label="校验" width="50" align="center">
                                <template slot-scope="{row}">
                                    <el-checkbox v-model="row.validate"></el-checkbox>
                                </template>
                            </el-table-column>
                            <el-table-column prop="minLength" label="最短" width="80" align="center">
                                <template slot-scope="{row}">
                                    <el-input v-model.number="row.minLength"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="maxLength" label="最长" width="80" align="center">
                                <template slot-scope="{row}">
                                    <el-input v-model.number="row.maxLength"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="min" label="最小值" width="80" align="center">
                                <template slot-scope="{row}">
                                    <el-input v-model="row.min"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="max" label="最大值" width="80" align="center">
                                <template slot-scope="{row}">
                                    <el-input v-model="row.max"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="validatorType" label="校验类型" width="150" align="center">
                                <template slot-scope="{row}">
                                    <el-select v-model="row.validatorType" clearable>
                                        <el-option v-for="item in validatorTypes" :label="item.label" :value="item.value" :key="item.value"></el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="子表" name="4">
                        <el-table :data="subtables" border>

                            <el-table-column prop="name" label="控件名" width="150" align="center">
                                <template slot-scope="{row}">
                                    <el-input v-model="row.name"></el-input>
                                </template>
                            </el-table-column>

                            <el-table-column prop="column" label="主表字段" width="150" align="center">
                                <template slot-scope="{row}">

                                    <el-select v-model="row.column">

                                        <el-option v-for="item in fields" :label="changeToCamelCase(item.name)" :value="changeToCamelCase(item.name)" :key="changeToCamelCase(item.name)"></el-option>
                                    </el-select>

                                </template>
                            </el-table-column>

                            <el-table-column prop="subCode" label="子表类" width="150" align="center">
                                <template slot-scope="{row}">
                                    <el-select v-model="row.subCode" clearable @change="changeSubCode">
                                        <el-option v-for="item in subCodes" :label="item.className" :value="item.className" :key="item.className"></el-option>
                                    </el-select>
                                </template>
                            </el-table-column>

                            <el-table-column prop="subColumn" label="子表字段" width="150" align="center">
                                <template slot-scope="{row}">

                                    <el-select v-model="row.subColumn">

                                        <el-option v-for="item in subColumnOptions" :label="changeToCamelCase(item.name)" :value="changeToCamelCase(item.name)" :key="changeToCamelCase(item.name)"></el-option>
                                    </el-select>
                                </template>
                            </el-table-column>

                            <el-table-column width="60" align="center">
                                <template slot-scope="{ row, column, $index }">
                                    <el-button @click="removeSubtable($index)" size="small" type="text">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-button @click="addSubtable" type="text" icon="el-icon-plus">添加</el-button>
                    </el-tab-pane>
                    <el-tab-pane label="排序" name="5">
                        <el-table :data="tableSortFields" border>

                            <el-table-column prop="name" label="字段" align="center">
                                <template slot-scope="{row}">
                                    <el-select v-model="row.name">

                                        <el-option v-for="item in fields" :label="item.name" :value="item.name" :key="item.name"></el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column prop="order" label="排序" align="center">
                                <template slot-scope="{row}">
                                    <el-select v-model="row.order">
                                        <el-option label="降序" value="desc">
                                        </el-option>
                                        <el-option label="升序" value="asc">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column width="60" align="center">
                                <template slot-scope="{ row, column, $index }">
                                    <el-button @click="removeSortField($index)" size="small" type="text">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-button @click="addSortField" type="text" icon="el-icon-plus">添加</el-button>
                    </el-tab-pane>
                    <el-tab-pane label="默认条件" name="6">
                        <el-table :data="advancedQueryFields" border>

                            <el-table-column prop="link" label="链接符" align="center">
                                <template slot-scope="{row}">
                                    <el-select placeholder="链接" size="small" v-model="row.link" class="filter-item">
                                        <el-option label="AND" value="AND">
                                        </el-option>
                                        <el-option label="OR" value="OR">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column prop="name" label="字段" align="center">
                                <template slot-scope="{row}">
                                    <el-select v-model="row.name">

                                        <el-option v-for="item in fields" :label="item.name" :value="item.name" :key="item.name"></el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column prop="searchMethod" label="搜索方式" width="150" align="center">
                                <template slot-scope="{row}">
                                    <el-select v-model="row.searchMethod">
                                        <el-option v-for="item in searchMethods" :label="item" :value="item" :key="item"></el-option>
                                    </el-select>
                                </template>
                            </el-table-column>

                            <el-table-column prop="systemFlag" label="系统参数" width="50" align="center">
                                <template slot-scope="{row}">
                                    <el-checkbox v-model="row.systemFlag"></el-checkbox>
                                </template>
                            </el-table-column>

                            <el-table-column prop="value" label="参数" align="center">
                                <template slot-scope="{row}">
                                    <el-select v-model="row.value" v-if="row.systemFlag">
                                        <el-option v-for="item in systemParameters" :label="item.label" :value="item.value" :key="item.value"></el-option>
                                    </el-select>
                                    <el-input v-model="row.value" v-else></el-input>

                                </template>
                            </el-table-column>
                            <el-table-column prop="noChange" label="不可修改" width="50" align="center">
                                <template slot-scope="{row}">
                                    <el-checkbox v-model="row.noChange"></el-checkbox>
                                </template>
                            </el-table-column>

                            <el-table-column width="60" align="center">
                                <template slot-scope="{ row, column, $index }">
                                    <el-button @click="removeQueryField($index)" size="small" type="text">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>

                        <el-button @click="addQueryField" type="text" icon="el-icon-plus">添加</el-button>
                    </el-tab-pane>

                </el-tabs>

            </el-form-item>
            <el-form-item>
                <el-button @click="onSave" :loading="$store.state.fetchingData" type="primary">保存</el-button>
                <el-button @click="$router.go(-1)">取消</el-button>
            </el-form-item>
        </el-form>

        <el-dialog title="接口选项" :visible.sync="showSelectDialog">
            <el-form :model="selectField">
                <el-form-item label="接口">
                    <el-select placeholder="接口" size="small" filterable clearable v-model="selectField.optionsMethod" class="filter-item">
                        <el-option v-for="item in selectMappings" :label="item.url" :value="item.url" :key="item.url"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="显示">
                    <el-select v-if="selectField.optionsMethod&&selectField.apiFlag=='2'" filterable clearable placeholder="显示" size="small" v-model="selectField.optionsLabel" class="filter-item">
                        <el-option v-for="item in selectMappingsJson[selectField.optionsMethod].fileds.split(',')" :label="item" :value="item" :key="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选项">
                    <el-select v-if="selectField.optionsMethod&&selectField.apiFlag=='2'" filterable clearable placeholder="选项" size="small" v-model="selectField.optionsValue" class="filter-item">
                        <el-option v-for="item in selectMappingsJson[selectField.optionsMethod].fileds.split(',')" :label="item" :value="item" :key="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="selectMappingSubmit">确定</el-button>
                </el-form-item>
            </el-form>

        </el-dialog>

        <el-dialog title="表选项" :visible.sync="showTableSelectDialog">
            <el-form :model="selectField">
                <el-form-item label="库类型">
                    <el-select placeholder="库类型" size="small" filterable clearable v-model="selectField.optionsDataBaseType" @change="changeOptionsDataBaseType" class="filter-item">
                        <el-option label="Mysql" value="Mysql">
                        </el-option>
                        <el-option label="SqlServer" value="SqlServer">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="数据库">

                    <el-select placeholder="数据库" size="small" filterable clearable v-model="selectField.optionsDataSourceCode" @change="changeOptionsDataSourceCode" class="filter-item">
                        <el-option v-for="item in optionsDatasourceInfoList" :label="item.databaseName" :value="item.code" :key="item.code"></el-option>
                    </el-select>

                </el-form-item>

                <el-form-item label="表名">

                    <el-select placeholder="表名" size="small" clearable filterable v-model="selectField.optionsMethod" @change="changeOptionsTableName" class="filter-item">
                        <el-option v-for="item in optionsTableList" :label="item" :value="item" :key="item"></el-option>
                    </el-select>

                </el-form-item>

                <el-form-item label="显示">
                    <el-select v-if="selectField.optionsMethod&&selectField.apiFlag=='3'" filterable clearable placeholder="显示" size="small" v-model="selectField.optionsLabel" class="filter-item">
                        <el-option v-for="item in optionsFields" :label="item.name" :value="item.name" :key="item.name"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="选项">
                    <el-select v-if="selectField.optionsMethod&&selectField.apiFlag=='3'" filterable clearable placeholder="选项" size="small" v-model="selectField.optionsValue" class="filter-item">
                        <el-option v-for="item in optionsFields" :label="item.name" :value="item.name" :key="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="selectMappingSubmit">确定</el-button>
                </el-form-item>
            </el-form>

        </el-dialog>

        <el-dialog title="调整顺序" :visible.sync="changeRankDialog">
            <div class="colorList">
                <div class="color-item" v-for="color in fields" v-dragging="{ item: color, list: fields, group: 'color' }" :key="color.name">{{color.name}}——{{color.remark}}</div>

            </div>
        </el-dialog>

        <el-dialog title="从表中添加字段" :visible.sync="addFieldFromTableFieldsDialog" width='60%'>

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-table :data="baseTableFields" border size="small" height='60vh'>
                        <el-table-column label="基础表" align="center">
                            <template slot-scope="{ row, column, $index }">
                                <el-button v-if="checkInFields(row)" @click="addBaseTableFieldToFields(row)" size="mini" type="text">添加</el-button>

                                <el-button v-else disabled size="mini" type="text">已添加</el-button>

                            </template>
                            <!-- <template slot-scope="{ row, column, $index }" v-else>
                                <span>已添加</span>
                            </template> -->
                        </el-table-column>
                        <el-table-column prop="name" label="字段名" min-width="150" align="center">
                        </el-table-column>
                        <el-table-column prop="remark" label="描述" min-width="150" align="center">
                        </el-table-column>

                    </el-table>
                </el-col>
                <el-col :span="12">
                    <el-table :data="fields" border size="small" height='60vh'>
                        <el-table-column label="展示表" align="center">
                            <template slot-scope="{ row, column, $index }" v-if="$index>1||formData.dataBaseType!='Mysql'">
                                <!-- <el-button @click="moveUp($index)" size="small" type="text">上移</el-button>
									<el-button @click="moveDown($index)" size="small" type="text">下移</el-button> -->
                                <el-button @click="removeField($index)" size="mini" type="text">删除</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="字段名" min-width="150" align="center">
                        </el-table-column>
                        <el-table-column prop="remark" label="描述" min-width="150" align="center">
                        </el-table-column>

                    </el-table>
                </el-col>
            </el-row>
        </el-dialog>

    </div>
</template>

<script>
import axios from 'axios';

export default {
    created() {
        if (this.$route.query.id) {
            this.loading = true;
            this.$http.get({
                url: '/genCode/getOne',
                data: {
                    id: this.$route.query.id
                }
            }).then(res => {
                this.loading = false;
                if (res.success) {

                    res.data.genJson = JSON.parse(res.data.genJson)
                    // console.log(res.data.genJson)
                    res.data.genJson.modules = res.data.genJson.modules ? (res.data.genJson.modules.split(',').map(i => String(i))) : [];

                    this.formData = {
                        ...this.formData,
                        ...res.data.genJson
                    };

                    this.fields = this.formData.fields;
                    this.formData.id = res.data.id;
                    this.formData.genRouter = false;
                    this.subtables = this.formData.subtables;
                    this.tableSortFields = this.formData.tableSortFields;
                    
                    this.advancedQueryFields = this.formData.advancedQueryFields;

                    this.getTableFields(this.formData.tableName, false);
                }
            }).catch(e => this.loading = false)
        }

        this.$http.get({
            url: '/genCode/getSrcPath'
        }).then(res => {
            if (res.success) {
                this.formData.rootPath = res.data.root;
                this.formData.javaPathRelative = res.data.javaPath;
                this.formData.viewPathRelative = res.data.viewPath;
                this.formData.routerPathRelative = res.data.routerPath;
            }
        });
        this.$http.get({
            url: '/dataSourceInfo/all'
        }).then(res => {
            if (res.success) {
                this.MysqlDataSourceInfos.push(this.baseDataSource);

                if (res.data.length > 0) {
                    res.data.forEach(item => {
                        if ('Mysql' == item.databaseType) {
                            this.MysqlDataSourceInfos.push(item);
                        } else if ('SqlServer' == item.databaseType) {
                            this.SqlServerDataSourceInfos.push(item);
                        }
                    })
                }
                this.datasourceInfoList = this.MysqlDataSourceInfos;
            }
        });
        this.$http.get({
            url: '/genCode/all'
        }).then(res => {
            if (res.success) {
                this.subCodes = res.data;
            }
        });

        this.$http.get({
            url: '/dev/selectMappings'
        }).then(res => {
            if (res.success) {
                if (res.data.length > 0) {
                    var temp = {}
                    res.data.forEach(item => {
                        temp[item.url] = item
                    })
                }
                this.selectMappingsJson = temp;
                this.selectMappings = res.data;
            }
        });


        this.getDatabaseTables();


    },
    data() {
        return {
            loading: false,
            fieldTypes: ['char', 'varchar', 'int', 'text', 'timestamp', 'datetime', 'decimal', 'float', 'vue'],
            searchMethods: ['=', '!=', '>', '>=', '<', '<=', 'in', 'like', 'left like', 'right like'],
            formTypes: [

                { label: '单行文本', value: 'singleLineText' },
                { label: '数字', value: 'number' },
                { label: '日期选择', value: 'date' },
                { label: '日期时间选择', value: 'datetime' },
                { label: '登录名', value: 'loginName' },
                { label: '工号', value: 'workNumber' },
                { label: '部门', value: 'departId' },
                { label: '当前时间', value: 'currentTime' },
                { label: '当前日期', value: 'currentDate' },
                { label: '单选下拉框', value: 'select' },
                { label: '多选下拉框', value: 'multiSelect' },
                { label: '单图上传', value: 'singleImage' },
                { label: '多图上传', value: 'multiImage' },
                { label: '文件上传', value: 'fileUpload' },
                { label: '树形选择', value: 'tree' },
                { label: '开关', value: 'switch' },
                { label: '多行文本', value: 'textarea' },
                { label: '富文本', value: 'richText' },
            ],
            systemParameters: [

                { label: '登录名', value: 'loginName' },
                { label: '工号', value: 'workNumber' },
                { label: '部门', value: 'departId' },
                { label: '当前时间', value: 'currentTime' },
                { label: '当前日期', value: 'currentDate' },
                { label: 'MIS代码', value: 'misCode' },
                { label: 'MIS名称', value: 'misName' },
                { label: '下辖MIS代码', value: 'misChildCode' },
                { label: '下辖MIS名称', value: 'misChildName' },
                { label: '下辖MIS代码和名称', value: 'misChildCodeAndName' },
            ],
            validatorTypes: [
                { label: '英文', value: 'english' },
                { label: '数字', value: 'number' },
                { label: '手机', value: 'phone' },
                { label: '网址', value: 'url' },
                { label: '电子邮件', value: 'email' },
                { label: '身份证', value: 'id' }
            ],
            rules: {
                className: [
                    { required: true, message: '请填写类名', trigger: 'blur' },
                    {
                        validator: (rule, value, callback) => {
                            if (value) {
                                if (/^[\u4e00-\u9fa5a-zA-Z0-9_]*$/.test(value)) {
                                    callback();
                                } else {
                                    callback(new Error('类名不正确'));
                                }
                            }
                        }, trigger: 'blur'
                    }
                ],
                tableName: [
                    { required: true, message: '请填写表名', trigger: 'blur' },
                    {
                        validator: (rule, value, callback) => {
                            if (value) {
                                if (/^[\u4e00-\u9fa5a-zA-Z0-9_]*$/.test(value)) {
                                    callback();
                                } else {
                                    callback(new Error('表名不正确'));
                                }
                            }
                        }, trigger: 'blur'
                    }
                ],
                remark: [{ required: true, message: '请填写描述', trigger: 'blur' }],
                rootPath: [{ required: true, message: '请填写生成目录', trigger: 'blur' }],
                dataBaseType: [{ required: true, message: '请选择数据库类型', trigger: 'blur' }],
                dataSourceCode: [{ required: true, message: '请填选择数据库', trigger: 'blur' }],
                typeFlag: [{ required: true, message: '请填填写分类', trigger: 'blur' }],
                modules: [
                    { required: true, message: '请选择功能', trigger: 'blur' },
                ],
            },
            formData: {
                tableName: '',
                remark: '',
                genTable: true,
                genClass: true,
                genList: true,
                genForm: true,
                genRouter: true,
                rootPath: '',
                javaPathRelative: '',
                viewPathRelative: '',
                dataBaseType: 'Mysql',
                readTable: false,
                dataSourceCode: 'dataSource',
                className: '',
                subtables: [],
                modules: [],
                tableSortFields: [],
                advancedQueryFields: [],

            },
            fields: [
                {
                    name: 'id',
                    jdbcType: 'int',
                    notNull: true,
                    primaryKey: true,
                    autoIncrease: true,
                    remark: '',
                    showInList: false,
                    showInForm: false,
                    searchable: false,
                    sortable: true
                },
                {
                    name: 'del_flag',
                    jdbcType: 'char',
                    notNull: true,
                    primaryKey: false,
                    autoIncrease: false,
                    remark: '删除标识',
                    showInList: false,
                    showInForm: false,
                    searchable: false,
                    defaultValue: 'N',
                    length: 1,
                    sortable: false
                },
            ],
            MysqlDataSourceInfos: [],
            SqlServerDataSourceInfos: [],
            baseDataSource: {
                databaseType: 'Mysql',
                code: 'dataSource',
                databaseName: '基础数据库'

            },
            datasourceInfoList: [],
            tableList: [],
            subtables: [],
            subCodes: [],
            subColumnOptions: [],
            selectMappings: [],
            selectMappingsJson: {},
            showSelectDialog: false,
            selectField: {},
            showTableSelectDialog: false,
            optionsDatasourceInfoList: [],
            optionsTableList: [],
            optionsFields: [],
            tableSortFields: [],
            advancedQueryFields: [],
            multipleMode: false,
            changeRankDialog: false,
            baseTableFields: [],
            addFieldFromTableFieldsDialog: false,
        }
    },
    computed: {
        editableFields() {
            return this.fields.filter(i => {
                return i.name
            });
        },

        selection() {
            return this.$refs.fieldsTable.selection.map(i => i.name);
        },
        nameList() {
            var list = []
            this.fields.forEach(item => {
                list.push(item.name)
            })
            return list
        }

    },
    mounted() {
        this.$dragging.$on('dragged', ({ value }) => {
            console.log(value.item)
            console.log(value.list)
            console.log(value.otherData)
        })
    },
    methods: {
        onSave() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.checkClassName();
                } else {
                    return false;
                }
            });
        },

        checkClassName() {

            this.$http.get({
                url: '/genCode/check',
                data: {
                    id: this.formData.id,
                    className: this.formData.className,
                    tableName: this.formData.tableName,
                    genTable: this.formData.genTable,
                }
            }).then(res => {
                if (res.success) {

                    if (res.data < 0) {
                        this.$alert('表已经存在请谨慎操作', '警告', { type: 'error' }).then(() => {
                            this.submit();
                        }).then(() => {
                        }).catch(res => {
                        })

                    } else {
                        this.submit();
                    }

                } else {
                    this.$msgbox({ title: '提示', type: 'error', message: '类名以存在' });
                }
            })


        },

        submit() {

            this.formData.fields = this.fields;
            this.formData.subtables = this.subtables;
            this.formData.tableSortFields = this.tableSortFields;
            this.formData.advancedQueryFields = this.advancedQueryFields;
            this.formData.javaPath = this.formData.rootPath + this.formData.javaPathRelative;
            this.formData.viewPath = this.formData.rootPath + this.formData.viewPathRelative;
            this.formData.routerPath = this.formData.rootPath + this.formData.routerPathRelative;
            this.formData.genJson = '';
            this.formData.modules = this.formData.modules.join();

            this.$alert('生成代码可能会删除已有同名表、数据或文件，确认要生成么？', '警告', { type: 'error' }).then(() => {
                this.loading = true;
                return axios.post(this.formData.id ? '/genCode/update' : '/genCode/save', this.formData)
            }).then(() => {
                this.loading = false;
                this.$message.success('代码生成成功');
                this.$router.go(-1);
            }).catch(res => {
                this.loading = false;
                if ('cancel' === res) {
                    this.$msgbox({ title: '提示', type: 'error', message: '生成取消' });
                } else {
                    this.$msgbox({ title: '提示', type: 'error', message: '生成失败' });
                }
            })
        },
        addField() {
            this.fields.push({
                name: '',
                jdbcType: 'varchar',
                notNull: false,
                primaryKey: false,
                autoIncrease: false,
                remark: '',
                showInList: true,
                showInForm: true,
                searchable: true,
                formType: 'singleLineText',
                sortable: true
            });
        },
        removeField(i) {
            if (this.fields.length > 0) {
                this.fields.splice(i, 1);
            }
        },
        removeFieldByName(name) {
            var that = this;
            that.fields.forEach(function (value, index) {
                //只有为true时才删除
                if (value.name === name) {
                    that.fields.splice(index, 1);
                    // console.log(index);
                }
            });
        },

        updateReadTable() {
            this.formData.readTable = !this.formData.readTable;
            this.formData.genTable = !this.formData.readTable;
        },
        changeDataBaseType() {
            if ('Mysql' == this.formData.dataBaseType) {
                this.datasourceInfoList = this.MysqlDataSourceInfos;
                this.formData.dataSourceCode = 'dataSource';
                this.getDatabaseTables();
            } else if ('SqlServer' == this.formData.dataBaseType) {
                this.datasourceInfoList = this.SqlServerDataSourceInfos;
                this.formData.dataSourceCode = '';
            }
        },
        changeOptionsDataBaseType() {
            if ('Mysql' == this.selectField.optionsDataBaseType) {
                this.optionsDatasourceInfoList = this.MysqlDataSourceInfos;
                this.selectField.optionsDataSourceCode = 'dataSource';
                this.getOptionsDatabaseTables();
            } else if ('SqlServer' == this.selectField.optionsDataBaseType) {
                this.optionsDatasourceInfoList = this.SqlServerDataSourceInfos;
                this.selectField.optionsDataSourceCode = '';
            }
        },
        getDatabaseTables(code) {
            this.tableList = [];
            this.$http.get({
                url: '/genCode/tables',
                data: {
                    code: code
                }
            }).then(res => {
                if (res.success) {

                    this.tableList = res.data;
                }
            })
        },
        getOptionsDatabaseTables(code) {
            this.optionsTableList = [];
            this.$http.get({
                url: '/genCode/tables',
                data: {
                    code: code
                }
            }).then(res => {
                if (res.success) {

                    this.optionsTableList = res.data;
                }
            })
        },
        changeDataSourceCode() {
            if (this.formData.readTable) {

                this.formData.tableName = '';
                this.getDatabaseTables(this.formData.dataSourceCode);
            }
        },
        changeOptionsDataSourceCode() {

            this.getOptionsDatabaseTables(this.selectField.optionsDataSourceCode);
        },
        changeTableName() {
            if (this.formData.readTable) {

                this.fields = [];

                this.getTableFields(this.formData.tableName, true);
            }
        },
        changeOptionsTableName() {

            this.optionsFields = [];

            this.getOptionsTableFields(this.selectField.optionsMethod);
        },
        getTableFields(tableName, type) {
            this.$http.get({
                url: '/genCode/tableFields',
                data: {
                    code: this.formData.dataSourceCode,
                    tableName: tableName,
                    databaseType: this.formData.dataBaseType,
                }
            }).then(res => {
                if (res.success) {

                    if (type) {

                        this.fields = res.data;
                        this.baseTableFields = res.data;
                    } else {
                        this.baseTableFields = res.data;//基础字段信息
                    }
                }
            })
        },

        getOptionsTableFields(tableName) {
            this.$http.get({
                url: '/genCode/tableFields',
                data: {
                    code: this.selectField.optionsDataSourceCode,
                    tableName: tableName,
                    databaseType: this.selectField.optionsDataBaseType,
                }
            }).then(res => {
                if (res.success) {

                    this.optionsFields = res.data;
                }
            })
        },
        addSubtable() {
            this.subtables.push({
                name: '',
                column: '',
                subColumn: '',
                subCode: '',
            });
        },
        removeSubtable(i) {
            if (this.subtables.length > 0) {
                this.subtables.splice(i, 1);
            }
        },

        moveUp(i) {
            if (i > 0) {

                var tempFields = [...this.fields];
                var tempField = tempFields[i - 1];


                tempFields[i - 1] = tempFields[i];
                tempFields[i] = tempField;

                this.fields = tempFields;



            }
        },

        moveDown(i) {
            if (this.fields.length - 1 > i) {

                var tempFields = [...this.fields];

                var tempField = tempFields[i + 1];


                tempFields[i + 1] = tempFields[i];
                tempFields[i] = tempField;

                this.fields = tempFields;



            }

        },
        editSelectField(row) {
            this.selectField = row;

            if (row.apiFlag == '2') {

                this.showSelectDialog = true;
            } else if (row.apiFlag == '3') {
                this.showTableSelectDialog = true;
            }
        },
        optionsInfo(row) {
            var value = '';
            if (row.apiFlag == '1') {
                value = row.optionsValue;
            } else if (row.apiFlag == '2') {

                value = row.optionsMethod ? row.optionsMethod : '' + ',' + row.optionsLabel + ',' + row.optionsValue;
            } else if (row.apiFlag == '3') {
                value = row.optionsMethod + ',' + row.optionsLabel + ',' + row.optionsValue;
            }
            return value;
        },
        selectMappingSubmit() {

            if (this.selectField.apiFlag == '2') {

                this.showSelectDialog = false;
            } else if (this.selectField.apiFlag == '3') {
                this.showTableSelectDialog = false;
            }


        },
        addSortField() {
            this.tableSortFields.push({
                name: '',
                order: 'asc',
            });
        },
        removeSortField(i) {
            if (this.tableSortFields.length > 0) {
                this.tableSortFields.splice(i, 1);
            }
        },
        addQueryField() {
            this.advancedQueryFields.push({
                link: 'AND',
                name: '',
                searchMethod: '=',
                value: '',
                systemFlag: false,
            });
        },
        removeQueryField(i) {
            if (this.advancedQueryFields.length > 0) {
                this.advancedQueryFields.splice(i, 1);
            }
        },
        changeToCamelCase(value) {
            if (value) {
                var a = value.split("_");
                var o = a[0];
                for (var i = 1; i < a.length; i++) {
                    o = o + a[i].slice(0, 1).toUpperCase() + a[i].slice(1);
                }

                return o;
            }

        },
        changeSubCode(subCode) {


            this.subCodes.forEach(item => {
                if (item.className == subCode) {
                    this.subColumnOptions = JSON.parse(item.genJson).fields;
                }
            }
            )


        },
        operation1() {
            if (this.selection.length > 0) {
                this.selection.forEach(item => {
                    this.removeFieldByName(item);
                }

                );
            }


        },
        operation2() {



        },
        toggleMultipleMode(multipleMode) {
            this.multipleMode = multipleMode;
            if (!multipleMode) {
                this.$refs.fieldsTable.clearSelection();
            }
        },

        checkInFields(row) {

            if (this.nameList.indexOf(row.name) == -1) {
                return true
            }
            else {
                return false
            }
        },
        addBaseTableFieldToFields(row) {

            this.fields.push(row);
        }


    }
}
</script>

<style lang="less" scoped>
.color-item {
    height: 42px;
    font-size: 14px;
    border-bottom: 1px solid #eee;
    line-height: 42px;
    padding: 0 20px;
    cursor: move;
    &:last-child {
        border-bottom: none;
    }
}
.colorList {
    border: 1px solid #eee;
    max-height: 60vh;
    overflow: auto;
}
</style>
