<link rel="stylesheet" href="__CDN__/assets/addons/groupon/libs/element/element.css">
<link rel="stylesheet" href="__CDN__/assets/addons/groupon/libs/common.css">

<style>
    #linkSelect {
        background: #fff;
        overflow: auto;
        color: #444;
        margin: -15px;
    }

    a,
    a:focus,
    a:hover {
        color: #444;
        display: block;
    }

    .el-menu-level {
        margin: 0 20px;
        border: none;
    }

    .el-menu-level .el-menu-item,
    .el-submenu__title,
    .el-menu-item-group__title {
        height: 32px;
        line-height: 32px;
        min-width: 100px !important;
        padding: 0 0 0 20px !important;
        font-size: 12px;
    }

    .el-menu-item.is-active {
        color: #7536D0;
        background: rgba(116, 56, 213, 0.14);
        border-radius: 4px;
    }

    .dialog-left {
        width: 140px;
        border-right: 1px solid #e6e6e6;
        height: 100vh;
        padding-top: 9px;
        overflow: auto;
    }

    .dialog-right {
        height: 100vh;
        flex: 1;
    }

    .dialog-search {
        padding: 9px 20px;
    }

    .dialog-search .el-input {
        width: 240px;

    }

    .dialog-search .el-input__inner {
        background: #F9F9F9;
        border: none;
    }

    .dialog-right-body {
        padding: 0 20px;
        height: calc(100vh - 80px);
        overflow: auto;
    }

    .operation-button {
        width: 60px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        font-size: 12px;
        margin-left: 10px;
        cursor: pointer;
    }

    .cancel-button {
        border: 1px solid #E6E6E6;
        color: #C4C4C4;
    }

    .define-button {
        background: #6E3DC8;
        color: #fff;
    }

    .dialog-right-body-title {
        height: 50px;
        justify-content: space-between;
        font-size: 12px;
        margin-bottom: 10px;
    }

    .dialog-right-body-title .el-icon-tickets {
        font-size: 13px;
        color: #7438D5;
        margin-right: 10px;
    }

    .select-container {
        flex-wrap: wrap;
    }

    .select-item {
        /* width: 70px; */
        padding: 0 16px;
        height: 32px;
        border: 1px solid #E6E6E6;
        border-radius: 4px;
        color: #444;
        cursor: pointer;
        margin-right: 14px;
        margin-bottom: 14px;
    }

    .custom-select-active,
    .custom-select-active:focus {
        border-color: #7438D5 !important;
        color: #7438D5;
    }

    .dialog-left::-webkit-scrollbar,
    .dialog-right-body::-webkit-scrollbar {
        width: 6px;
    }

    .dialog-left::-webkit-scrollbar-thumb,
    .dialog-right-body::-webkit-scrollbar-thumb {
        width: 6px;
        background: #ccc;
        height: 20px;
        border-radius: 3px;
    }
    .open-page-button-container{
        width: auto;
    }

    [v-cloak] {
        display: none
    }
</style>
<script src="__CDN__/assets/addons/groupon/libs/vue.js"></script>
<script src="__CDN__/assets/addons/groupon/libs/element/element.js"></script>
<div id="linkSelect" v-cloak>
    <div class="dialog-body display-flex">
        <div class="dialog-left">
            <el-menu :default-active="activeIndex" class="el-menu-level" :collapse="false" @select="selected">
                <el-menu-item :index="index" v-for="(item,index) in linkData">
                    <span slot="title">
                        <a :href="'#'+index"></a>
                        {{item.group==''?'其它':item.group}}</span>
                </el-menu-item>
            </el-menu>
        </div>
        <div class="dialog-right">
            <div class="dialog-search display-flex" v-if="multiple=='true'">
                <span v-if="!isAll" class="theme-color cursor-pointer" @click="checkedAll(true)">全选</span>
                <span v-if="isAll" class="cursor-pointer" @click="checkedAll(false)">全不选</span>
            </div>
            <div class="dialog-right-body">
                <a class="scroll-item" v-for="(group,index) in linkData" :name="index">
                    <div class="dialog-right-body-title display-flex">
                        <div>
                            <i class="el-icon-tickets"></i>
                            <span>{{group.group==''?'其它':group.group}}</span>
                        </div>
                    </div>
                    <div class="select-container display-flex">
                        <div v-for="(item,idx) in group.children" class="select-item display-flex-c"
                            :class="item.selected?'custom-select-active':''"
                            @click="operation('select',item,index,idx)">
                            {{item.name}}</div>
                    </div>
                </a>
            </div>
        </div>
    </div>
    <div class="open-page-button-container">
        <div class="dialog-button dialog-button-define" @click="operation('define')">确定</div>
    </div>
    <el-dialog title="类型" :visible.sync="dialogVisible" width="30%" :show-close="false">
        <div class="display-flex" style="justify-content: space-between;">
            <div style="width: 40%;border: 1px solid #e6e6e6;display: flex;align-items: center;justify-content: center;height: 40px;cursor: pointer;"
                @click="posterUser">个人海报</div>
            <div style="width: 40%;border: 1px solid #e6e6e6;display: flex;align-items: center;justify-content: center;height: 40px;cursor: pointer;"
                @click="posterGood">商品海报</div>
        </div>
    </el-dialog>
</div>