<template>
    <div class="ht-base-layout-trigger-demo">
        <ht-base-layout>
            <ht-base-sider ref="side1" hide-trigger collapsible :collapsed-width="80" v-model="isCollapsed">
                <div class="demo-layout-logo" :style="{width:this.isCollapsed ? '80px':'200px'}">
                    <img class="logo-img" src="http://39.106.250.14:8082/base-components/static/layout_logo.svg" alt=""
                         :style="{display:this.isCollapsed?'none':''}">
                    <img class="logo-img" src="http://39.106.250.14:8082/base-components/static/tianYuanLogo.svg" alt=""
                         :style="{display:this.isCollapsed?'':'none'}" style="height: 80%;margin-top: 10px;">
                </div>
                <ht-base-menu active-name="1-2" theme="dark" width="auto" class="menu-item" :class="menuitemClasses">
                    <ht-base-menu-item name="1-1">
                        <ht-base-icon type='LiRa_telephone' />
                        <span>Option 1</span>
                    </ht-base-menu-item>
                    <ht-base-menu-item name="1-2">
                        <ht-base-icon type='LiRa_comment' />
                        <span>Option 2</span>
                    </ht-base-menu-item>
                    <ht-base-menu-item name="1-3">
                        <ht-base-icon type='LiRa_user' />
                        <span>Option 3</span>
                    </ht-base-menu-item>
                </ht-base-menu>
            </ht-base-sider>
            <ht-base-layout>
                <ht-base-header class="demo-layout-header">
                    <ht-base-icon @click.native="collapsedSider" :class="rotateIcon" :style="{margin: '0 20px'}"
                          type="LiRa_column" size="24"></ht-base-icon>
                    <ht-base-menu mode="horizontal" theme="light" active-name="1">
                        <ht-base-menu-item name="1">
                            <ht-base-icon type='LiRa_telephone' size=14 />
                            顶部导航菜单
                        </ht-base-menu-item>
                        <ht-base-menu-item name="2">
                            <ht-base-icon type='LiRa_comment' size=14 />
                            顶部导航菜单
                        </ht-base-menu-item>
                        <ht-base-submenu name="3">
                            <span slot="title">
                              <ht-base-icon type='LiRa_user' size=14 />
                              顶部导航菜单
                            </span>
                            <ht-base-menu-group title="标题">
                                <ht-base-menu-item name="3-2">导航菜单3-1</ht-base-menu-item>
                                <ht-base-menu-item name="3-2">导航菜单3-2</ht-base-menu-item>
                            </ht-base-menu-group>
                            <ht-base-menu-group title="标题">
                                <ht-base-menu-item name="3-3" disabled>导航菜单3-3</ht-base-menu-item>
                            </ht-base-menu-group>
                        </ht-base-submenu>
                        <ht-base-menu-item name="4">
                            顶部导航菜单
                        </ht-base-menu-item>
                        <ht-base-submenu name="5">
                            <span slot="title" class="submenu-title-wrapper">
                              顶部导航菜单
                            </span>
                            <ht-base-menu-item name="5-1">导航菜单5-1</ht-base-menu-item>
                            <ht-base-menu-item name="5-2">导航菜单5-2</ht-base-menu-item>
                            <ht-base-menu-item name="5-3" disabled>导航菜单5-3</ht-base-menu-item>
                        </ht-base-submenu>
                    </ht-base-menu>
                </ht-base-header>
                <ht-base-breadcrumb class="demo-layout-breadcrumb">
                    当前位置：
                    <ht-base-breadcrumb-item to="/">首页</ht-base-breadcrumb-item>
                    <ht-base-breadcrumb-item to="/component/base-form-demo">商品列表</ht-base-breadcrumb-item>
                    <ht-base-breadcrumb-item>商品详情</ht-base-breadcrumb-item>
                </ht-base-breadcrumb>
                <ht-base-content :style="{margin: '20px', background: '#fff', minHeight: '260px'}">
                    Content
                </ht-base-content>
            </ht-base-layout>
        </ht-base-layout>
    </div>
</template>

<script>
    export default {
        name: 'HtBaseLayoutTriggerDemo',
        data() {
            return {
                isCollapsed: false
            }
        },
        computed: {
            rotateIcon () {
                return [
                    'menu-icon',
                    this.isCollapsed ? 'rotate-icon' : ''
                ];
            },
            menuitemClasses () {
                return [
                    'menu-item',
                    this.isCollapsed ? 'collapsed-menu' : ''
                ]
            }
        },
        methods: {
            collapsedSider () {
                this.$refs.side1.toggleCollapse();
            }
        }
    }
</script>
<style lang="less">
    .ht-base-layout-trigger-demo {
        overflow-x: scroll;
        .demo-layout-logo{
            line-height: 60px;
            padding: 0 20px;
            background: #595959;
        }
        .demo-layout-header{
            min-width:960px;
            height: 60px;
            background:#fff;
            padding: 0 20px;
            display: flex;
            border-bottom: 1px solid #dcdee2;
        }
        .demo-layout-breadcrumb {
            margin: 20px 20px 0;
        }
        .menu-icon{
            transition: all .3s;
        }
        .rotate-icon{
            transform: rotate(-90deg);
        }
        .menu-item span{
            display: inline-block;
            overflow: hidden;
            width: 69px;
            text-overflow: ellipsis;
            white-space: nowrap;
            vertical-align: bottom;
            transition: width .2s ease .2s;
        }
        .menu-item i{
            transform: translateX(0px);
            transition: font-size .2s ease, transform .2s ease;
            vertical-align: middle;
            font-size: 16px;
        }
        .collapsed-menu span{
            width: 0px;
            transition: width .2s ease;
        }
        .collapsed-menu i{
            transform: translateX(5px);
            transition: font-size .2s ease .2s, transform .2s ease .2s;
            vertical-align: middle;
            font-size: 22px;
        }
    }
</style>

