<div class="do-mod-search" anot="search">
  <div class="tabbar">
    <span class="item" 
      :class="{active: tab === 'audition'}" 
      @click="toggleHistory({ key: 'audition' })">
      试听列表
    </span>
    <span 
      class="item"
      :class="{active: tab  === it.key}"
      @click="toggleHistory(it)"
      :for="it in history"
      :attr-title="it.txt">
      {{it.txt | truncate(3)}} <i class="do-icon-close" @click="delThis(it, $event)"></i>
    </span>
  </div>

  <div class="table">
    <table>
      <thead>
        <tr>
          <th>&nbsp;</th>
          <th>歌名</th>
          <th>歌手</th>
          <th>专辑</th>
          <th>时长</th>
        </tr>
      </thead>
      <tbodyclass="ac">
        <tr
          :for="it in list"
          :class="{active: it.kgHash === curr}"
          @dblclick="play(it, $index)">
          <td class="idx" :text="$index + 1 + '.'"></td>
          <td :text="it.title | truncate(10)" :attr-title="it.title"></td>
          <td :text="it.artist | truncate(10)" :attr-title="it.artist"></td>
          <td :text="it.album | truncate(10)" :attr-title="it.album"></td>
          <td :text="it.duration | time"></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
