<template>
  <div>
    <el-row v-show="list.length > 0" class="list" :gutter="16">
      <el-col
        :span="4"
        :class="['item']"
        v-for="(item, index) in list"
        :key="index"
        @mouseenter="handleMouseEnter(item)"
        @mouseleave="handleMouseLeave()"
      >
        <div
          :class="[
            'item-container',
            'cursor-pointer',
            checkAll ? 'ischeckedAll' : '',
          ]"
        >
          <Icon :size="80" :icon="getIconType(item)" class="p-4 mr-4" />
          <div class="text-sm text-gray-900">{{ item.name }}</div>
          <div class="text-sm text-gray-500">
            {{ fileUtil.getFileSize(item.size) }}
          </div>
          <div class="left-top" v-show="currentItem.id === item.id || checkAll">
            <el-checkbox v-model="item.checked" size="large" />
          </div>
          <div class="right-top" v-show="currentItem.id === item.id">
            <!-- <el-popconfirm title="确定分享吗？" @confirm="handleShare(item)" :teleported="false">
            <template #reference>
              <el-icon class="mr-2" title="分享"><Share /></el-icon>
            </template>
          </el-popconfirm> -->
            <el-icon class="mr-2" title="下载" @click="handleDownload(item)"
              ><Download
            /></el-icon>
            <el-dropdown :teleported="false">
              <span class="el-dropdown-link">
                <el-icon class="more"><MoreFilled /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>
                    <el-icon><Delete /></el-icon>刪除
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-icon><EditPen /></el-icon>编辑
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-empty v-show="list.length == 0"></el-empty>
  </div>
  <!-- <el-pagination
    class="flex justify-end mt-10"
    small
    background
    :current-page="list.pageNo"
    :page-size="list.pageSize"
    :page-sizes="[10, 20, 50]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="list.totalElements"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  /> -->
</template>
<script>
import { getTemplateList } from "@/api/wps";
export default {
  data() {
    return {
      checkAll: false,
      list: [],
      currentItem: {
        id: "",
        name: "",
      },
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    async loadData() {
      const params = {};
      const res = await getTemplateList(params);
      const { w_list } = res;
      this.list = w_list;
    },

    getIconType(item) {
      let type = fileUtil.getFileType(item.name);
      return `svg-icon:${type}`;
    },

    handleMouseEnter(item) {
      this.currentItem = item;
    },
    handleMouseLeave() {
      this.currentItem = {
        id: "",
        name: "",
      };
    },
    handleDownload(row) {
      const url = fileUtil.getPdfUrl(row.downloadUrl);
      const fileName = row.name;
      fileUtil.downloadFile(url, fileName);
    },
  },
};
</script>
<style lang="scss" scoped>
.add {
  margin-bottom: 8px;
  border-radius: 4px;

  .container {
    height: 100%;
    border-radius: 4px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: rgba($color: #1a5eff, $alpha: 4%);
    cursor: pointer;
    padding: 32px 8px;

    .el-icon {
      font-size: 38px;
      color: var(--el-color-primary);
    }
  }
}

.item {
  margin-bottom: 8px;
  border-radius: 4px;
  transition: all ease 0.3s;

  .item-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 8px;

    &:hover {
      background-color: rgba($color: #1a5eff, $alpha: 6%);
    }

    .left-top {
      position: absolute;
      left: 16px;
      top: 0;
    }

    .right-top {
      position: absolute;
      right: 16px;
      top: 10px;
      font-size: 16px;
      color: var(--el-color-primary);

      .more {
        color: var(--el-color-primary);
      }
    }
  }
}

.ischeckedAll {
  background-color: rgba($color: #1a5eff, $alpha: 6%);
}
</style>
