<template>
    <div class="flex-align-center">
        <div>
            <p>一级分类:</p>
            <el-select clear="select" v-model="activeClass1" @clear="clearClass1" size="small" clearable>
                <el-option v-for="item in selectList" :key="item.rowindex" :value="item.sat_sharematerial_classid"
                    :label="item.classname" @click.native="handleChange(item)" />
            </el-select>
        </div>
        <div>
            <p>二级分类:</p>
            <el-select clear="select" v-model="activeClass2" size="small" @clear="clearClass2" clearable>
                <el-option v-for="item in childrens" :key="item.rowindex" :value="item.sat_sharematerial_classid"
                    :label="item.classname" @click.native="handleChange(item)" />
            </el-select>
        </div>
        <div>
            <p>搜索:</p>
            <el-input style="width:200px" size="small" placeholder="素材标题,分类" @clear="changeSearchContent"
                @keyup.native.enter="changeSearchContent" v-model="condition" prefix-icon="el-icon-search" clearable />
        </div>
        <slot />
    </div>
</template>

<script>
export default {
    name: "filterList",
    mounted() {
        this.getSelectList()
    },
    props: ["changeTypeId", "startSearch"],
    data() {
        return {
            selectList: [],//分类列表
            childrens: [],//子分类列表
            activeClass1: "",//选择分类1
            activeClass2: "",//选择分类2
            class1id: "",
            class2id: "",
            returnId: 0,//最终返回id
            condition: "",//搜索内容
        }
    },
    methods: {
        /* 获取分类列表 */
        getSelectList(i = 0) {
            this.$api.requested({
                "classname": "webmanage.saletool.sharematerial.sharematerialClass",
                "method": "select",
                "content": {
                    parentid: 0
                }
            }).then(res => {
                if (res.msg != '成功') return i < 5 ? this.getSelectList(i + 1) : this.$message.error(res.msg);
                this.selectList = res.data;
            })
        },
        /* 选择分类 */
        handleChange(item) {
            if (item.children) {
                this.childrens = item.children;
                this.activeClass2 = "";
                this.class1id = item.sat_sharematerial_classid;
            } else {
                this.class2id = item.sat_sharematerial_classid;
            }
            this.returnId = item.sat_sharematerial_classid;
            this.setId();
        },
        clearClass1() {
            this.childrens = [];
            this.activeClass1 = "";
            this.activeClass2 = "";
            this.class1id = "";
            this.class2id = "";
            this.returnId = 0;
            this.setId();
        },
        clearClass2() {
            this.class2id = "";
            this.activeClass2 = "";
            this.returnId = this.class1id ? this.class1id : 0;
            this.setId();
        },
        /* 返回分类ID */
        setId() {
            this.$emit("changeTypeId", this.returnId)
        },
        /* 开始搜索 */
        changeSearchContent() {
            this.$emit("startSearch", this.condition.trim())
        }
    }
}
</script>

<style scoped>
.flex-align-center {
    width: 100%;
    padding-bottom: 15px;
}

.flex-align-center>div {
    display: flex;
    align-items: center;
    max-width: 350px;
}

.flex-align-center>div>p {
    font-size: 14px;
    margin: 0 10px;
    max-width: 80px;
}

.select {
    width: 120px;
    margin-right: 16px;
}
</style>