<template>
    <ap-container>
        <ap-aside margin="1111" width="200px">
            <ap-aside-tree :options.sync="treeOptions">
                <el-form slot="form" ref="tSysLangType" :inline="true" label-width="80px"
                         :model="tSysLangTypeForm" :rules="tSysLangTypeRules">
                    <el-form-item label='名称' prop='fdName'>
                        <el-input v-model='tSysLangTypeForm.fdName'></el-input>
                    </el-form-item>
                    <el-form-item label='排序' prop='fdSort'>
                        <el-input v-model='tSysLangTypeForm.fdSort'></el-input>
                    </el-form-item>
                </el-form>
                <span slot="tree" slot-scope="scope">
                    {{ scope.data.fdName }}
                </span>
            </ap-aside-tree>
        </ap-aside>
        <ap-split-panel></ap-split-panel>
        <ap-container>
            <ap-header margin="1110">
                <el-form ref="tSysLangSearchForm" :model="tSysLangSearchForm" :rules="tSysLangSearchFormRules"
                         :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="tSysLangSearchForm.likeStr" placeholder="请输入搜索值"></el-input>
                    </el-form-item>
                </el-form>
                <el-button type="primary" @click="searchEvent">查询</el-button>
            </ap-header>
            <ap-main margin="0110">
                <ap-table ref="tSysLangTableRef" :options.sync="tSysLangTable"></ap-table>
            </ap-main>
        </ap-container>
    </ap-container>
</template>

<script>
    export default {
        name: 'SysLang',
        data() {
            let tSysLangCols = [
                {
                    prop: 'fdTypeId',
                    label: '分类',
                    type: "select",
                    selectOptionsKey: {label: "fdName", value: "fdId"},
                    selectOptionsRemote: "typeList",
                    addDefaultValue: () => {
                        return this.typeId;
                    },
                    width: 100
                }, {
                    prop: 'fdCode',
                    label: '编码',
                    type: 'input',
                }, {
                    prop: 'fdZhText',
                    label: '中文',
                    type: 'input',
                }, {
                    prop: 'fdEnText',
                    label: '英文',
                    type: 'input',
                }, {
                    prop: 'fdViText',
                    label: '越南文',
                    type: 'input'
                }, {
                    prop: 'fdSort',
                    label: '排序',
                    type: 'input',
                    width: 80
                },
            ];
            let tSysLangTable = {
                title: Lang.get("国际化"),
                columns: tSysLangCols,
                dataUrl: "/apm/sys/TSysLang/getTSysLangGridList",
                saveUrl: "/apm/sys/TSysLang/saveTSysLangGridData",
                editPk: "fdId", //默认fdId
                deletePk: "fdId", // 默认fdId
                deleteUrl: "/apm/sys/TSysLang/deleteTSysLangGridData",
                toolbarBtn: [
                    {btnType: "primary", text: "刷新缓存", icon: "el-icon-magic-stick", onClick: this.refreshCache},
                    {btnType: "primary", text: "同步配置", icon: "el-icon-transfer", onClick: this.syncLang},
                    "separator","add", "edit", "del", "cancel", "refresh", "save"],
                params: () => {
                    return {
                        likeStr: this.tSysLangSearchForm.likeStr,
                        typeId: this.typeId
                    }
                }
            };

            return {
                // ----- 左侧树 -----
                treeOptions: this.getTreeOption(),
                tSysLangTypeForm: {},
                tSysLangTypeRules: {},
                typeId: "",
                // ----- 右侧 -----
                tSysLangTable: tSysLangTable,
                tSysLangSearchForm: {
                    likeStr: ""
                },
                tSysLangSearchFormRules: {
                    // TODO 自定义rules
                    likeStr: [{min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}]
                }
            }
        },
        methods: {
            // 左侧树：配置
            getTreeOption() {
                let treeOptions = {
                    title: "分类",
                    toolbarBtn: ["add", "edit", "del", "sort"],
                    dialogTitle: "国际化分类",
                    rowKey: "fdId",
                    rowParentKey: "fdParentId",
                    defaultExpandAll: true,
                    sortByDrag: true,
                    onClick: (data, node, comp) => {
                        this.typeId = data.fdId;
                        this.$refs.tSysLangTableRef.refresh();
                    },
                    loadOptions: {
                        url: "/apm/sys/TSysLangType/getTSysLangTypeList",
                        treeKey: {
                            idKey: "fdId",
                            parentKey: "fdParentId",
                            childrenKey: "children",
                            label: "fdName"
                        },
                        success: (response) => {},
                    },
                    editOptions: {
                        url: "/apm/sys/TSysLangType/getTSysLangTypeByFdId",
                        data: (node) => {
                            return {
                                fdId: node.fdId
                            }
                        },
                        success: (response) => {
                            this.tSysLangTypeForm= response.data;
                        },
                        error() {},
                    },
                    insertUrl: "/apm/sys/TSysLangType/insertTSysLangType",
                    insertData: () => {
                        return this.tSysLangTypeForm
                    },
                    updateUrl: "/apm/sys/TSysLangType/updateTSysLangType",
                    updateData: () => {
                        return this.tSysLangTypeForm
                    },
                    deleteUrl: "/apm/sys/TSysLangType/deleteTSysLangTypeByFdId",
                    deleteData: (node) => {
                        return {
                            fdId: node.fdId
                        }
                    },
                    updateSortUrl: '/apm/sys/TSysLangType/updateTSysLangTypeSort',
                    updateSortListUrl: '/apm/sys/TSysLangType/updateTSysLangTypeSortList',
                    resetForm: () => {
                        this.tSysLangTypeForm = {
                            fdName: '',
                            fdSort: '',
                        };
                    },
                    afterOpenAddDialog: (node) => {},
                };

                return treeOptions;
            },
            // 右侧：查询事件
            searchEvent() {
                // 表单rules认证
                this.$refs.tSysLangSearchForm.validate((valid) => {
                    if (!valid) {
                        this.$message.error('搜索条件格式不正确！');
                        return false;
                    }
                    this.$refs.tSysLangTableRef.refresh();
                });
            },
            refreshCache(){
                this.$request({
                    url: '/apm/sys/TSysLang/refreshLangCache',
                    method: 'post',
                }).then(response => {
                    this.$message.success(`缓存刷新成功！`)
                })
            },
            syncLang(){
                this.$request({
                    url: '/apt/sys/TSysTaskPlan/doTaskByCode',
                    method: 'post',
                    data:{code:'AP-LANG-SYNC', comment: '同步国际化配置到其他平台'}
                }).then(response => {
                });
            }
        }
    }
</script>

<style scoped>
</style>
