<template>
    <div class="sidebar">
        <div v-for="(item, index) in list" :key="index">
            <template v-if="item.separative_sign === 'Y'">
                <div class="sep">
                    <!-- 分割线 -->
                </div>
            </template>
            <span class="item ellipsis" :class="{'selected': selectedIndex === index}"
            @click="select(index, item)">
                <span class="en">{{(item.sort_name_en || '').trim()}}</span>
                <span class="cn">{{item.sort_name}}</span>
            </span>
        </div>
    </div>
</template>

<script>
    import $ from 'jquery';
    import interceptClick from 'common/intercept-click';

    export default {
        data() {
            return {
                selectedIndex: '',
                list: []
            };
        },
        created() {
            $.ajax({
                url: '/sidebar'
            }).then((res) => {
                this.list = res.data;
            });
        },
        methods: {
            select(index, item) {
                this.selectedIndex = index;
                interceptClick.intercept(item.sort_url);
            }
        }

        // ,
        // ready() {
        //     var a =document.querySelector('.sidebar')
        //     alert(a.getBoundingClientRect().width)
        // }
    };
</script>

<style>
    @import "../../scss/common/_color.css";

    html {
        font-size: 60px !important;
        overflow-x: hidden;
    }

    #sidebar {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow-x: hidden;
        overflow-y: auto;
        background: #f6f6f6;
    }

    .sidebar {
        background: $white;

        .item {
            position: relative;
            display: block;
            padding: 0 45px;
            height: 124px;
            line-height: 124px;
            font-size: 30px;
            font-weight: bold;
            font-family: "BrownStd-Bold", "PingFang SC", Helvetica, Roboto, "Heiti SC", "黑体", Arial;

            .en {
                font-size: 34px;
            }

            .cn {
                font-size: 22px;
                margin-left: -6px;
                font-family: "PingFang SC", Helvetica, Roboto, "Heiti SC", "黑体", Arial;
            }

            &:first-child {
                font-size: 34px;
                height: 142px;
                line-height: 142px;
                font-family: "PingFang SC", Helvetica, Roboto, "Heiti SC", "黑体", Arial;

                .cn {
                    font-size: 34px;
                }
            }

            &:after {
                content: "";
                position: absolute;
                left: 45px;
                bottom: 0;
                width: 100%;
                height: 0;
                border-bottom: 1px solid #eee;
            }

            &:last-child {
                border-bottom: 1px solid #eee;

                &:after {
                    content: none;
                }
            }
        }

        .selected {
            background: $black;
            color: $white;

            &:after {
                border-bottom: 1px solid $black;
            }
        }

        .sep {
            margin-top: -1px;
            width: 100%;
            height: 20px;
            background: #f6f6f6;
            border-top: 1px solid #eee;
            border-bottom: 1px solid #eee;

            & + .item {
                font-size: 36px;
                height: 142px;
                line-height: 142px;
                font-family: "PingFang SC", Helvetica, Roboto, "Heiti SC", "黑体", Arial;
            }
        }
    }

    .app.ios {
        .sidebar {
            margin-top: 40px;
        }
    }
</style>