<template>
    <div class="way-filter">
        <!-- v-model="waySelected" -->
        <el-cascader v-model="waySelected" :options="options" placeholder="全国" size="mini"
            :popper-append-to-body="false" :props="elProps" :clearable="isClearable" popper-class="wayPoper"
            ref="cascader" style="width: 230px"></el-cascader>
        <div class="dateTime">
            <el-date-picker v-model="appDate" type="month" size="small" :clearable="false" popper-class="n_date__popper"
                style="width: 128px; cursor: pointer" @change="handelDateApp" :editable="false"></el-date-picker>
        </div>
    </div>
</template>
<script lang="jsx">
import { mapState, mapMutations } from "vuex";
export default {
    props: {
        level: {
            type: Number,
            default: 3,
        },
        dimension: {
            type: String,
            defalit: "CQ",
        },
    },
    computed: {
        ...mapState({
            selectRoadId: (state) => state.road.selectRoadId,
            allRoads: (state) => state.road.allRoads,
        }),

        waySelected: {
            get() {
                JSON.stringify(localStorage.setItem("sousuId", this.selectRoadId));
                return this.selectRoadId || [];
            },
            set(v) {
                const id = v || [];
                let selectItem = {};
                this.setSelectRoadId(id);
                if (id.length > 0) {
                    selectItem = this.allRoads.filter(
                        (item) => item.organizationId == id[id.length - 1]
                    )[0];
                }
                let selectProvince = "";
                if (selectItem.level === "1") {
                    selectProvince = selectItem.organizationId;
                } else if (selectItem.level === "2") {
                    selectProvince = selectItem.pnode;
                } else if (selectItem.level === "3") {
                    selectProvince = selectItem.provinceId;
                }
                this.setSelectProvince(selectProvince); // 设置选中省份
                this.setSelectLevel(selectItem?.level || 0);
                this.setSelectCode(selectItem?.authCode || 0);
                this.getSelectAllRoad(selectItem);
            },
        },
        options() {
            return toTree(this.allRoads, this.level);
        },
        changeDateTime() {
            return this.$store.state.appDate;
        },
    },
    data() {
        return {
            appDate: "",
            elProps: {
                label: "organizationName",
                value: "organizationId",
                checkStrictly: true,
                expandTrigger: "hover",
            },
            isClearable: true,
        };
    },

    methods: {
        ...mapMutations("road", [
            "setSelectRoadId",
            "setSelectLevel",
            "setSelectCode",
            "setSelectAllRoad",
            "setSelectProvince",
        ]),
        changeProvince(id) {
            if (id) {
                this.waySelected = [id];
                this.setSelectLevel(1);
                this.setSelectRoadId([id]);
            } else {
                this.waySelected = [];
                this.setSelectLevel(0);
                this.setSelectRoadId([]);
            }
        },

        //   getDate(){
        //  this.appDate =  this.$store.state.appDate
        //  this.handelDate()
        //   },
        handelDateApp(val) {
            this.$store.commit("changeDate", val);
        },
        getSelectAllRoad(selectItem) {
            const data =
                (Object.keys(selectItem).length && [selectItem]) || this.allRoads;
            if (!data.length) {
                return;
            }
            const selectId = [];
            const getIds = (arr) => {
                arr.map((item) => {
                    if (Number(item.level) === 3) {
                        selectId.push(item.organizationId);
                    } else {
                        item.children && getIds(item.children);
                    }
                });
            };
            getIds(data);
            this.setSelectAllRoad(selectId);
        },
        initSelectOrg() {
            this.waySelected = [];
            const { allRoads } = this;
            if (!allRoads || allRoads.length < 1) {
                return;
            }
            if (this.$route.query?.road) {
                this.waySelected = [this.$route.query.road];
            } else {
                const level3Items = allRoads.filter((item) => item.level === "3");
                const level2Items = allRoads.filter((item) => item.level === "2");
                const level1Items = allRoads.filter((item) => item.level === "1");
                if (level3Items.length === 1) {
                    this.waySelected = [
                        level1Items[0].organizationId,
                        level2Items[0].organizationId,
                        level3Items[0].organizationId,
                    ];
                } else if (level2Items.length === 1) {
                    this.waySelected = [
                        level1Items[0].organizationId,
                        level2Items[0].organizationId,
                    ];
                } else if (level1Items.length === 1) {
                    this.waySelected = [level1Items[0].organizationId];
                }
            }
        },
    },
    mounted() {
        this.appDate = this.$store.state.appDate;
        const orglen = localStorage.getItem("orglen");
        const orgId = localStorage.getItem("orgId");
        this.initSelectOrg();
        this.dimension === "CN";
    },
    watch: {
        changeDateTime(val) {
            this.appDate = val;
        },
        allRoads: {
            handler(val) {
                this.initSelectOrg();
            },
            immediate: true,
        },
        "$route.query.road": {
            handler(val) {
                this.initSelectOrg();
            },
            immediate: true,
        },
        "$route.query.month": {
            handler(val) {
                val && this.handelDateApp(new Date(val));
            },
            immediate: true,
        },
    },
};

function toTree(data, level) {
    let result = [];
    if (!Array.isArray(data)) {
        return result;
    }
    let map = {};
    data.forEach((item) => {
        delete item.children;
    });

    data.forEach((item) => {
        map[item.organizationId] = item;
    });
    data.forEach((item) => {
        let parent = map[item.pnode];
        if (parent) {
            (parent.children || (parent.children = [])).push(item);
        } else {
            result.push(item);
        }
    });
    const newre = [result[0]];
    return result;
}
</script>
<style lang="postcss" scoped>
.way-filter {
    display: flex;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: 12px;
}

::v-deep(.el-input__inner) {
    color: #fff;
    background: rgba(5, 15, 45, 0.5);
    border: 1px solid #2c4e91;
    height: 30px;
    cursor: pointer;
    line-height: 32px;

    &:hover {
        border: 1px solid #7ebee9;
    }
}

.dateTime {
    margin-left: 15px;
    cursor: pointer;
}
</style>
<style lang="postcss">
.wayPoper {
    background: rgba(5, 15, 45, 0.7) !important;
}

.el-cascader-node {
    color: #fff;
}

.el-cascader-node.is-selectable.in-active-path {
    color: rgba(59, 130, 246, 1) !important;
}

.el-radio__label {
    display: inline-block;
    width: 200px;
    height: 34px;
    position: absolute;
    top: -5px;
}
</style>
