<template>
    <div class="pull-left">
        <div class="icon_search">图标筛选：</div>
        <div class="search_area">

        <span
            @click="selSearchMenu(allItem,true)"
            class="icon_search_item"
            :class="allItem.active ? 'active' : ''"
        >{{ allItem.name }}</span>

      <span
          :key="index"
          @click="selSearchMenu(item,false)"
          v-for="(item, index) of searchMenus"
          class="icon_search_item"
          :class="item.active ? 'active' : ''"
      >{{ item.name }}</span>
        </div>
    </div>
</template>

<script>
    import dropCodingFactory from "../../../../common/dropCodingFactory";
    import {AssertUtils} from 'goingutils';

    export default {
        name: "index",
        data: function () {
            return {
                allItem:{name: "全部", active: true},
                subTypeName: "",
                searchMenus: []
            };
        },
        computed: {},
        props:{
            showWinFlag:{
                type:Boolean,
                default:false,
            },
        },
        methods: {
            //点击查询menus
            selSearchMenu({name},allSelFlag) {
                if(allSelFlag===true){
                    this.allItem.active=true;
                }else{
                    this.allItem.active=false;
                }
                //设置点击的item为active状态
                this.searchMenus.forEach(function (item) {
                    if (item.name === name) {
                        item.active = true;
                    } else {
                        item.active = false;
                    }
                });
                this.subTypeName = name;
                if (this.subTypeName === "全部") {
                    this.subTypeName = "";
                }
                this.$emit("selSubTypeQuery", {subTypeName: this.subTypeName});
            },
            loadIconTypes(){
                let vueObj = this;
                //从下拉映射中获取 图标子类型集合
                dropCodingFactory.getCodingAry("iconSubType", function (codingAry) {
                    vueObj.searchMenus=[];
                    AssertUtils.isArray(codingAry)&&codingAry.forEach(function (item) {
                        item.active = false;
                    });
                    vueObj.searchMenus = codingAry;
                });
            }
        },
        mounted() {

        },
        watch: {
            showWinFlag(newVal){
               if(newVal){
                   this.$nextTick(()=>{
                       this.loadIconTypes();
                   })
               }
            }
        },
        components: {}
    };
</script>

<style scoped></style>
