<template>
    <el-container class="home">
        <!-- 顶部导航栏 -->
        <el-header class="header">
            <Select width="200" radius @change="testClick" :selectdata="dataSelect3" :placeholder="'请选择'" :hideClear="true" />
            <DropDownButton
                @click="createCanvas"
                type="primary"
                drop-down-type="split-drop"
                interactive="tap"
                :drop-down-list="dropDownList"
                @input="batchCreateCanvas"
                >新建画布</DropDownButton
            >
            <!-- <el-popover placement="bottom" width="320" v-model="popVisible" popper-class="createPopper" trigger="manual">
                <p>点击这里即可快速创建画布。</p>
                <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="popVisible=false">我知道了</el-button>
                </div>
            </el-popover> -->
        </el-header>
        <!-- body部分 -->
        <el-container class="bodys">
            <!-- 左侧树状导航栏部分 -->
            <el-aside class="aside" width="240px">
                <left-folder @changeFolder="changeFolder"></left-folder>
                <!-- <leftAsideTree ref="leftAsideTree" @changeNode="changeNode" @noTree="(noTreeFlag = false), (popVisible = true)"></leftAsideTree>
                <div class="recycle" @click="showRecycleDialog">
                    <img :src="require('@/assets/images/recycle.png')" />
                    <span>回收站</span>
                </div> -->
            </el-aside>
            <!-- 展示部分 -->
            <el-main class="main">
                <div class="main-head" v-if="noTreeFlag">
                    <div class="showType" v-show="!selectCard.length">
                        <el-radio-group v-model="isPub" size="small" @change="changePub">
                            <el-radio-button :label="1">已发布</el-radio-button>
                            <el-radio-button :label="0">未发布</el-radio-button>
                        </el-radio-group>
                        <div class="head-right">
                            <el-input
                                placeholder="搜索"
                                prefix-icon="el-icon-search"
                                size="small"
                                v-model="queryText"
                                @keyup.native.enter="changeQueryText"
                                clearable
                                @clear="changeQueryText"
                            >
                            </el-input>
                            <!-- 不显示筛选下拉框 -->
                            <!-- <Dropdown class="Dropdown" v-model="selVal" :data="dataSelect">
                                <span class="drop-text">{{ selText }}</span>
                            </Dropdown> -->
                        </div>
                    </div>
                    <div class="showAction" v-show="selectCard.length">
                        <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
                        <span style="margin-left: 10px">|</span>
                        <span class="sum"
                            >已选择<span style="color: #252b30; margin: 0 5px">{{ selectCard.length }}</span
                            >项目</span
                        >
                        <el-button size="mini" @click="groupMove">移动到</el-button>
                        <el-button size="mini" @click="groupDownload" v-if="isPub">下载</el-button>
                        <el-button size="mini" @click="groupDelete">删除</el-button>
                        <i class="el-icon-close" style="float: right; line-height: 28px; margin-right: 5px" @click="handleCheckAllChange(false)"></i>
                    </div>
                </div>
                <div class="main-body" v-loading="cardLoading">
                    <div class="has-data-body" v-if="cardTree.length">
                        <div class="building" v-for="buildingData in cardTree" :key="buildingData.buildingId">
                            <p class="buinding-name"><span class="border-left"></span> {{ buildingData.buildingName }}</p>
                            <div class="floor" v-for="floor in buildingData.floorList" :key="floor.floorId">
                                <p class="floor-name">{{ floor.floorName }}</p>
                                <template v-for="t in floor.floor">
                                    <topoImageCard
                                        :isPub="isPub"
                                        :data="t"
                                        :key="`${Math.random()}_${t.id}`"
                                        @changeCheck="changeCheck"
                                        @rename="rename"
                                        @publishSuc="updateSuc"
                                        @moveTo="moveTo"
                                        @delete="deleteGraph"
                                        @editTag="editTag"
                                        @toEdit="toEdit"
                                        @download="download"
                                    ></topoImageCard>
                                </template>
                            </div>
                        </div>
                    </div>
                    <div class="no-data-body" v-else style="margin-top: 112px">
                        <img src="@/assets/images/no-data.png" style="width: 116px; height: 116px" />
                        <p style="font-size: 16px; margin-top: 15px">暂无数据</p>
                    </div>
                </div>
            </el-main>
        </el-container>

        <!-- 创建画布 -->
        <createCanvasDialog ref="createCanvasDialog"></createCanvasDialog>
        <!-- <createGraphDialog ref="createGraphDialog"></createGraphDialog> -->
        <!-- 重命名 -->
        <rename ref="rename" :isPub="isPub" @updateSuc="updateSuc"></rename>
        <!-- 移动到 -->
        <move ref="move" :isPub="isPub" @moveSuc="moveSuc"></move>
        <!-- 删除二次确认 -->
        <deleteDialog ref="deleteDialog" :isPub="isPub" @deleteSuc="deleteSuc"></deleteDialog>
        <!-- 修改标签 -->
        <tagDialog ref="tagDialog" :isPub="isPub" @updateSuc="updateSuc"></tagDialog>
        <!-- 回收站全屏弹窗 -->
        <recycle ref="recycle" @recycleDialogClose="recycleDialogClose"></recycle>
        <!-- <equipment-deatil /> -->
    </el-container>
