<!--实体模板-->
<template>
    <a-row type="flex" :gutter="16">
        <a-col :md="isCollapse ? 4 : 1" :sm="24" style="padding-right: 0px">
            <!-- <standard-tree
                ref="treeref"
                :rightClickAbled="true"
                :Title="describe"
                :apim="apim"
                @treeId="handleTreeId"
                @change="isShow"
                @reData="queryTreeList"
            /> -->
        </a-col>
        <a-col :md="isCollapse ? 20 : 23" :sm="24">
            <a-card :bordered="false">
                <a-page-header :title="treeTitle" />
                <!-- 搜索区域 start-->
                <!-- table-page-search-wrapper在 GlobalLayout.vue中被定义 -->
                <div class="table-page-search-wrapper">
                    <!-- 回车键执行searchQuery，其在JeecgListMixin中执行 -->
                    <a-form layout="inline" @keyup.enter.native="searchQuery">
                        <a-row :gutter="24">
                            <a-col :md="8" :sm="12">
                                <a-form-item label="模板名称">
                                    <!-- 输入框双向绑定后，得到queryParam值，到JeecgListMixin.js中传值到后端 -->
                                    <a-input
                                        placeholder="请输入模板名称"
                                        v-model="queryParam.name"
                                        allowClear
                                    ></a-input>
                                </a-form-item>
                            </a-col>
                            <a-col :md="8" :sm="12">
                                <a-form-item label="模板编码">
                                    <!-- 输入框双向绑定后，得到queryParam值，到JeecgListMixin.js中传值到后端 -->
                                    <a-input
                                        placeholder="请输入模板编码"
                                        v-model="queryParam.code"
                                        allowClear
                                    ></a-input>
                                </a-form-item>
                            </a-col>
                            <a-col :md="8" :sm="12">
                                <span
                                    style="float: left; overflow: hidden"
                                    class="table-page-search-submitButtons"
                                >
                                    <a-button
                                        type="primary"
                                        @click="searchQuery"
                                        icon="search"
                                        >查询</a-button
                                    >
                                    <a-button
                                        type="primary"
                                        @click="searchReset"
                                        icon="reload"
                                        style="margin-left: 8px"
                                        >重置</a-button
                                    >
                                </span>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
                <!-- 搜索区域 end-->
                <!-- 操作按钮区域  start-->
                <div class="table-operator">
                    <!-- 以下五个方法都在JeecgListMixin.js中调用，其中新增样式因为每个表格不一样继转到***modal.vue中执行 -->
                    <a-button @click="handleAdd" type="primary" icon="plus"
                        >新增</a-button
                    >
                    <a-button
                        @click="batchDel"
                        type="danger"
                        icon="delete"
                        ghost
                        >删除</a-button
                    >
                    <a-button
                        @click="handleUpdataStatus(1, 'status')"
                        type="primary"
                        icon="unlock"
                        ghost
                        >启用</a-button
                    >
                    <a-button
                        @click="handleUpdataStatus(0, 'status')"
                        type="danger"
                        icon="lock"
                        ghost
                        >禁用</a-button
                    >
                    <a-button
                        @click="handleSaveSort"
                        type="primary"
                        icon="save"
                        ghost
                        >保存排序号</a-button
                    >
                </div>
                <!-- 操作按钮区域  end-->

                <!-- <Common-table
                    ref="childTable"
                    :columns="columns"
                    :ipagination="ipagination"
                    :dataSource.sync="dataSource"
                    :scroll="scroll"
                    :loading="loading"
                    :ellipsis="ellipsis"
                    :slotColums="slotColums"
                    :editById="true"
                    @handleTableChange="handleTableChange"
                    @handleEditById="handleEditById"
                    @selection="selection"
                    @sequenceChange="sequenceChange"
                > -->
                    <!-- <template slot="action" slot-scope="{ record }">
                        <a-dropdown-button @click="handleTableField(record)">
                            <a-icon type="setting" />设置实体
                            <a-menu slot="overlay">
                                <a-menu-item
                                    key="1"
                                    @click="handleCreate(record.id)"
                                >
                                    <a-icon type="carry-out" />发布
                                </a-menu-item>
                            </a-menu>
                        </a-dropdown-button>
                    </template> -->
                <!-- </Common-table> -->
                <!-- <model-template-modal
                    ref="modalForm"
                    @ok="modalFormOk"
                    :treeId="treeId"
                    :treeTitle="treeTitle"
                ></model-template-modal> -->
            </a-card>
        </a-col>
    </a-row>
</template>
<script>
// import StandardTree from "@/components/tree/StandardTree";
// // import CommonTable from "@/components/table/CommonTable";
// import { TableMixin } from "@/mixins/TableMixin";
// import { postAction } from "@/components/cqgs/api/manage";
// import ModelTemplateModal from "./modules/ModelTemplateModal";

