<template>
    <div id="cascaderMap">
        <span class="buildFloor" style="margin-right: 12px">设备类型</span>
        <el-cascader
            v-model="value"
            placeholder="请选择"
            filterable
            clearable
            :props="props"
            :options="options"
            :style="isWidth ? '' : 'width:160px;'"
            size="small"
            @change="changeVal"
        >
            <template slot-scope="{ data }">
                <span>{{ data.name }}</span>
                <i v-if="data.flag" class="iconfont icon-dangqian" style="color: #E6A23C;vertical-align: bottom;"></i>
            </template>
        </el-cascader>
    </div>
</template>
<script>
import { mapGetters } from "vuex";
import { getEquipTypeTree } from "@/api/object/equip";

export default {
    name: "getCode",
    props: {
        isWidth: {
            type: Boolean,
            default: true,
        },
        all: {
            type: Boolean,
            default: false,
        },
        //系统
        params: Object,
    },
    computed: {
        ...mapGetters("layout", ["projectId"]),
    },
    data() {
        return {
            value: [],
            options: [],
            props: {
                value: "code",
                label: "name",
                children: "children",
            },
            falg: true,
            content: [],
        };
    },
    created() {
        this.getData();
    },
    watch: {
        projectId() {
            this.value = [];
            this.getData();
        },
    },
    methods: {
        setValue(val) {
            this.value = val;
        },
        //修改val
        changeVal(val) {
            this.$emit("change", val[1]);
        },
        /**
         * 获取当前项目下的系统-设备类型树
         */
        getData() {
            getEquipTypeTree({}, (res) => {
                if (res.content) {
                    this.options = res.content;
                    this.optionSort();
                } else {
                    this.options = [];
                }
            });
        },
        // 系统排序
        optionSort() {
            console.log(this.params);
            const index = this.options.findIndex((item) => {
                return item.code === this.params.SysType;
            });
            //如果存在当前系统,将当前系统置顶
            if (index !== -1) {
                const currentSys = this.options.splice(index, 1)[0];
                currentSys.flag = true; //添加当前系统标志
                this.options.unshift(currentSys);
            }
        },
    },
};
</script>
<style lang="less" scoped>
#cascaderMap {
    float: left;
    margin-left: 10px;

    .buildFloor {
        color: #999999;
        font-size: 14px;
    }
}
</style>
