<template>
    <ap-container>
        <ap-aside margin="0000">
            <ap-aside-tree ref="typeTree" :options.sync="treeOptions">
                <el-form slot="form" ref="tDevDbFieldType" :inline="true" label-width="80px"
                         :model="tDevDbFieldTypeForm" :rules="tDevDbFieldTypeRules">
                    <el-form-item label="父类别">
                        <el-select v-model="tDevDbFieldTypeForm.fdParentId" filterable placeholder="请选择父节点">
                            <el-option label="无" value=""/>
                            <el-option v-for="item in typeList" :key="item.fdId" :label="item.fdName" :value="item.fdId"/>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="类别名称" prop="fdName">
                        <el-input v-model="tDevDbFieldTypeForm.fdName"/>
                    </el-form-item>

                    <el-form-item label="排序" prop="fdSort">
                        <el-input-number v-model="tDevDbFieldTypeForm.fdSort" controls-position="right"/>
                    </el-form-item>
                </el-form>

                <span slot="tree" slot-scope="scope">
                    {{ scope.data.fdName }}
                </span>
            </ap-aside-tree>
        </ap-aside>
        <ap-container>
            <ap-header margin="0000" style="padding: 0">
                <el-form ref="searchFormRef" :model="searchForm" :inline="true" class="layout-header-form" @submit.native.prevent="searchEvent">
                    <el-form-item label="" class="layout-header-form-item" prop="likeStr">
                        <el-input v-model="searchForm.likeStr" placeholder="字段名/注释，模糊匹配"/>
                    </el-form-item>
                </el-form>
                <el-button type="primary" @click="searchEvent">查询</el-button>
            </ap-header>
            <ap-main margin="0000" style="padding: 0">
                <ap-table ref="devDbFieldGrid" :options.sync="tableOpt"/>
            </ap-main>
        </ap-container>

    </ap-container>
</template>

<script>

