div(:class="$style.container" @click="handleContainerClick")
div(:class="$style.lists" ref="dom_lists")
div(:class="$style.listHeader")
h2(:class="$style.listsTitle") {{$t('core.aside.my_list')}}
button(:class="$style.listsAdd" @click="handleShowNewList" :tips="$t('view.list.lists_new_list_btn')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='70%' viewBox='0 0 24 24' space='preserve')
use(xlink:href='#icon-list-add')
ul.scroll(:class="$style.listsContent" ref="dom_lists_list")
li(:class="[$style.listsItem, defaultList.id == listId ? $style.active : null]" :tips="defaultList.name"
@contextmenu="handleListsItemRigthClick($event, -2)"
@click="handleListToggle(defaultList.id)")
span(:class="$style.listsLabel") {{defaultList.name}}
li(:class="[$style.listsItem, loveList.id == listId ? $style.active : null]" :tips="loveList.name"
@contextmenu="handleListsItemRigthClick($event, -1)"
@click="handleListToggle(loveList.id)")
span(:class="$style.listsLabel") {{loveList.name}}
li.user-list(
:class="[$style.listsItem, item.id == listId ? $style.active : null, listsData.rightClickItemIndex == index ? $style.clicked : null, fetchingListStatus[item.id] ? $style.fetching : null]"
@contextmenu="handleListsItemRigthClick($event, index)"
:tips="item.name" v-for="(item, index) in userList" :key="item.id")
span(:class="$style.listsLabel" @click="handleListToggle(item.id, index + 2)") {{item.name}}
input.key-bind(:class="$style.listsInput" @contextmenu.stop type="text" @keyup.enter="handleListsSave(index, $event)" @blur="handleListsSave(index, $event)" :value="item.name" :placeholder="item.name")
transition(enter-active-class="animated-fast slideInLeft" leave-active-class="animated-fast fadeOut" @after-leave="handleListsNewAfterLeave")
li(:class="[$style.listsItem, $style.listsNew, listsData.isNewLeave ? $style.newLeave : null]" v-if="listsData.isShowNewList")
input.key-bind(:class="$style.listsInput" @contextmenu.stop ref="dom_listsNewInput" type="text" @keyup.enter="handleListsCreate" @blur="handleListsCreate" :placeholder="$t('view.list.lists_new_list_input')")
div(:class="$style.list")
//- transition
div(:class="$style.thead")
table
thead
tr
th.nobreak.center(style="width: 5%;") #
th.nobreak {{$t('view.list.name')}}
th.nobreak(style="width: 22%;") {{$t('view.list.singer')}}
th.nobreak(style="width: 22%;") {{$t('view.list.album')}}
th.nobreak(style="width: 9%;") {{$t('view.list.time')}}
th.nobreak(style="width: 15%;") {{$t('view.list.action')}}
div(v-if="list.length" :class="$style.content" ref="dom_listContent")
material-virtualized-list(:list="list" key-name="songmid" ref="list" #default="{ item, index }" :item-height="37"
@scroll="handleScroll" containerClass="scroll" contentClass="list" @contextmenu.native.capture="handleContextMenu")
div.list-item(@click="handleDoubleClick($event, index)"
:class="[{ [$style.active]: isPlayList && playInfo.playIndex === index }, { selected: selectedIndex == index }, { active: selectdListDetailData.includes(item) }, { [$style.disabled]: !assertApiSupport(item.source) }]"
@contextmenu="handleListItemRigthClick($event, index)")
div.list-item-cell.nobreak.center(style="flex: 0 0 5%; padding-left: 3px; padding-right: 3px;" :class="$style.noSelect" @click.stop) {{index + 1}}
div.list-item-cell.auto.break(:tips="item.name")
span.select {{item.name}}
span(:class="[$style.labelSource, $style.noSelect]" v-if="isShowSource") {{item.source}}
div.list-item-cell.break(style="flex: 0 0 22%;")
span.select {{item.singer}}
div.list-item-cell.break(style="flex: 0 0 22%;")
span.select {{item.albumName}}
div.list-item-cell(style="flex: 0 0 9%;")
span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}}
div.list-item-cell(style="flex: 0 0 15%; padding-left: 0; padding-right: 0;")
material-list-buttons(:index="index" @btn-click="handleListBtnClick" :download-btn="assertApiSupport(item.source)")
div(:class="$style.noItem" v-else)
p(v-text="$t('view.list.no_item')")
material-download-modal(:show="isShowDownload" :musicInfo="musicInfo" @select="handleAddDownload" @close="isShowDownload = false")
material-download-multiple-modal(:show="isShowDownloadMultiple" :list="selectdListDetailData" @select="handleAddDownloadMultiple" @close="isShowDownloadMultiple = false")
//- material-flow-btn(:show="isShowEditBtn" :play-btn="false" @btn-click="handleFlowBtnClick")
material-list-add-modal(:show="isShowListAdd" :is-move="isMove" :from-list-id="listData.id" :musicInfo="musicInfo" :exclude-list-id="excludeListId" @close="handleListAddModalClose")
material-list-add-multiple-modal(:show="isShowListAddMultiple" :is-move="isMoveMultiple" :from-list-id="listData.id" :musicList="selectdListDetailData" :exclude-list-id="excludeListId" @close="handleListAddMultipleModalClose")
material-menu(:menus="listsItemMenu" :location="listsData.menuLocation" item-name="name" :isShow="listsData.isShowItemMenu" @menu-click="handleListsItemMenuClick")
material-menu(:menus="listItemMenu" :location="listMenu.menuLocation" item-name="name" :isShow="listMenu.isShowItemMenu" @menu-click="handleListItemMenuClick")
material-search-list(:list="list" @action="handleMusicSearchAction" :visible="isVisibleMusicSearch")
material-list-sort-modal(:show="isShowListSortModal" :music-info="musicInfo" :selected-num="selectdListDetailData.length" @close="isShowListSortModal = false" @confirm="handleSortMusicInfo")
material-duplicate-music-modal(:visible.sync="isShowDuplicateMusicModal" :list-info="selectedListInfo")