<template>
    <div class="fattySelection">
        <div class="search-cate">
            <div class="sarch-box">
                <span>商品类目：</span>
                <el-input v-model="searchCategory" placeholder="请输入你要搜索的类目"></el-input>
            </div>
            <el-button type="primary" @click="sarchClick">搜索</el-button>
            <el-button type="primary" @click="reastClick">重置</el-button>
        </div>

        <template v-if="screenCategory.length <= 0">
            <el-tabs v-model="activeName">
                <el-tab-pane v-for="item in categoryList" :label="item.title" :name="item.title" :key="item.id">
                    <template v-if="activeName == item.title">
                        <tableCom :val="item" :queryData="queryData" :businessGroup="businessGroup" :classifyList="classifyList"></tableCom>
                    </template>
                </el-tab-pane>
            </el-tabs>
        </template>
        <template v-else>
            <el-tabs v-model="screenName">
                <el-tab-pane v-for="item in screenCategory" :label="item.title" :name="item.title" :key="item.id">
                    <tableCom :val="item" :groupList="groupList" :queryData="queryData"
                        @handleCurrentChangeAdd="handleChange" :addLoading="addLoading"></tableCom>
                </el-tab-pane>
            </el-tabs>
        </template>
    </div>
</template>

<script>
import { requertGroupList, requertCategoryList, getClassify, requertShopGroup } from '@/api/threeSelection'
import tableCom from './components/tableCom.vue'
export default {
    created() {
        this.getCategoryList()
        this.getClassifyList()
        this.getShopGroup()
    },
    components: {
        tableCom
    },
    data() {
        return {
            //  获取我们平台自己的分组
            queryData: {
                page: 1,
                limit: 20
            },
            activeName: null,
            //  获取逐级类目的参数
            queryCategory: {
                parent_id: 0,
                source: 0
            },
            categoryList: [],
            screenCategory: [],
            screenName: '',
            //  搜索的类目
            searchCategory: '',
            //  自己的分组
            groupList: {},
            //  平台分类
            classifyList: [],
            //  186商家分组
            businessGroup: [],
            addLoading: false
        }
    },
    methods: {
        //  请求平台分类
        async getClassifyList() {
            let res = await getClassify({ page: 1, pageSize: 15 })
            this.classifyList =  res.data.list
        },
        //  获取 186 自己的分组
        async getShopGroup() {
            let res = await requertShopGroup({ page: 1, pageSize: 10 })
            this.businessGroup = res.data.list
        },
        //  获取平台分组
        // async getGroupList() {
        //     this.addLoading = true
        //     try {
        //         let res = await requertGroupList(this.queryData);
        //         this.groupList = res.data
        //     } catch (error) {

        //     } finally {
        //         this.addLoading = false
        //     }
        // },
        //  获取胖子的逐级分类
        async getCategoryList() {
            let res = await requertCategoryList(this.queryCategory)
            this.categoryList = res.data
            this.activeName = res.data[0].title
        },
        //  筛选类目
        sarchClick() {
            if (this.searchCategory == '') {
                this.$message({
                    type: 'warning',
                    message: '请输入你要搜索的类目'
                });
                return
            }
            //  搜索点击
            this.screenCategory = this.categoryList.reduce((prev, item, index) => {
                if (item.title.includes(this.searchCategory)) {
                    prev.push(item)
                }
                return prev
            }, [])
            if (this.screenCategory.length > 0) {
                this.screenName = this.screenCategory[0].title
            } else {
                this.$message({
                    type: 'warning',
                    message: '没有你要搜索的类目'
                });
            }

        },
        //  重置按钮
        reastClick() {
            this.searchCategory = ''
            this.screenCategory = []
        }
    },
}
</script>

<style lang="scss" scoped>
.fattySelection {
    padding: 50px;
    box-sizing: border-box;

    .search-cate {
        display: flex;
        align-items: center;
        gap: 20px;
        margin: 20px 0;

        .sarch-box {
            display: flex;
            align-items: center;
            gap: 20px;

            span {
                width: 120px;
                white-space: nowrap;
                font-size: 18px;
            }
        }
    }
}
</style>