<template>
    <Popover
        :modifiers="{
            offset: { offset: '185px, 10px' },
            preventOverflow: {
                boundariesElement: 'window'
            },
            flip: {
                enabled: false,
            }
        }"
        :lazy="false"
        @click="visible = false"
        @after-leave="changeKey(1)"
        :visible.sync="visible"
        :popover-class="bem('popover')"
    >
        <slot/>
        <div slot="content" :class="bem()">
            <div :class="bem('tabs')">
                <div :class="bem('tab', { active: tabKey === 1 })" @mouseenter="changeKey(1)">
                    <div>
                        <h3>分类</h3>
                        <div :class="bem('desc')">手机海报 社交媒体</div>

                    </div>
                </div>
                <div :class="bem('tab', { active: tabKey === 2 })" @mouseenter="changeKey(2)">
                    <div>
                        <h3>行业</h3>
                        <div :class="bem('desc')">教育培训 餐饮美食</div>
                    </div>
                </div>
                <div :class="bem('tab', { active: tabKey === 3 })" @mouseenter="changeKey(3)">
                    <div>
                        <h3>风格</h3>
                        <div :class="bem('desc')">简约 商务 手绘</div>
                    </div>
                </div>
            </div>
            <div :class="bem('content')">
                <TemplateCategories v-if="tabKey === 1" @click="visible = false" :categories="categories"/>
                <TemplateTags v-else-if="tabKey === 2" @click="visible = false" :list="business" filter="tid"/>
                <TemplateTags v-else-if="tabKey === 3" @click="visible = false" :list="styles" filter="q"/>
                <div :class="bem('all-template')">
                    <GDLink :url="{path: 'templates'}" @click="visible = false" >
                        查看所有模板
                        <Icon name="arrow-right"/>
                    </GDLink>
                </div>
            </div>
        </div>
    </Popover>
</template>

<script>
import GDLink from '../Link';
import Icon from '../../Icon';
import Popover from '../../Popover';
import { componentMixin, createComponentName } from '../../_utils/component.js';
import TemplateCategories from './categoires';
import TemplateTags from './tags';
import request from '../../request';
import { industries } from '../data.js';

export default {
    name: createComponentName('header-templates'),
    components: {
        GDLink,
        Icon,
        TemplateCategories,
        TemplateTags,
        Popover
    },
    mixins: [componentMixin],
    data() {
        return {
            tabKey: 1,
            visible: false,
            industries,
            styles: [],
            business: [],
            categories: [],
        };
    },
    mounted() {
        this.getCategories();
        this.getStyles();
        this.getBusiness();
    },
    methods: {
        async getCategories() {
            const { data: categories } = await request.get(
                '/api/categories',
                { params: { parent_id: 0, level: 2, with_children: 1 }, cache: { type: 'localCache', revalidate: true } },
            );
            this.categories = categories;
        },
        async getStyles() {
            const res = await request.get('/api/attributes', { params: { type: 'style' }, cache: { type: 'localCache', revalidate: true } });
            this.styles = res.data;
        },
        async getBusiness() {
            const res = await request.get('/api/tags?groups=64', { cache: { type: 'localCache', revalidate: true } });

            this.business = res.data.map((b) => ({ id: b.id, name: b.name }));
        },
        changeKey(key) {
            this.tabKey = key;
        }
    },
};
</script>

<style lang="less">
@import "../../_styles/base.less";

@b: ~"@{prefix}-header-templates";

.@{b} {
    display: flex;
    min-height: 476px;

    &__tabs {
        padding-top: @margin-base;
        background: @bg-tint;
        width:  166px;
        display: block;
    }

    &__tab {
        padding: @margin-base;
        border-left: 4px solid transparent;
        font-size: @font-size-lg;

        &--active,
        &:hover {
            background: #fff;
            border-left: 4px solid @color-primary;

            h3 {
                color: @color-primary;
            }
        }

        h3 {
            margin: 0;
            cursor: default;
            font-size: @font-size-lg;
            font-weight: bold;
        }
    }

    &__desc {
        font-size: @font-size-xsm;
        color: #444950;
    }

    &__content {
        width:  680px;
        padding: @margin-xlg 50px;
        padding-bottom: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    &__all-template {
        line-height: 44px;
        border-top: 1px solid #ddd;

        a {
            display: flex;
            align-items: center;
        }
    }
}

.@{popover}.@{b}__popover {
    box-shadow:0px 4px 16px 0px rgba(0,0,0,0.16);
}
</style>

