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: 10px;") #
th.nobreak(style="width: 28%;") {{$t('view.download.name')}}
th.nobreak(style="width: 22%;") {{$t('view.download.progress')}}
th.nobreak(style="width: 15%;") {{$t('view.download.status')}}
th.nobreak(style="width: 10%;") {{$t('view.download.quality')}}
th.nobreak(style="width: 20%;") {{$t('view.download.action')}}
div.scroll(v-if="list.length" :class="$style.tbody")
table
tbody(ref="dom_tbody")
tr(v-for='(item, index) in showList' :key='item.key' @click="handleDoubleClick($event, index)" :class="playListIndex === index ? $style.active : ''")
td.nobreak.center(style="width: 37px;" @click.stop) {{index + 1}}
td.break(style="width: 28%;")
span.select {{item.musicInfo.name}} - {{item.musicInfo.singer}}
td.break(style="width: 22%;") {{item.progress.progress}}%
td.break(style="width: 15%;") {{item.statusText}}
td.break(style="width: 10%;") {{item.type && item.type.toUpperCase()}}
td(style="width: 20%; padding-left: 0; padding-right: 0;")
material-list-buttons(:index="index" :download-btn="false" :file-btn="item.status != downloadStatus.ERROR"
: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-flow-btn(:show="isShowEditBtn" :play-btn="false" :download-btn="false" :add-btn="false" :start-btn="true" :pause-btn="true" @btn-click="handleFlowBtnClick")
div(:class="$style.noItem" v-else)