<template>
    <div class="app-container">
        <div class="area-left">
            <div class="al-top">
                <el-divider direction="vertical" />
                <span>区域架构</span>
            </div>
            <div class="al-tree">
                <div class="boxShadow" @click="active = list[0].id; crud.title = '区域'" />
                <el-tree default-expand-all :data="list" :indent="20" icon-class="#"
                    :props="{ children: 'children', label: 'label' }" @node-click="handleNodeClick">
                    <template slot-scope="{node,data}">
                        <div style="width:100%;" class="treeData"
                            :class="{ activeBlue: active === data.id, activeIndent: node.level === 3 || node.level === 4 }"
                            @click="handleTool(node, data)">
                            <div v-if="node.level !== 1" class="dashedBox">
                                <div class="firstBox" />
                                <div :class="{ dashshow: data.last }" />
                            </div>
                            <div v-if="node.level !== 3">
                                <svg-icon v-if="active !== data.id" style="width: 1rem;height: 1rem;opacity: 0.8;"
                                    :icon-class="node.level === 1 ? 'gongsi' : 'tree-table'" />
                                <svg-icon v-else style="width: 1rem;height: 1rem;opacity: 0.8;"
                                    :icon-class="node.level === 1 ? 'gongsilanse' : 'tree-table'" />
                            </div>
                            <div :title="data.label">{{ data.label }}</div>
                        </div>
                    </template>
                </el-tree>
            </div>
        </div>
        <div class="area-right">
            <!--工具栏-->
            <div class="head-container">
                <div>
                    <el-button v-permission="permission.add" class="filter-item" size="mini" type="primary"
                        icon="el-icon-plus" @click="crud.toAdd">
                        添加{{ crud.title }}
                    </el-button>
                </div>
            </div>
            <!--表单渲染-->
            <el-dialog append-to-body :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0"
                :title="crud.status.title" width="30%">
                <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
                    <el-row :gutter="10">
                        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                            <el-form-item :label="`${crud.title}名称`" prop="name">
                                <el-input v-model="form.name" :placeholder="`请输入${crud.title}名称`"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer" style="margin-top: -30px;">
                    <el-button type="text" @click="crud.cancelCU">取消</el-button>
                    <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">新增</el-button>
                </div>
            </el-dialog>
            <!--表格渲染-->
            <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;">
                <el-table-column :show-overflow-tooltip="true" prop="name" :label="`${crud.title}名称`" />
                <el-table-column :show-overflow-tooltip="true" prop="num" :label="`${crud.title === '区域' ? '景区' : '人员'}数量`" />
                <el-table-column v-if="checkPer(['admin', 'area:edit', 'area:del'])" label="操作" width="115" align="center"
                    fixed="right">
                    <template slot-scope="scope">
                        <udOperation :data="scope.row" :permission="permission" />
                    </template>
                </el-table-column>
            </el-table>
            <!--分页组件-->
            <pagination />
        </div>
    </div>