</template>

<script>
import { Select, Dropdown, DropDownButton } from "meri-design";
import leftFolder from "@/components/homeView/leftFolder.vue";
import leftAsideTree from "@/components/homeView/leftAsideTree.vue";
import topoImageCard from "@/components/homeView/topoImageCard.vue";
import { queryDraftsGraph, queryPubGraph } from "@/api/home";
import rename from "@/components/homeView/rename";
import move from "@/components/homeView/move";
import deleteDialog from "@/components/homeView/deleteDialog";
import tagDialog from "@/components/homeView/tagDialog";
import recycle from "@/components/homeView/recycle";
import createGraphDialog from "@/components/homeView/createGraphDialog";
import createCanvasDialog from "@/components/homeView/createCanvasDialog";
import { SNetUtil } from "@persagy-web/base";
import equipmentDeatil from "@/components/editview/equipmentDeatil";
export default {
    name: "home",
    // components: { leftAsideTree, createGraphDialog },
    components: {
        Select,
        Dropdown,
        DropDownButton,
        topoImageCard,
        rename,
        move,
        deleteDialog,
        recycle,
        tagDialog,
        createCanvasDialog,
        leftFolder,
        equipmentDeatil,
    },
    data() {
        return {
            dataSelect3: [
                { id: "test1", name: "选择项", sub: "hello111" },
                { id: "test2", name: "单平米", sub: "hola111" },
                {
                    id: "test3",
                    name: "下级分项",
                    sub: "bonjour",
                    divider: true,
                },
                { id: "test4", name: "滑动平均滑动平均", sub: "hi" },
            ], // 项目列表
            dropDownList: [
                {
                    id: "batch",
                    name: "批量新建",
                    disabled: true,
                },
            ],
            selVal: "lastUpdate", // 排序方式
            selText: "按最后修改", // 排序方式文字
            dataSelect: [
                { id: "lastUpdate", name: "按最后修改" },
                { id: "name", name: "按字母顺序" },
                { id: "createTime", name: "按创建时间" },
            ], // 排序选项
            queryText: "", // 搜索文字
            isPub: 1, // 发布类型()
            cardTree: [], // 当前显示的卡片树
            cardList: [], //卡片平铺树
            checkAll: false, // 全选
            selectCard: [], // 当前选中的卡片列表
            isIndeterminate: true, // 全选按钮
            curCategory: {}, // 当前选中的树节点
            noTreeFlag: true, // 左侧树是否有数据-默认有
            popVisible: true,
            categoryName: "", // 跳转编辑页面时分类名称
            imgUrl: "/image-service/common/image_get?systemId=dataPlatform&key=",
            cardLoading: false,
        };
    },
    created() {
        window.vm = this;
        this.changeFolder();
    },
    methods: {
        testClick(data) {
            console.log(data);
        },
        // 创建画布
        createCanvas() {
            this.$refs.createCanvasDialog.showDialog();
        },
        // 批量新建画布
        batchCreateCanvas(val) {
            alert(`批量创建画布${val}`);
        },
        // 创建拓扑图
        createProject() {
            this.$refs.createGraphDialog.showDialog();
        },
        // 选项改变
        changeCheck(v) {
            console.log("%c选项更改:", "color:blue;");
            console.log(JSON.stringify(v, null, 2));
            // 获取该对象在选中数组中的下标(按照id匹配)
            let index = this._.findIndex(this.selectCard, ["id", v.id]);
            if (index !== -1) {
                this.selectCard.splice(index, 1);
            } else {
                this.selectCard.push(v);
            }
            console.log(index);
            this.isIndeterminate = Boolean(this.selectCard.length) && this.selectCard.length < this.cardList.length;
            this.checkAll = this.selectCard.length === this.cardList.length;
        },
        // 全选按钮
        handleCheckAllChange(val) {
            console.log(val);
            let cardTree = [];
            cardTree = this.cardTree.map((building) => {
                building.floorList.map((_floor) => {
                    _floor.floor.map((card) => {
                        card.checked = val;
                    });
                    return _floor;
                });
                return building;
            });
            this.cardTree = cardTree;
            if (val) {
                this.selectCard = this._.cloneDeep(this.cardList);
            } else {
                this.selectCard = [];
            }
            this.isIndeterminate = false;
        },
        // 批量移动到
        groupMove() {
            this.$refs.move.showDialog(this.selectCard);
        },
        // 批量下载
        groupDownload() {
            if (this.selectCard.length) {
                this.selectCard.forEach((t) => {
                    this.download(t);
                });
            }
        },
        // 单独下载
        download(data) {
            if (data.pic) {
                SNetUtil.downLoad(data.name + ".png", this.imgUrl + data.pic);
            } else {
                // this.$message.warning(`${data.name}未绘制`)
            }
        },
        // 删除
        groupDelete() {
            this.$refs.deleteDialog.showDialog(this.selectCard);
        },
        // 重命名
        rename(data) {
            this.$refs.rename.showDialog(data);
        },
        // 移动到
        moveTo(data) {
            this.$refs.move.showDialog([data]);
        },
        // 单独删除
        deleteGraph(data) {
            this.$refs.deleteDialog.showDialog([data]);
        },
        // 更新成功-发布成功
        updateSuc() {
            this.queryGraph();
        },
        // 卡片移动事件
        moveSuc() {
            this.queryGraph();
            // this.$refs.leftAsideTree.getCategoryGraph();
        },
        // 删除成功
        deleteSuc() {
            this.queryGraph();
            // this.$refs.leftAsideTree.getCategoryGraph();
        },
        // 选中节点变化
        changeNode(data) {
            this.curCategory = data;
            this.categoryName = data.name;
            this.queryGraph();
        },
        /**
         * 更改选中的文件夹
         */
        changeFolder(data) {
            // this.queryGraph();
            // TODO:
            let { yfbMocKdata } = require("./mockData");
            // console.log(yfbMocKdata);
            let cardTree = [],
                cardList = [];
            cardTree = yfbMocKdata.content.map((building) => {
                building.floorList.map((_floor) => {
                    _floor.floor.map((card) => {
                        card.checked = false;
                        cardList.push({
                            buildingId: building.buildingId,
                            buildingName: building.buildingName,
                            floorId: _floor.floorId,
                            floorName: _floor.floorName,
                            ...card,
                        });
                        return card;
                    });
                    return _floor;
                });
                return building;
            });
            this.cardTree = cardTree;
            this.cardList = cardList;
            this.cardLoading = false;
        },
        // 发布修改
        changePub() {
            this.queryGraph();
        },
        // 修改标签
        editTag(data) {
            this.$refs.tagDialog.showDialog(data);
        },
        // 输入内容变化
        changeQueryText() {
            this.queryGraph();
        },
        // 回收站点击
        showRecycleDialog() {
            this.$refs.recycle.showDialog();
        },
        // 回收站关闭
        recycleDialogClose() {
            this.queryGraph();
            this.$refs.leftAsideTree.getCategoryGraph();
        },
        // 新建拓扑图成功
        toEdit(data) {
            this.$router.push({
                name: "Editer",
                query: {
                    graphId: data.graphId,
                    id: data.id,
                    categoryName: encodeURI(this.categoryName),
                    isPub: this.isPub,
                },
            });
        },
        /////////////////接口
        // 查询图形信息
        queryGraph() {
            if (!this.curCategory.code) {
                return;
            }
            this.cardLoading = true;
            this.selectCard = [];
            const pa = {
                filters: `categoryId="${this.curCategory.code}"`,
                orders: `${this.selVal} desc`,
            };
            if (this.queryText) {
                pa.filters += `;name contain "${this.queryText}"`;
            }
            /**
             * 已发布,未发布 1:已发布 0:未发布
             */
            if (this.isPub) {
                queryPubGraph(pa).then((res) => {
                    this.cardTree = res.content.map((t) => {
                        t.checked = false;
                        return t;
                    });
                    this.cardLoading = false;
                });
            } else {
                pa.filters += ";state=1";
                queryDraftsGraph(pa).then((res) => {
                    this.cardTree = res.content.map((t) => {
                        t.checked = false;
                        return t;
                    });
                    this.cardLoading = false;
                });
            }
        },
    },
    watch: {
        // 排序方式修改
        selVal(n, o) {
            if (n === o) return;
            this.selText = this.dataSelect.find((d) => d.id === n).name;
            this.selectCard = [];
            this.queryGraph();
        },
    },
};
</script>
<style lang="less" scoped>
.home {
    width: 100%;
    height: 100%;
    .header {
        width: 100%;
        height: 60px;
        background: #f7f9fa;
        padding: 0 16px 0 16px;
        border-bottom: 1px solid #e4e5e7;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .bodys {
        width: 100%;
        height: calc(100% - 60px);
        .aside {
            .recycle {
                line-height: 48px;
                border-top: 1px solid #e4e5e7ff;
                box-sizing: border-box;
                background: #f7f9fa;
                padding-left: 16px;
                cursor: pointer;
                img {
                    width: 16px;
                    height: 16px;
                    margin: -3px 8px 0 0;
                }
            }
        }
        .main {
            width: 100%;
            height: 100%;
            background: #fff;
            padding: 5px 20px;
            box-sizing: border-box;
            .main-head {
                position: relative;
                width: 100%;
                height: 46px;
                margin-bottom: 5px;
                .showType {
                    width: 100%;
                    padding: 7px 0;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    /deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner {
                        color: #0091ff;
                        border-color: #0091ff;
                        background: #e1f2ff;
                    }
                    .head-right {
                        display: flex;
                        align-items: center;
                        .Dropdown {
                            min-width: 100px;
                            margin-left: 20px;
                            .drop-text {
                                font-size: 14px;
                                color: #1f2329;
                                line-height: 16px;
                            }
                        }
                    }
                }
                .showAction {
                    background: #e1f2ff;
                    border-radius: 4px;
                    border: 1px solid #82c7fc;
                    padding: 8px;
                    span.sum {
                        margin: 0 10px;
                        color: #778089;
                    }
                }
            }
            .main-body {
                display: block;
                height: calc(100% - 51px);
                overflow: auto;
                .has-data-body {
                    // 建筑样式
                    .building {
                        // 建筑名称
                        .buinding-name {
                            display: flex;
                            align-items: center;
                            height: 30px;
                            font-size: 16px;
                            font-family: MicrosoftYaHei;
                            color: #1f2329;
                            line-height: 30px;
                            margin-bottom: 12px;
                            // 左边框竖线
                            span.border-left {
                                display: inline-block;
                                width: 2px;
                                height: 20px;
                                background: #0091ff;
                                margin-right: 4px;
                            }
                        }
                        // 楼层样式
                        .floor {
                            // padding-left: 9px;
                            display: flex;
                            flex-wrap: wrap;
                            padding-left: 20px;
                            .floor-name {
                                position: relative;
                                left: -12px;
                                width: 100%;
                                height: 31px;
                                font-size: 16px;
                                font-family: PingFangSC-Regular, PingFang SC;
                                font-weight: 400;
                                color: #646c73;
                                line-height: 31px;
                                margin-bottom: 8px;
                            }
                        }
                    }
                }

                .no-data-body {
                    display: flex;
                    flex-direction: column;
                    // justify-content: center;
                    align-items: center;
                }
            }
        }
    }
    .create-dialog {
        .dialog-bodys {
            width: 367px;
            margin: 0 auto;
        }
    }
    .create-dialog-inner {
        .inner-dialog-body {
            width: 100%;
            display: flex;
            .left {
                flex: 1;
                border-right: 1px solid #ccc;
            }
        }
    }
}
</style>
<style lang="less">
.createPopper.el-popover {
    background: #0091ffff;
    color: #fff;
    border-color: #0091ffff;
    .el-button {
        background: #ffffff;
        border-radius: 4px;
        padding: 5px 8px;
    }
    .popper__arrow::after {
        border-bottom-color: #0091ffff;
    }
}
</style>
