<template>
    <div>
        <el-form :model="formData" :rules="rules" ref="form" label-width="80px" label-position="right" size="small">
            <el-form-item prop="tableName" label="表名">
                <el-input v-model="formData.tableName" style="width: 400px;"></el-input>
            </el-form-item>
            <el-form-item prop="remark" label="描述">
                <el-input v-model="formData.remark" style="width: 400px;"></el-input>
            </el-form-item>
            <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="dataBaseType" label="数据库">
                <el-select placeholder="数据库类型" size="small" v-model="formData.dataBaseType" 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="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-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="数据" v-if="!formData.readTable">
                <el-tabs value="1" type="border-card" @tab-click="tabClick">
                    <el-tab-pane label="字段" name="1">
                        <el-table :data="fields">
                            <el-table-column prop="name" label="字段名" 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="描述" 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-column width="60" align="center">
                                <template slot-scope="{ row, column, $index }" v-if="$index>1">
                                    <el-button @click="removeField($index)" size="small" type="text">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-button @click="addField" type="text" icon="el-icon-plus">添加</el-button>
                    </el-tab-pane>
                    <el-tab-pane label="页面属性" name="2">
                        <el-table :data="editableFields">
                            <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"></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="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="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">
                            <el-table-column prop="name" label="字段" align="center">
                            </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">
                                        <el-option v-for="item in validatorTypes" :label="item.label" :value="item.label" :key="item.label"></el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                        </el-table>
                    </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>
    </div>
</template>

<script>
import axios from 'axios'

export default {
    created() {
        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;
            }
        })
    },
    data() {
        return {
            fieldTypes: ['char', 'varchar', 'int', 'text', 'timestamp', 'datetime', 'decimal', 'float'],
            searchMethods: ['=', '!=', '>', '>=', '<', '<=', 'between', 'like', 'left like', 'right like'],
            formTypes: [
                { label: '单行文本', value: 'singleLineText' },
                { label: '多行文本', value: 'textarea' },
                { label: '富文本', value: 'richText' },
                { label: '数字', value: 'number' },
                { label: '日期选择', value: 'date' },
                { label: '单选下拉框', value: 'select' },
                { label: '多选下拉框', value: 'multiSelect' },
                { label: '单图上传', value: 'singleImage' },
                { label: '多图上传', value: 'multiImage' },
                { label: '文件上传', value: 'fileUpload' },
                { label: '树形选择', value: 'tree' },
                { label: '开关', value: 'switch' }
            ],
            validatorTypes: [
                { label: '英文', value: 'english' },
                { label: '数字', value: 'number' },
                { label: '手机', value: 'phone' },
                { label: '网址', value: 'url' },
                { label: '电子邮件', value: 'email' },
                { label: '身份证', value: 'id' }
            ],
            rules: {
                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' }]
            },
            formData: {
                tableName: '',
                remark: '',
                genTable: true,
                genClass: true,
                genList: true,
                genForm: true,
                rootPath: '',
                javaPathRelative: '',
                viewPathRelative: '',
                dataBaseType: 'Mysql',
                readTable: false,
            },
            fields: [{
                name: 'id',
                jdbcType: 'int',
                notNull: true,
                primaryKey: true,
                autoIncrease: true,
                remark: '',
                showInList: false,
                showInForm: false,
                searchable: false
            },
            {
                name: 'del_flag',
                jdbcType: 'char',
                notNull: true,
                primaryKey: false,
                autoIncrease: false,
                remark: '删除标识',
                showInList: false,
                showInForm: false,
                searchable: false,
                defaultValue: 'N',
                length: 1
            },
            ]
        }
    },
    computed: {
        editableFields() {
            return this.fields.filter(i => {
                return i.name
            });
        }
    },
    methods: {
        onSave() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.submit();
                } else {
                    return false;
                }
            });
        },
        submit() {

            this.formData.fields = this.fields;
            this.formData.javaPath = this.formData.rootPath + this.formData.javaPathRelative;
            this.formData.viewPath = this.formData.rootPath + this.formData.viewPathRelative;
            var alertMsg = "生成代码可能会删除已有同名表、数据或文件，确认要生成么？";

            this.$alert(alertMsg, '警告', { type: 'error' }).then(() => {
                return axios.post('/genCode/save', this.formData)
            }).then(() => {
                this.$msgbox({ title: '提示', type: 'success', message: '代码生成成功' });
            }).catch(() => {
                if (res === 'cancel') {
                    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: false,
                formType: 'singleLineText'
            });
        },
        removeField(i) {
            if (this.fields.length > 1) {
                this.fields.splice(i, 1);
            }
        },
        tabClick(tab) {
            window.xxx = tab;
            setTimeout(() => tab.$nextTick(), 1000);
        },
        updateReadTable() {
            this.formData.readTable = !this.formData.readTable;
            this.formData.genTable = !this.formData.readTable;
        },
    }
}
</script>

<style lang="less" scoped>
</style>
