<template>
    <div>
        <div v-for="(child, index) in node" :key="child.id" style="margin-left: 20px" class="treeStyle">
            <div style="display: flex" :id="child.id">
                <div class="dashedSty">
                    <span class="hasMore_shu" :style="index+1 !== node.length ? 'height: 30px' : 'height: 18px'"></span>
                    <span class="hasMore_heng"></span>
                </div>
                <div style="display: flex;cursor:pointer">
                    <div v-if="showCheckbox">
                        <div class="changeradio" v-if="child.showCheck" @click.stop="funCheckChange(child, node)">
                            <el-icon><Select /></el-icon>
                        </div>
                        <div class="radio" v-else @click.stop="funCheckChange(child, node)"></div>
                    </div>
                    <!-- <span :class="child.showSpan ? 'changenodeLabel' : 'nodeLabel'"
                        @click.stop="funCurrentChange(child, node)">{{child.label}}</span> -->
                    <el-dropdown ref="dropdown1" size="small" trigger="contextmenu" @command="funCommand"
                        style="margin-right: 30px"
                        :class="!node.expanded || (node.isLeaf && !node.isCurrent) ? '' : 'eldropdownCla'">
                        <span :class="child.showSpan ? 'changenodeLabel' : 'nodeLabel'"
                            @click.stop="funCurrentChange(child, node)">{{child.label}}</span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item class="text-[#409EFF]" v-if="dropdownMenu.includes('save')"
                                    :command="{ type: 'save', child, node }">保存</el-dropdown-item>
                                <el-dropdown-item class="text-[#409EFF]"
                                    v-if="child.childs && child.childs.length && dropdownMenu.includes('export')"
                                    :command="{ type: 'export', child, node }">导出
                                </el-dropdown-item>
                                <el-dropdown-item class="text-[#F56C6C]" v-if="dropdownMenu.includes('delete')"
                                    :command="{ type: 'delete', child, node }">删除</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div>
            <tree-node :node="child.children" :data="node" v-if="child.children.length>0" :show-checkbox="showCheckbox">
            </tree-node>
        </div>

    </div>
</template>

