<template>
    <view>
        <view
            class="catalog c-font-normal"
            @tap="openDrawer"
        > 目录 </view>
        <c-drawer
            :show="showDrawer"
            :width="width + '%'"
            cont-height="100%"
            @close="closeDrawer"
        >
            <view slot="content" class="drawer">
                <view class="drawer__h1 c-font-wb"> 目录 </view>
                <view v-for="(item, index) in catalogue" :key="index">
                    <view
                        :class="activeIndex === index ? 'drawer__active' : ''"
                        class="c-color-333 c-font-large c-gap-top-ll c-font-wb"
                        @tap.stop="checkDraw(index)"
                    >
                        {{ item.title }}
                    </view>
                    <view
                        v-for="(childItem, childIndex) in item.children"
                        :key="'child' + childIndex"
                        :class="activeIndex === index && activeSubIndex === childIndex ? 'drawer__active' : ''"
                        class="c-color c-font-17 c-gap-top c-gap-inner-left-xlarge"
                        @tap.stop="checkDraw(index, childIndex)"
                    >
                        {{ childItem.subtitle }}
                    </view>
                </view>
                <!-- <view
                    :style="{width: width + '%'}" class="drawer__close c-font-17 c-color"
                    @tap="closeDrawer"
                >关闭</view> -->
            </view>
        </c-drawer>
    </view>
</template>
<script>
/**
 * @file 医典落地页右侧目录
 * @author yumingzhi
 * @categories
 * @tags
 */
import CDrawer from '@baidu/med-ui/components/Drawer/Drawer';
import {send} from '@utils/log';
export default {
    config: {
        component: true
    },
    components: {
        CDrawer
    },
    props: {
        /**
         * 目录list
         */
        catalogue: {
            type: Array,
            default: () => []
        },
        /**
         * 高亮一级标题
         */
        activeIndex: {
            type: Number,
            default: 0
        },
        /**
         * 高亮二级标题
         */
        activeSubIndex: {
            type: Number,
            default: 0
        },
        /**
         * 目录宽度
         */
        width: {
            type: Number,
            default: 73
        },
    },
    data() {
        return {
            showDrawer: false
        };
    },
    methods: {
        openDrawer() {
            /**
             * 上报打开
             */
            this.showDrawer = true;
            this.$emit('openDrawer');
        },
        closeDrawer() {
            this.showDrawer = false;
        },
        checkDraw(index, childIndex = null) {
            this.showDrawer = false;
            /**
             * 上报切换tab
             */
            this.$emit('swiperNav', index, childIndex);
            this.upTCLog(
                'click_catalogue',
                this.catalogue[index].title,
                this.catalogue[index].children[childIndex].title
            );
        },
        upTCLog(module, title, subTitle, action = 'click') {
            send({
                type: 't',
                action: action,
                extra: Object.assign({
                    module: module,
                    title: title,
                    subTitle: subTitle
                })
            });
        }
    }
};
</script>
<style lang="less" scoped>
.catalog {
    position: fixed;
    z-index: 2;
    right: 17px;
    bottom: 150px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid rgba(0, 200, 200, 0.18);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08);
    color: #00c8c8;
    display: flex;
    align-items: center;
    justify-content: center;
}
.drawer {
    width: 100%;
    padding: 45px 20px 20px;
    box-sizing: border-box;
    &__h1 {
        font-size: 28px;
        line-height: 38px;
        color: #1f1f1f;
    }
    &__active {
        color: #00c8c8;
    }
    &__close {
        position: fixed;
        background: #fff;
        right: 0;
        bottom: 0;
        height: 60px;
        box-shadow: 0 -1px 0 0 #f5f5f5;
        text-align: center;
        line-height: 60px;
    }
}
</style>
