
<template>
    <div class="page">
        <LayoutTable :data='tableData' :config='tableConfig' notPagination notDel >
            <div>
                <el-tree
                        :data="tree"
                        :props="treeProps"
                        :load="loadNode"
                        lazy>
                    <span style="width:100%" slot-scope="{ node, data }">
                        <span >{{ node.label }}</span>
                        <span style="float:right;">
                          <el-button
                                  icon="el-icon-plus"
                                  style="padding:3px 10px"
                                  round
                                  @click="() => addChild(data)">新增
                            </el-button>
                            <el-button
                                    icon="el-icon-edit"
                                    type="primary"
                                    style="padding:3px 10px"
                                    round
                                    @click="() => editChild(data)"> 编辑
                            </el-button>
                        </span>
                      </span>
                </el-tree>
            </div>
        </LayoutTable>
    </div>
</template>

<script>
import table from "@/assets/mixins/table";

export default {
    mixins: [table],
    methods: {
        async loadNode(node, resolve) {
            if(node.level === 0) return
            let res = await this.$post('/area/getAreaByParentId', {
                'query.parentId': node.data.id,
                'pageInfo.prePageResult': -1
            });
            resolve(this.clean(res.data.result));
        },
        clean(data) {
            return data.map(i=>{
                return {
                    name: i.name,
                    children: [],
                    id: i.id,
                    isLeaf: i.level > 2
                }
            });
        },
        afterRender({result}) {
            this.tree = result;
        },
        addChild(data) {
            this.$router.push({
                path: this.pageInfo.add,
                query: { pid: data.id }
            });
        },
        editChild(data) {
            this.$router.push({
                path: this.pageInfo.edit,
                query: Object.assign({}, {id: data.id}, this.query)
            })
        }
    },
    data() {
        return {
            tree:[],
            openIds: [],
            treeProps: {
                children: 'children',
                label: 'name',
                isLeaf: 'isLeaf',
            },
            urls: {
                del: "/area/disable"
            },
            query: {
                pageInfo: {
                    prePageResult: -1
                }
            },

            config: {
                search: [
                    {
                        name: "name",
                        type: "text",
                        label: "名称"
                    },
                    {
                        name: "status",
                        type: "select",
                        label: "是否启用"
                    }
                ],
                columns: [
                    {
                        type: "selection",
                        width: 60
                    },
                    {
                        label: "区域名称",
                        width: 200,
                        formatter: (row, col, val, index) => {
                            const width = `width: ${row.deep *
                                18}px;height: 20px;display: inline-block;`;
                            return (
                                <div>
                                    <span style={width} />
                                    {row.hasChild ? (
                                        <i
                                            onClick={() =>
                                                this.loadArea(row)
                                            }
                                            class={
                                                row.open
                                                    ? "el-icon-caret-bottom"
                                                    : "el-icon-caret-right"
                                            }
                                        >
                                            {row.name}
                                        </i>
                                    ) : (
                                        <span>{row.name}</span>
                                    )}
                                </div>
                            );
                        }
                    },
                    {
                        prop: "id",
                        label: "区域ID"
                    },

                    {
                        prop: "parentId",
                        label: "上级区域ID"
                    },
                    {
                        prop: "name",
                        label: "区域名称"
                    },
                    {
                        prop: "level",
                        label: "区域级别",
                        width: 70,
                        formatter: this.formatter
                    },
                    {
                        prop: "code",
                        label: "区域编码"
                    },
                    // {
                    //   prop: "contactsPeople",
                    //   label: "区域负责人"
                    // },

                    // {
                    //   prop: "contactsMobile",
                    //   label: "区域负责人电话"
                    // },
                    {
                        prop: "status",
                        label: "启用",
                        formatter: this.formatter
                    },
                    {
                        prop: "remark",
                        label: "描述"
                    },
                    {
                        label: "操作",
                        width: 180,
                        formatter: row => {
                            return (
                                <div>
                                    <el-button
                                        icon="el-icon-plus"
                                        size="mini"
                                        round
                                        onClick={() => {
                                            this.addChild(row);
                                        }}
                                    >
                                        新增
                                    </el-button>{" "}
                                    <table-buttons
                                        row={row}
                                        onEdit={this.toEdit}
                                        noDel
                                    />
                                </div>
                            );
                        }
                    }
                ]
            }
        };
    }
};
</script>
