<template>
  <div class="list" :class="{empty:fileData.file_list.length===0}">
    <van-checkbox-group v-model="checked" :max="6" v-if="fileData.file_list.length">
      <van-list
        v-model:loading="loading"
        :immediate-check="false"
        :finished="finished"
        finished-text="没有更多了"
        :loading-text="'加载中...'"
        @load="onLoad"
      >
        <div class="listItem" v-for="(item, index) in fileData.file_list" :key="index">
          <div class="listItemLeft"  @click.stop="checkboxClick(item)">
             <img
                  class="img-icon hoverP"
                  :src="checked.includes(item.path) ? activeIcon : inactiveIcon"
                />
          </div>
          <div class="listItemRight hoverP" @click="openFolder(item)">
            <div class="left">
              <img src="@/assets/fold_sm.png" alt="" />
            </div>
            <div class="right">
              <p class="name">{{ ellipsis(item.name, 30) }}</p>
              <p class="date hoverP" @click.stop="checkboxClick(item)">
                {{ shareDateFormat(item.mtime, 0, "YYYY/MM/DD") }}
                <i class="time">{{
                  shareDateFormat(item.mtime, 0, "HH:mm")
                }}</i>
              </p>
            </div>
          </div>
        </div>
      </van-list>
    </van-checkbox-group>
    <div class="empty" v-else> 
      <Empty></Empty>
    </div>
  </div>
</template>

<script>
import fileList from "./fileList";
export default {
  ...fileList,
};
</script>

<style lang="less" scoped>
.list {
  padding: 15px 0;
  &.empty{
    padding: 0;
  }
  :deep(.van-list__loading),
  :deep(.van-list__finished-text) {
    margin-left: -15px;
  }
  .listItem {
    display: flex;
    min-height: 68px;
    margin-bottom: 10px;
    .listItemLeft {
      width: 36PX;
      height: 68PX;
      padding: 26px 5px 26px 15px ;
      box-sizing: border-box;
      .img-icon {
        width: 16PX;
        height: 16PX;
      }
    }
    .listItemRight {
      flex: 1;
      display: flex;
      background: #ffffff;
      border-radius: 8px;
      padding: 12px 0 12px 15px;
      box-sizing: border-box;
      .left {
        width: 20px;
        height: 20px;
        margin-top: 12px;
        margin-right: 20px;
      }
      .right {
        flex: 1;
        .name {
          font-size: 13px;
          color: #303133;
          line-height: 20px;
          margin-bottom: 8px;
        }
        .date {
          font-size: 11px;
          color: #909399;
          line-height: 16px;
        }
      }
    }
  }
  .empty{
     height: calc(
      100vh - 57px - 44px - 88px
    ); //屏幕高度 - 导航栏高度 - 排序固定栏高度 - 底部
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
