<template>
    <div class="hide-features">
        <div style="padding: 0px 10px 10px" v-show="hideParts.length > 0">
            <el-button @click="delAllDelList">删除所有</el-button>
        </div>
        <div class="sel-list scroll hide-list" :key="hideEl">
            <div v-for="(it, idx) in hideParts" :key="idx" class="div-sel-item">
                <el-tooltip placement="bottom" :content="it.info">
                    <div class="sel-item-info">{{ it.info }}</div>
                </el-tooltip>
                <el-button link @click="delHideItem(idx)">删除</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import {
    getModelFeatureInfos,
} from "@/api/bim/bimModel";
export default {
    props: {
        me: {
            type: Object,
            default: () => ({}),
        },

    },
    data() {
        return {
            hideParts: [],
            hideEl: 0,
        }
    },
    methods: {
        delAllDelList() {
            this.$modal.confirm("确定删除吗？").then(() => {
                api.Feature.setVisible(this.hideParts.map(it => it.featureId).join("#"), true);
                this.hideParts = [];
                this.hideEl++;
            });
        },
        delHideItem(idx) {
            api.Feature.setVisible(this.hideParts[idx].featureId, true);
            this.hideParts.splice(idx, 1);
        },
        doHideFeatures() {
            let that = this;
            api.Public.clearHandler();
            api.Feature.getByEvent(false);
            api.Feature.getByEvent(true, async (n) => {
                if (n && n["id"]) {
                    let featureId = n.id;
                    let datas = await that.getServerFeatureInfos(that, [featureId]);
                    datas.forEach(it => {
                        that.hideParts.push(it);
                    });
                    //that.hideParts.push(featureId);
                    api.Feature.setVisible(featureId, false);
                    that.hideEl++;
                }
            });
        },
        async getServerFeatureInfos(that, ids) {
            if (ids.length == 0) {
                return;
            }
            let tmps = ids[0].split("^");
            if (tmps.length < 2) {
                return;
            }
            let modelId = tmps[0];
            let externalIds = ids.map((it) => it.split("^")[1]);
            let res = await getModelFeatureInfos(modelId, externalIds);
            return (res.data || []).map((o) => {
                o = this.convertFeatureInfo(o, modelId);
                return o;
            });
        },
        convertFeatureInfo(o, modelId) {
            o.modelId = modelId;
            o.featureId = o.modelId + "^" + o.externalId;
            o.name = o.name || "";
            o.name = o.name.replaceAll('"', "").replaceAll("'", "").replaceAll("\\", "");
            o.info = `[${o.externalId}]${o.groupname}-${o.name}`;
            return o;
        }
    }
}
</script>

<style lang="scss">
.hide-features {
    padding: 0px 0px 20px;
    height: 80vh;
    .sel-list {
        padding: 0px 10px 10px;
        height: 100%;
        overflow-y: auto;

        &.hide-list {
            height: calc(100% - 40px);
        }

        .div-sel-item {
            background-color: #f7f7f975;
            position: relative;
            color: #555;
            line-height: 30px;
            padding: 0px 10px;
            margin-top: 5px;

            .sel-item-info {
                width: calc(100% - 40px);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                cursor: pointer;
            }

            .el-button {
                position: absolute;
                right: 10px;
                top: 4px;
                color: #f40606;
            }
        }
    }
}
</style>