export default {
    name: "EntityTemplate",
    components: {
        // StandardTree,
        // // CommonTable,
        // ModelTemplateModal,
    },
    // mixins: [TableMixin],
    data() {
        return {
            describe: "实体模板",
            isCollapse: true,
            treeData: "",
            treeOrigin: [],
            treeTitle: "实体模板",
            treeId: "",
            paramRequrie: {},
            queryParam: {},
            // 请求api
            url: {
                tree: "dataModules/moduleTemplate/queryModuleTemplate", // 目录的查询
                list: "dataModules/moduleTemplate/slicedQueryModuleTemplate",
                delete: "dataModules/moduleTemplate/deleteModuleTemplate",
                updateStatus: "dataModules/moduleTemplate/updateModuleTemplateStatus",
                updateSequence: "dataModules/moduleTemplate/updateModuleTemplateSequence",
                searchById: "dataModules/moduleTemplate/loadModuleTemp",
            },
            apim: {
                add: "dataModules/moduleTemplate/insertModuleTemplate",
                edit: "dataModules/moduleTemplate/updateModuleTemplate",
                delete: "dataModules/moduleTemplate/deleteModuleTemplate",
            },
            scroll: { x: 900, y: "calc(100vh - 374px)" },
            toggleSearchStatus: false,
            //超长省略格式如下两行
            ellipsis: ["aliasName", "description"],
            // 自定义渲染样式的列名
            slotColums: ["createStatus"],
            paramRequrie: {
                parentId: "root",
                nodeKindId: "2",
            },
            columns: [
                {
                    title: "模板名称",
                    align: "center",
                    dataIndex: "name",
                    key: "name",
                    scopedSlots: { customRender: "name" },
                },
                {
                    title: "模板编码",
                    align: "center",
                    dataIndex: "code",
                    width: 250,
                    key: "code",
                    scopedSlots: { customRender: "code" },
                },
                {
                    title: "全路径",
                    align: "center",
                    dataIndex: "fullName",
                    width: 250,
                    key: "fullName",
                    scopedSlots: { customRender: "fullName" },
                },
                {
                    title: "排序号",
                    align: "center",
                    dataIndex: "sequence",
                    key: "sequence",
                    scopedSlots: { customRender: "sequence" },
                    width: 80,
                },
                {
                    title: "状态",
                    align: "center",
                    dataIndex: "flag",
                    key: "flag",
                    scopedSlots: { customRender: "status" },
                    width: 60,
                },
                // {
                //     title: "操作",
                //     dataIndex: "action",
                //     key: "action",
                //     scopedSlots: { customRender: "action" },
                //     align: "center",
                //     fixed: "right",
                //     width: 170,
                // },
            ],
        };
    },
    created() {
        this.queryTreeList();
        this.loadData(1);
        console.log(this.dataSource);
    },
    methods: {
        handleTableField(record) {
            this.$refs.modalSetting.open(record);
        },
        // 树的展开折叠
        isShow() {
            this.isCollapse = !this.isCollapse;
        },
        // 树的查询
        queryTreeList() {
            postAction(this.url.tree, { nodeKindId: "1" }).then((res) => {
                if (res.success) {
                    this.treeOrigin = res.data;
                    console.log("this.treeData", res.data);
                    this.treeData = this.treeFormat(this.treeOrigin);
                    console.log("this.treeData", this.treeData);
                    this.$refs.treeref.commonRequestThen(this.treeData);
                }
            });
        },
        treeFormat(treeData) {
            let treeOrigin = JSON.parse(JSON.stringify(treeData));
            treeOrigin.push({
                id: "root",
                title: "模板分类",
                name: "模板分类",
                key: "root",
                slots: {
                    icon: "1",
                },
            });
            return treeOrigin.filter((father) => {
                father.key = father.id;
                father.title = father.name;
                let branchArr = treeOrigin.filter((child) => {
                    if (father.id == child.parentId) {
                        return child;
                    }
                }); //返回每一项的子级数组
                branchArr.length > 0 ? (father.children = branchArr) : ""; //如果存在子级，则给父级添加一个children属性，并赋值
                if(father.children && father.id!="root"){
                    father.slots = {
                        icon: "6",
                    };
                }else if(!father.children&&father.id!="root"){
                    father.slots = {
                        icon: "7",
                    };
                }
                return father.id == "root"; //返回第一层
            });
        },
        // 根据不同的树节点查询系统参数列表
        handleTreeId(params) {
            let { treeId, treeTitle } = params;
            this.treeId = treeId;
            this.treeTitle = treeTitle;
            this.paramRequrie.parentId = this.treeId;
            this.loadData(1);
        },
    },
};
</script>