<template>
    <div :class="bem()">
        <div :class="bem('category')" v-for="(category, i) in categories" :key="i">
            <GDLink :class="bem('title')" :url="{path: `/templates/cid-sid${category.id}` }" @click="onClick(category)">{{category.name}}</GDLink>
            <div :class="bem('item')" v-for="(item, i) in category.children.slice(0, 6)" :key="i">
                <GDLink :url="{path: `/templates/cid${item.id}-sid${category.id}` }" @click="onClick(item)">
                    {{ item.name }}
                    <span v-if="item.name === '手机海报'" :class="bem('hot')"><em>HOT</em></span>
                    <span v-if="item.name === 'GIF动图'" :class="bem('new')"><em>NEW</em></span>
                </GDLink>
            </div>
            <div :class="bem('item')" v-if="category.children.length > 6">
                <GDLink :url="{path: `/templates/sid${category.id}` }" @click="onClick()">
                    更多
                    <Icon name="arrow-right"/>
                </GDLink>
            </div>
        </div>
    </div>
</template>

<script>
import GDLink from '../Link';
import Icon from '../../Icon';
import { componentMixin, createComponentName } from '../../_utils/component.js';
export default {
    name: createComponentName('template-categorys'),
    components: {
        GDLink,
        Icon
    },
    mixins: [componentMixin],
    props: {
        categories: {
            type: Array,
            required: true,
        }
    },
    data() {
        return {
            tabKey: 1,
        };
    },
    methods: {
        changeKey(key) {
            this.tabKey = key;
        },
        onClick(item) {
            this.$emit('click', item);
        }
    },
};
</script>

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

@b: ~"@{prefix}-template-categorys";

.@{b} {
    display: flex;
    flex-wrap: wrap;

    &__category {
        flex: 0 0 25%;
        margin-bottom: 35px;
    }

    &__title {
        font-size: @font-size-base;
        line-height:24px;
        display: block;
        font-weight: bold;
        margin-bottom: @margin-xsm;
        color: #000;
    }

    &__item {
        height:16px;
        font-size: @font-size-xsm;
        font-weight:400;
        color:rgba(68,73,80,1);
        line-height:16px;
        margin-bottom: 8px;

        a {
            line-height: 1;
            display: flex;
            align-items: center;
        }

        .gd-icon--arrow-right {
           width: 11px;
        }
    }

    &__new,
    &__hot {
        font-size:12px;
        padding: 1px 0;
        font-weight:600;
        border-radius:2px;
        color:rgba(255,255,255,1);
        background:rgba(221,66,92,1);
        line-height:11px;
        margin-left: 4px;
        em {
            transform: scale(0.666);
            display: block;
        }
    }

    &__new {
        background:rgba(59,180,109,1);
    }

}
</style>

