<template>
    <div class="AreaQuery">
        <header class="header">
            <el-row type="flex">
                <el-col :span="4">
                    <el-cascader
                        :options="areaTree"
                        :props="{ checkStrictly: true, children: 'childs', label: 'nodeName' ,value:'id'}"
                        v-model="areaId"
                        @change="selectAreaChange"
                        clearable
                        placeholder="请选择要查看的类型"
                    >
                        <template slot-scope="{ node, data }">
                            <span>{{ data.nodeName }}</span>
                        </template>
                    </el-cascader>
                </el-col>
                <el-col :span="4">
                    <el-input
                        placeholder="请输入内容"
                        @change="search"
                        v-model="searchValue"
                        class="input-with-select"
                    >
                        <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </el-col>
            </el-row>
        </header>
        <section class="section">
            <div v-for="item in childres" :key="item.id" class="item">
                <p>{{ item.nodeName }}</p>
                <div v-if="item.data">
                    <div>
                        <span>温度：</span>
                        <span>{{ item.data.temperature }}℃</span>
                    </div>
                    <div>
                        <span>湿度：</span>
                        <span>{{ item.data.humidity }}</span>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
import { mapActions } from "vuex";

// 区域树 code
const arearCode = "area-info";
// unit
const units = {
    // 扁平化 树
    flatTree(tree) {
        let result = [];
        loop(tree);
        function loop(treeArr) {
            treeArr.forEach(item => {
                if (item["childs"] && item["childs"].length > 0) {
                    loop(item["childs"]);
                }
                delete item["childs"];
                result.push(item);
            });
        }
        return result;
    },
    // 查找苏沪
    findMeAndChildres(arr, id) {
        let result = arr.filter(item => {
            return item["id"] == id || item["parentId"] == id;
        });
        return result;
    }
};

export default {
    name: "AreaQuery",
    data() {
        return {
            areaTree: [],
            areaId: "",
            childres: "",
            searchValue: "",
            flatTreeArr: []
        };
    },
    created() {
        this.getTreeByCode(arearCode);
        // this.getAreaHumiture("555")
        this.getAreaHumiture("733344131971813376");
    },
    methods: {
        ...mapActions(["fetch"]),
        // 通过code获取树
        getTreeByCode(code) {
            this.fetch({
                api: "/publics/treenode/getTreeByCode",
                method: "POST",
                data: { code }, //目前只有一个组织,其他参数调整钟
                success: res => {
                    // this.id = res.id;
                    this.getAreaTree(res.id);
                },
                fail: err => {
                    console.log(err);
                    if (err.errCode == "request_not_authorize") {
                        this.$message({
                            message: "请重新登录",
                            type: "warning"
                        });
                    }
                }
            });
        },
        // 请求 区域树
        getAreaTree(parentId) {
            this.fetch({
                api: "/publics/treenode/listNodeByParent",
                method: "POST",
                data: {
                    parentId,
                    hasSub: true
                },
                success: res => {
                    this.areaTree = res;
                    this.flatTreeArr = units.flatTree(
                        JSON.parse(JSON.stringify(res))
                    );
                },
                fail: err => {
                    if (err.errMsg) this.$message.error(err.errMsg);
                    else this.$message.error("服务器发生异常");
                }
            });
        },
        // 根据区域id查找 区域温湿度
        getAreaHumiture(areaId, nodeName) {
            this.fetch({
                api: "/device/device-mount-point/get-by-areaId",
                method: "GET",
                data: { areaId },
                success: res => {
                    this.childres.forEach((item,index) => {
                        // debugger
                        if (item.id == areaId) {
                            // item.data = res[0].data;
                            let temp = JSON.parse(JSON.stringify(item))
                            temp.data = res[0].data
                            this.$set(this.childres,index,temp)
                        }
                    });
                    
                },
                fail: err => {
                    if (err.errMsg) this.$message.error(err.errMsg);
                    else this.$message.error("服务器发生异常");
                }
            });
        },
        // 区域选择 改变
        selectAreaChange(value) {
            console.log(value);
            this.childres = units.findMeAndChildres(
                this.flatTreeArr,
                value[value.length - 1]
            );
            // 循环查找 自己区域下的温湿度信息
            this.childres.forEach(item => {
                this.getAreaHumiture(item.id, item.nodeName);
            });
        },
        // 搜索
        search() {
            console.log(this.searchValue.trim());
            // debugger
            if (this.searchValue.trim() == "") return;
            let exp = eval("/" + this.searchValue + "/g");
            let tempArr = this.flatTreeArr.filter(item => {
                return exp.test(item.nodeName);
                // debugger
                // console.log(exp.test(item.nodeName))
            });
            console.log(tempArr);
            this.childres = tempArr;
        }
    }
};
</script>

<style lang="scss" scoped>
.AreaQuery {
    .header {
        margin-bottom: 15px;
    }
    .section {
        display: flex;
        flex-wrap: wrap;
        .item {
            width: 200px;
            height: 200px;
            margin: 5px;
            padding: 5px;
            border-radius: 10px;
            box-sizing: border-box;
            border: 1px solid #666;
        }
    }
}
</style>