<template>
    <div class="resource-category">
        <a-link class="cate-label" :href="brandLink">品牌<i class="icon icon-right"></i></a-link>
        <div v-for="(item, index) in sort" v-if="item.sub">
            <p class="cate-label" @click="toggle(index)">{{item.category_name
                }}<i class="icon" :class="sortClass[index]"></i></p>
            <div class="cate-items" v-if="show[index]">
                <a-link class="cate-item"
                        :href="`/product/list?sort=${getAllSortId(index)}&sort_name=全部${item.category_name}&gender=${genderCvt}`">
                    {{`全部${item.category_name}`}}</a-link>
                <a-link
                    :href="`/product/list?sort=${sub.relation_parameter.sort}&sort_name=${sub.category_name}&gender=${genderCvt}`"
                    class="cate-item" v-for="sub in item.sub" :key="sub.category_id">{{sub.category_name}}
                </a-link>
            </div>
        </div>
    </div>
</template>

<script>
import _ from 'lodash/core';
import Resource from './resource';

export default {
    name: 'ResourceCategory',
    props: {
        value: Object
    },
    data() {
        return {
            show: [],
            sortClass: []
        }
    },
    computed: {
        brandLink() {
            return `/brand?channel=${this.gender}`;
        },
        genderCvt() {
            return { men: '1,3', women: '2,3' }[this.gender];
        },
        gender() {
            return this.value.gender;
        },
        sort() {
            return this.value.sort;
        }
    },
    methods: {
        toggle(idx) {
            this.$set(this.show, idx, !this.show[idx]);
            this.$set(this.sortClass, idx, {
                'icon-sort-up': this.show[idx],
                'icon-sort-down': !this.show[idx]
            });
        },
        getAllSortId(idx) {
            return this.value.sort[idx].sub.map(sort=>sort.relation_parameter.sort).join(',') + ',';
        }
    },
    created() {
        const len = this.sort.length;

        this.show = [];
        for (let i = 0; i < len; i++) {
            this.show.push(false);
            this.sortClass.push({
                'icon-sort-up': false,
                'icon-sort-down': true,
            });
        }
    },
    components: {Resource}
};
</script>

<style lang="scss">
.resource-category {
    padding-left: 20px;

    .cate-label {
        display: block;
        position: relative;
        height: 88px;
        line-height: 88px;
        color: #030303;
        font-size: 32px;
        font-weight: bold;
        font-family: "HiraginoSansGB-W6", "PingFang SC", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei";

        .icon {
            position: absolute;
            top: 0;
            right: 20px;
            font-size: 46px;
        }

        .icon.icon-sort-up {
            top: 28px;
        }

        .icon.icon-sort-down {
            top: 6px;
        }

        .icon.icon-right {
            top: 28px;
            right: 26px;
            font-size: 30px;
        }

        &:after {
            content: " ";
            position: absolute;
            left: 0;
            bottom: 0;
            right: 0;
            height: 1px;
            border-top: 1px solid #e0e0e0;
            color: #D9D9D9;
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
        }
    }

    .cate-item {
        position: relative;
        color: #030303;
        display: block;
        font-size: 28px;
        padding-left: 30px;
        height: 88px;
        line-height: 88px;
        font-family: "HiraginoSansGB-W3", "PingFang SC", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei";


        &:after {
             content: " ";
             position: absolute;
             left: 0;
             bottom: 0;
             right: 0;
             height: 1px;
             border-top: 1px solid #e0e0e0;
             color: #D9D9D9;
             -webkit-transform-origin: 0 0;
             transform-origin: 0 0;
             -webkit-transform: scaleY(0.5);
             transform: scaleY(0.5);
        }
    }
}
</style>