div(:class="$style.download")
//- transition
div(:class="$style.header")
material-tab(:class="$style.tab" :list="tabs" align="left" item-key="id" item-name="name" @change="handleTabChange" v-model="tabId")
div(:class="$style.content" v-if="list.length")
div(:class="$style.thead")
table
thead
tr
th.nobreak.center(style="width: 5%;") #
th.nobreak {{$t('view.download.name')}}
th.nobreak(style="width: 20%;") {{$t('view.download.progress')}}
th.nobreak(style="width: 22%;") {{$t('view.download.status')}}
th.nobreak(style="width: 10%;") {{$t('view.download.quality')}}
th.nobreak(style="width: 13%;") {{$t('view.download.action')}}
div(v-if="list.length" :class="$style.content" ref="dom_listContent")
material-virtualized-list(:list="showList" key-name="key" ref="list" :item-height="listItemHeight" #default="{ item, index }"
containerClass="scroll" contentClass="list")
div.list-item(@click="handleDoubleClick($event, index)" @contextmenu="handleListItemRigthClick($event, index)"
:class="[{[$style.active]: playListIndex == index }, { selected: selectedIndex == index }, { active: selectedData.includes(item) }]")
div.list-item-cell.nobreak.center(style="width: 5%; padding-left: 3px; padding-right: 3px;" @click.stop) {{index + 1}}
div.list-item-cell.auto(:tips="item.name")
span.select {{item.name}}
div.list-item-cell(style="width: 20%;") {{item.progress.progress}}%
div.list-item-cell(style="width: 22%;" :tips="item.statusText") {{item.statusText}}
div.list-item-cell(style="width: 10%;") {{item.type && item.type.toUpperCase()}}
div.list-item-cell(style="width: 13%; padding-left: 0; padding-right: 0;")
material-list-buttons(:index="index" :download-btn="false" :file-btn="item.status != downloadStatus.ERROR" remove-btn
:start-btn="!item.isComplate && item.status != downloadStatus.WAITING && (item.status != downloadStatus.RUN)"
:pause-btn="!item.isComplate && (item.status == downloadStatus.RUN || item.status == downloadStatus.WAITING)" :list-add-btn="false"
:play-btn="item.status == downloadStatus.COMPLETED" :search-btn="item.status == downloadStatus.ERROR" @btn-click="handleListBtnClick")
material-menu(:menus="listItemMenu" :location="listMenu.menuLocation" item-name="name" :isShow="listMenu.isShowItemMenu" @menu-click="handleListItemMenuClick")
div(:class="$style.noItem" v-else)