export default {
    name: 'DevDbTableDialog',
    data() {
        const columns = [
            {
                prop: 'fdFieldTypeId',
                label: '字段所属分组',
                type: 'select',
                addDefaultValue: this.addDefaultValueFn,
                selectOptionsRemote: 'typeList',
                selectOptionsKey: {label: 'fdName', value: 'fdId'},
                rules: [
                    {required: true, message: '请选择分组'}
                ]
            },
            {
                prop: 'fdName',
                label: '字段名称',
                type: 'input',
                rules: [
                    {required: true, message: '字段名称必填'},
                    {min: 1, max: 30, message: '长度在 1 到 30 个字符'}
                ]
            },
            {
                prop: 'fdComment',
                label: '默认注释',
                type: 'input',
                rules: [
                    {required: true, message: '字段注释必填'},
                    {min: 1, max: 30, message: '长度在 1 到 30 个字符'}
                ]
            }, {
                prop: 'fdDataType',
                label: '数据类型',
                type: 'select',
                selectOptions: [
                    {
                        label: '常用',
                        options: [
                            {label: 'char(255)', value: 'char'},
                            {label: 'varchar(6.5万)', value: 'varchar'},
                            {label: 'tinyint(255)', value: 'tinyint'},
                            {label: 'datetime(年月日时分秒)', value: 'datetime'}
                        ]
                    },
                    {
                        label: '字符串',
                        options: [
                            {label: 'char(255)', value: 'char'},
                            {label: 'varchar(6.5万)', value: 'varchar'},
                            {label: 'text(6.5万)', value: 'text'},
                            {label: 'mediumtext(1600万)', value: 'mediumtext'},
                            {label: 'longtext(极长)', value: 'longtext'},
                        ]
                    },
                    {
                        label: '整型数值',
                        options: [
                            {label: 'tinyint(255)', value: 'tinyint'},
                            {label: 'smallint(6.5万)', value: 'smallint'},
                            {label: 'mediumint(1.6千万)', value: 'mediumint'},
                            {label: 'int(4.2亿)', value: 'int'},
                            {label: 'bigint(极大)', value: 'bigint'}
                        ]
                    },
                    {
                        label: '浮点数值',
                        options: [
                            {label: 'float(单精度)', value: 'float'},
                            {label: 'double(双精度)', value: 'double'},
                            {label: 'decimal(小数值)', value: 'decimal'}
                        ]
                    },
                    {
                        label: '日期时间',
                        options: [
                            {label: 'date(年月日)', value: 'date'},
                            {label: 'time(时分秒)', value: 'time'},
                            {label: 'year(年)', value: 'year'},
                            {label: 'datetime(年月日时分秒)', value: 'datetime'},
                            {label: 'timestamp(时间戳)', value: 'timestamp'}
                        ]
                    },
                    {
                        label: '二进制:图片/文件',
                        options: [
                            {label: 'blob(6.5万)', value: 'blob'},
                            {label: 'mediumblob(1600万)', value: 'mediumblob'},
                            {label: 'longblob(极长)', value: 'longblob'},
                        ]
                    }
                ],
                selectFilterable: true,
                selectIsGroup: true,
                selectPlaceholder: '选择数据类型',
                rules: [
                    {required: true, message: '数据类型必选'}
                ]
            }, {
                prop: 'fdSort',
                label: '排序',
                type: 'inputNumber',
                inputNumberMin: 0,
                // inputNumberMax: 10,
                hide: true,
                sortable: true,
                rules: [
                    {required: true, message: '请输入排序'}
                ],
                addDefaultValue: 0
            }, {
                prop: 'fdDeleted',
                label: '删除',
                type: 'input',
                hide: true,
                addDefaultValue: 0
            }]
        let tools = ['add', 'edit', 'del', 'cancel', 'refresh', 'save', 'separator',
            {
                btnType: 'primary',
                text: '上移',
                icon: 'el-icon-top',
                onClick: () => {
                    this.sortBefore()
                }
            },
            {
                btnType: 'primary',
                text: '下移',
                icon: 'el-icon-bottom',
                onClick: () => {
                    this.sortAfter()
                }
            },
            {
                btnType: 'primary',
                text: '一键排序',
                icon: 'el-icon-s-operation',
                onClick: () => {
                    this.doSortByIndex()
                }
            }]
        const tableOpt = {
            title: '字段列表',
            columns: columns,
            pagination: {
                pageSizes: [30, 60, 90],
                pageSize: 30
            },
            dataUrl: '/apd/db/DevDbField/getTDevDbFieldGridList',
            saveUrl: '/apd/db/DevDbField/saveTDevDbFieldGridData',
            editPk: 'fdId',
            deletePk: 'fdId',
            deleteUrl: '/apd/db/DevDbField/deleteTDevDbFieldByFdId',
            toolbarBtn: ['add', 'edit', 'del', 'refresh', 'save'],
            initData: false,
            beforeAdd: this.beforeAddFn,
            params: () => {
                return {
                    fdFieldTypeIds: this.selectedFieldTypeIds,
                    likeStr: this.searchForm.likeStr
                }
            },
            selectionChangeEvent: selection => {
                // 返回给父节点
                this.$emit('dataChange', selection)
            }
        }

        return {
            // ----- 左侧树 -----
            typeTreeList: [],
            selectedFieldTypeIds: '',
            treeOptions: this.getTreeOption(),
            tDevDbFieldTypeForm: {
                fdName: '',
                fdParentId: '',
                fdId: '',
                fdSort: undefined
            },
            tDevDbFieldTypeRules: {},

            // ----- dialog -----
            typeList: [],
            dialogVisible: false,
            dialogTitle: '', // dialog标题
            isAddDialog: true, // 添加类型dialog
            dialogForm: {
                fdName: '',
                fdParentId: '',
                fdId: '',
                fdSort: undefined
            },
            dialogFormRules: {
                fdSort: [
                    {type: 'number', message: '请输入数字', trigger: 'change'}
                ],
                fdName: [
                    {required: true, message: '请输入类型名称', trigger: 'blur'},
                    {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}
                ]
            },
            // ----- 表格 -----
            searchForm: {
                listStr: ''
            },
            tableOpt: tableOpt
        }
    },
    created() {
    },
    methods: {
        // 左侧树：配置
        getTreeOption() {
            let treeOptions = {
                title: "字段分组",
                toolbarBtn: [],
                dialogTitle: "数据库字段分组",
                showCheckbox: true,
                defaultExpandAll: true,
                onCheck: (data, node, comp, halfCheckedKeys, checkedKeys) => {
                    let treeRef = this.$refs.typeTree.getTreeRef();
                    const parentKeys = treeRef.getHalfCheckedKeys()
                    const selectKeys = treeRef.getCheckedKeys(false)
                    this.selectedFieldTypeIds = parentKeys.concat(selectKeys).join(',')
                    this.$refs.devDbFieldGrid.refresh()
                },
                loadOptions: {
                    url: "/apd/db/DevDbField/getDbFieldTypeList",
                    treeKey: {
                        idKey: "fdId",
                        parentKey: "fdParentId",
                        childrenKey: "children",
                        label: "fdName"
                    },
                    success: (response) => {
                        this.typeList = JSON.parse(JSON.stringify(response.data))
                    },
                },
            };

            return treeOptions;
        },

        // 添加行：数据类型默认值
        beforeAddFn() {
            const fdFieldTypeIds = this.selectedFieldTypeIds
            if (fdFieldTypeIds == null || fdFieldTypeIds == '') {
                this.$message.error(`请先选择字段类型！`)
                return false
            }
            return true
        },
        addDefaultValueFn() {
            let currentNode = this.$refs.typeTree.getTreeRef().getCurrentNode() || {}
            return currentNode.fdId
        },
        searchEvent() {
            this.$refs.devDbFieldGrid.refresh()
        }
    }
}
</script>

<style scoped>
</style>