<script>
    export default {
        name: 'treeNode',
        props: {
            node: {
                type: Array,
                default: () => {
                    return [];
                },
            },
            data: {
                type: Object,
                default: () => {
                    return {};
                },
            },
            showCheckbox: {
                type: Boolean,
                default: () => {
                    return false;
                },
            },
            dropdownMenu: {
                type: Array,
                default: () => {
                    return ['export',
                        'delete',
                    ];
                },
            },
        },
        data() {
            return {};
        },
        methods: {
            funCurrentChange(current, node) {
                if (current && node && node.length > 0) {
                    node.forEach(it => {
                        it.showSpan = false
                        if (it.id === current.id) {
                            it.showSpan = !it.showSpan
                        }

                        function childFn(it) {
                            if (it.children && it.children.length > 0) {
                                it.children.forEach(iv => {
                                    iv.showSpan = false
                                    childFn(iv)
                                })
                            }
                        }
                        childFn(it)
                    })
                }
                if (this.data && this.data.length > 0) {
                    this.data.map(o => {
                        o.showSpan = false
                    })
                }
                this.$parent.funCurrentChange(current, null)
            },
            funCheckChange(current, node) {
                if (current && node && node.length > 0) {
                    node.forEach(it => {
                        it.showCheck = false
                        if (it.id === current.id) {
                            it.showCheck = !it.showCheck
                        }

                        function childFn(it) {
                            if (it.children && it.children.length > 0) {
                                it.children.forEach(iv => {
                                    iv.showCheck = false
                                    childFn(iv)
                                })
                            }
                        }
                        childFn(it)
                    })
                }
                if (this.data && this.data.length > 0) {
                    this.data.map(o => {
                        o.showCheck = false
                    })
                }
                this.$parent.funCheckChange(current, current)
            },
            async funCommand({
                type,
                data,
                node
            }) {
                switch (type) {
                    case 'save':
                        /**该保存功能目前暂用于风电场, combine页 */
                        if (this.type !== 'wind') {
                            return false
                        }
                        ElMessageBox.confirm("确认保存当前节点的拟合功率?", "保存", {
                            confirmButtonText: "确认",
                            cancelButtonText: "取消",
                            type: "warning",
                        }).then(async () => {
                            let saveArr = [];
                            const repeatArr = (arr, saveArr) => {
                                for (const unit of arr) {
                                    if (unit.childs.length) {
                                        saveArr.push(...unit.childs.map((o) => o.id));
                                    } else if (unit.children.length) {
                                        repeatArr(unit.children, saveArr);
                                    }
                                }
                            };
                            if (data.childs.length) {
                                saveArr = data.childs.map((o) => o.id);
                            } else if (data.children.length) {
                                repeatArr(data.children, saveArr);
                            }
                            let res = {
                                code: 500
                            }
                            res = await httpRequest.get("/power/fitting/curve/save", {
                                params: {
                                    ids: saveArr.join(",")
                                },
                            }); //删除当前节点

                            if (res.code === 200) {
                                ElMessage.success(res.msg);
                            }
                        });
                        break;
                    case "export":
                        ElMessageBox.confirm("确认导出当前节点的所有数据?", "导出", {
                            confirmButtonText: "确认",
                            cancelButtonText: "取消",
                            type: "warning",
                        }).then(() => {
                            debugger

                            const a = document.createElement("a");
                            let childs = []
                            childs = this.type === 'wind' ? data.childs.map((o) => o.id) : data.childs.map(
                                (o) => o.path)
                            const url = this.type === 'wind' ? '/data/option/download?ids=' :
                                '/export/files?filename='
                            a.href =
                                // config.baseURL + url + childs.join(",");
                                process.env.VUE_APP_GENERAT_URL + url + childs.join(",");
                            a.download = "";
                            a.target = '_blank'
                            a.click();
                        });
                        break;
                    case "delete":
                        ElMessageBox.confirm("确认删除当前节点的所有数据?", "删除", {
                            confirmButtonText: "确认",
                            cancelButtonText: "取消",
                            type: "warning",
                        }).then(async () => {
                            let deleteArr = [];
                            const repeatArr = (arr, deleteArr) => {
                                for (const unit of arr) {
                                    if (unit.childs.length) {
                                        deleteArr.push(...unit.childs.map((o) => this.type ===
                                            'wind' ? o.id : o.path));
                                    } else if (unit.children.length) {
                                        repeatArr(unit.children, deleteArr);
                                    }
                                }
                            };
                            if (data.childs.length) {
                                deleteArr = data.childs.map((o) => this.type === 'wind' ? o.id : o
                                    .path);
                            } else if (data.children.length) {
                                repeatArr(data.children, deleteArr);
                            }
                            let res = {
                                code: 500
                            }
                            if (this.type === 'wind') {
                                res = await httpRequest.get("/data/option/delete", {
                                    params: {
                                        ids: deleteArr.join(",")
                                    },
                                }); //删除当前节点
                            } else {
                                res = await httpRequest.delete("/delete/files", {
                                    data: {
                                        filename: deleteArr.join(",")
                                    },
                                }); //删除当前节点
                            }
                            if (res.code === 200) {
                                ElMessage.success(res.msg);
                                this.$emit("refresh");
                            }
                        });

                        break;
                }
            },
        }
    };
</script>
<style lang="less">
    .treeStyle {
        height: 30px;

        .radio {
            position: relative;
            top: 10px;
            width: 14px;
            height: 14px;
            background: #CBCCD1;
            border-radius: 3px;
            border: 1px solid #7C808C;
            margin-right: 10px;
        }

        .changeradio {
            position: relative;
            top: 10px;
            width: 15px;
            height: 15px;
            background: #5473E8;
            border-radius: 3px;
            margin-right: 10px;

            .el-icon {
                position: absolute;
                top: 4px;
                left: 2px;
                color: #fff;
                width: 10px;
                height: 8px;
            }
        }

        .nodeLabel {
            position: relative;
            top: 2px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 14px;
            color: #121212;
            line-height: 30px;
            width: 100%;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        .changenodeLabel {
            position: relative;
            top: 2px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 14px;
            color: #5473E8;
            line-height: 30px;
            padding: 0 10px 0 0;
            background: #FFFFFF;
            box-shadow: 0px 0px 3px 0px rgba(83, 86, 94, 0.23);
            border-radius: 5px;
            border: 1px solid rgba(84, 115, 232, 0.3);
            width: 100%;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        img {
            width: 30px;
            height: 30px;
        }

        .dashedSty {
            width: 20px;
            height: 30px;
            position: relative;

            .hasMore_shu {
                position: absolute;
                top: 0;
                left: 5px;
                display: inline-block;
                width: 1px;
                height: 30px;
                border-left: 1px dashed #565D70;
            }

            .hasMore_heng {
                width: 10px;
                height: 1px;
                position: absolute;
                top: 17px;
                left: 7px;
                border-top: 1px dashed #565D70;
            }
        }
    }
</style>