<div class="do-mod-local" anot="local">
  <div class="tabbar">
    本地音乐({{list.length}}首)<span class="refresh" @click="refresh">重新扫描</span>
  </div>

  <wc-scroll class="table">
    <table>
      <thead>
        <tr>
          <th>&nbsp;</th>
          <th>歌名</th>
          <th>歌手</th>
          <th>专辑</th>
          <th>时长</th>
        </tr>
      </thead>
      <tbodyclass="ac">
        <tr
          :class="{active: it.id === curr}"
          :for="it in list"
          :on-contextmenu="handleMenu(it, $index, $event)"
          @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>
  </wc-scroll>

  <div class="edit-form" :if="editMode">
    <div class="form"  :keyup="closeEditByEnter">
      <section class="section title">
        歌曲信息编辑
        <i class="do-icon-close" @click="closeEdit"></i>
      </section>

      <section class="section">
        <input readonly class="field path" :attr-value="form.path" />
      </section>

      <section class="section">
          <span class="label">标题</span>
          <input class="field do-ui-input" :duplex="form.title">
        </section>
      
      <section class="section">
        <span class="label">歌手</span>
        <input class="field do-ui-input" :duplex="form.artist">
      </section>

      <section class="section">
        <span class="label">专辑</span>
        <input class="field do-ui-input" :duplex="form.album">
      </section>

    </div>
  </div>

</div>