</template>
<script>
import crudArea from '@/api/system/area'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
const defaultForm = { id: null, name: null, type: 'area' }
export default {
    name: 'Area',
    components: { udOperation, pagination },
    cruds() {
        return CRUD({ title: '区域', url: '/aerocraftAdminApi/emArea', crudMethod: { ...crudArea }, optShow: { add: true } })
    },
    mixins: [presenter(), header(), form(defaultForm), crud()],
    data() {
        return {
            permission: {
                add: ['admin', 'area:add'],
                edit: ['admin', 'area:edit'],
                del: ['admin', 'area:del']
            },
            active: '',
            rules: {
                'name': [
                    { required: true, message: `名称不能为空`, trigger: 'blur' },
                ],
            },
            list: [],
            //     {
            //     id: 1,
            //     label: '爱尚云',
            //     children: [{
            //         id: 2,
            //         label: '北京区域',
            //         children: []
            //     },
            //     {
            //         id: 3,
            //         label: '上海区域',
            //         children: []
            //     },
            //     {
            //         id: 4,
            //         label: '深圳区域',
            //         children: []
            //     },
            //     {
            //         id: 5,
            //         label: '广州区域',
            //         children: [{
            //             id: 6,
            //             label: '白云山景区',
            //             children: []
            //         }, {
            //             id: 7,
            //             label: '白水寨景区',
            //             children: []
            //         }, {
            //             id: 8,
            //             label: '越秀公园景区',
            //             children: []
            //         }]
            //     }]
            // }],
            parentId: '',
            parentName: '',
            parentArr: []
        }
    },
    async created() {
        const id = await this.getTree()
    },
    methods: {
        // 节点点击
        handleNodeClick(data) {
            console.log(data)
        },
        handleTool(node, data) {
            const id = node.level === 4 ? data.parentId : data.id
            this.active = data.id
            console.log(node, 'node', data)
            this.$set(this, 'parentArr', [{
                parentId: data.parentId,
                parentName: data.parentName
            }])
            const type = node.level === 1
            this.crud.title = type ? '区域' : '景区'
            this.form.type = type ? 'area' : 'spot'
            // console.log(this.parentArr, 'parentArr')
            // this.getList(id)
        },
        [CRUD.HOOK.beforeRefresh](crud, form) {
            crud.query.current = crud.page.page;
        },
        getTree() {
            return new Promise(resolve => {
                // tree().then(res => {
                // console.log(res)
                const res = this.list
                const setLast = (data, parentId, parentName, level) => {
                    if (data === null) return
                    return data.map((item, key) => {
                        if (data.length - 1 === key) {
                            return {
                                last: true,
                                ...item,
                                children: setLast(item.children, item.id, item.label, level + 1),
                                parentId,
                                parentName,
                                level
                            }
                        } else {
                            return {
                                last: false,
                                ...item,
                                children: setLast(item.children, item.id, item.label, level + 1),
                                parentId,
                                parentName,
                                level
                            }
                        }
                    })
                }
                console.log(res)

                this.list = setLast(res, '', '', 1)
                this.active = this.active || this.list[0].id
                let arr = []
                const setSelectList = (data) => {
                    data.forEach((item) => {
                        arr = [...arr, item]
                        if (item.children) {
                            setSelectList(item.children)
                        }
                    })
                }
                setSelectList(this.list)
                this.selectList = arr.filter(item => item.level !== 4)
                console.log(this.list, 'this.list', arr)
                resolve(this.active)
            })
            // })
        }
    }
}
</script>
<style scoped lang="scss">
.boxShadow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    z-index: 1000;
    cursor: pointer;
}

.app-container {
    background-color: #f0f2f5;
    display: flex;
    align-items: stretch;
    gap: 20px;
    min-height: 90vh;

    &>>>.el-tree-node__label {
        font-size: 16px !important;
    }

    .area-left,
    .area-right {
        background: #FFFFFF;
        border-radius: 8px;
    }

    .area-left {
        width: 244px;
        padding: 20px;

        .al-top {
            font-size: 16px;
            font-weight: bold;
            color: #333333;

            &::v-deep .el-divider--vertical {
                width: 4.5px;
                height: 23px;
                background-color: #4f5de6;
                margin-left: auto;
            }
        }

        .al-tree {
            margin-top: 20px;
            position: relative;
        }
    }

    .area-right {
        padding: 33px 20px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        flex: 1;
    }
}

.area-left>>>.el-tree-node__content:hover,
.area-left>>>.el-tree-node__content:focus {
    background: #EDEEFC;
    /* color:#4f5de6; */
}

.area-left>>>.el-tree-node__content {
    position: relative;
    /* padding:12px 9px; */
    height: 40px;
    border-radius: 5px;
}

.treeData {
    display: flex;
    align-items: center;
    font-size: 14px;
    gap: 5px;
}

.activeBlue {
    color: #4f5de6;
    /* background: #EDEEFC;
  width:100%;
  height:40px;
  border-radius: 5px; */
    transition: all 0.3s;
}

.activeBlue:after {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 10;
    display: block;
    content: '';
    background: #4f6de61a;
    border-radius: 5px;
}

.dashedBox {
    height: 40px;
    display: flex;
    flex-direction: column;
}

.dashedBox>div {
    flex: 1;
    width: 15px;
    border-left: 1px dashed #ddd;
}

.dashedBox .firstBox {
    border-bottom: 1px dashed #ddd;
}

.dashshow {
    border: none !important;
}

.activeIndent {
    padding-left: 10px;
}
</style>
