<template>
    <el-dialog title="选择分类" :visible.sync="dialogVisible">
        <div class="list" v-loading="loading">
            <div class="row" v-for="(item, index) in categorys" :key="item.id">
                <div class="list_title">{{ item.name }}</div>
                <div class="item_wrap">
                    <el-button :type="item.active ? 'primary' : ''" @click="selectHandle(item)">全部</el-button>
                    <el-button :type="val.active ? 'primary' : ''" v-for="val in item.childrenList" :key="val.id"
                        @click="selectHandle(val, index)">{{
        val.name }}</el-button>
                </div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="onSubmitHandle">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { tbShopCategoryGet } from '@/api/shop'
export default {
    data() {
        return {
            dialogVisible: false,
            loading: false,
            categorys: []
        }
    },
    mounted() {
        this.tbShopCategoryGet()
    },
    methods: {
        // 确认选择分类
        onSubmitHandle() {
            let categorys = []
            for (let item of this.categorys) {
                if (item.active) {
                    categorys.push({
                        name: `${item.name}`,
                        id: item.id
                    })
                }
                if (item.childrenList.length) {
                    for (let val of item.childrenList) {
                        if (val.active) {
                            categorys.push({
                                name: `${val.name}`,
                                id: val.id
                            })
                        }
                    }
                }
            }
            this.$emit('success', categorys)
            this.dialogVisible = false
        },
        // 选择分类
        selectHandle(item, index = -1) {
            console.log(item, index)
            if (index != -1) {
                this.categorys[index].active = false
            } else {
                item.childrenList.map(item => {
                    item.active = false
                })
            }
            item.active = !item.active
        },
        // 获取分类
        async tbShopCategoryGet() {
            try {
                this.loading = true
                const res = await tbShopCategoryGet({
                    shopId: localStorage.getItem('shopId'),
                    sort: 'sort,desc',
                    page: 0,
                    size: 500
                })
                res.content.map(item => {
                    item.active = false
                    item.childrenList.map(item => {
                        item.active = false
                    })
                })
                this.categorys = res.content

                setTimeout(() => {
                    this.loading = false
                }, 300);
            } catch (error) {
                console.log(error)
                this.loading = false
            }
        },
        show() {
            this.dialogVisible = true
            this.tbShopCategoryGet()
        }
    }
}
</script>

<style scoped lang="scss">
.list {
    min-height: 200px;

    .row {
        padding-bottom: 20px;

        .list_title {
            color: #999;
            padding-bottom: 10px;
        }

        .item_wrap {
            display: flex;
        }
    }
}
</style>