<template>
  <div class="container">
    <a-row style="flex-flow: nowrap" :gutter="10">
      <a-col v-if="!visible2" flex="300px">
        <a-card class="category-card" title="文档分类" bordered>
          <template #title>
            <a-link
              style="font-size: 12px; color: var(--color-text-3)"
              @click="toggle2()"
            >
              <template #icon>
                <icon-left />
              </template>
              收起</a-link
            >
          </template>
          <template #extra>
            <span
              style="
                font-size: 16px;
                font-weight: 500;
                line-height: 1.5715;
                color: var(--color-text-1);
              "
              >文档分类</span
            >
          </template>
          <a-scrollbar style="height: calc(100vh - 195px); overflow: auto">
            <a-list :bordered="false" size="small">
              <a-list-item
                v-for="item in categories"
                :key="item.id"
                style="padding-right: 20px"
                :class="selectCategoryId === item.id ? 'category-selected' : ''"
                @click="categoryClickHanlder(item.id, item.allow_upload)"
              >
                <icon-font
                  class="list-icon"
                  type="my-folder-close"
                  :size="20"
                />{{ item.name }}</a-list-item
              >
            </a-list>
          </a-scrollbar>
        </a-card>
      </a-col>
      <a-col flex="auto">
        <a-card class="list-card log-card" title="文档列表">
          <template #extra>
            <a-form
              :model="filterForm"
              :label-col-props="{ span: 6 }"
              :wrapper-col-props="{ span: 12 }"
              label-align="left"
              auto-label-width
            >
              <a-row :gutter="6" justify="end">
                <a-col :span="8">
                  <a-form-item no-style row-class="mb0" field="date">
                    <a-input-search
                      v-model="filterForm.filename"
                      size="small"
                      placeholder="文件名称"
                      allow-clear
                      @clear="searchDocument()"
                      @search="searchDocument()"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item no-style row-class="mb0" field="date">
                    <a-range-picker
                      v-model="filterForm.date"
                      size="small"
                      style="width: 100%"
                      allow-clear
                      format="YYYY-MM-DD"
                      @change="searchDocument()"
                    />
                  </a-form-item>
                </a-col>
                <!-- <a-col flex="50px" style="line-height: 28px">
                  <a-form-item no-style row-class="mb0" field="date">
                    <a-link
                      style="font-size: 12px; color: var(--color-text-3)"
                      @click="toggle()"
                    >
                      <template #icon>
                        <icon-left />
                      </template>
    展开</a-link>
    </a-form-item>
</a-col> -->
              </a-row>
            </a-form>
          </template>
          <!-- <a-empty v-if="docList.length === 0" style="padding-top: 40px" /> -->
          <!-- <a-space
            wrap
            style="padding: 20px 16px; min-height: 40vh"
            :size="40"
            align="baseline"t
          > -->
          <a-scrollbar style="height: calc(100vh - 238px); overflow: auto">
            <div class="file-list-container">
              <div
                v-if="allowUpload"
                class="file-list-item"
                style="justify-content: center; margin-top: 10px"
              >
                <div style="width: 120px">
                  <div class="file-list-panel"></div>
                  <a-upload
                    v-if="!showUploadProgress"
                    v-model:fileList="docFile"
                    action="/"
                    :auto-upload="false"
                    draggable
                    :limit="1"
                    :show-file-list="false"
                    @change="uploadocFileHandler"
                  >
                    <template #upload-button>
                      <div
                        style="
                          background-color: var(--color-fill-2);
                          width: 110px;
                          height: 110px;
                          text-align: center;
                        "
                      >
                        <a-tooltip content="点击上传文档">
                          <a-avatar
                            :size="110"
                            shape="square"
                            :style="{ backgroundColor: 'var(--color-fill-3)' }"
                          >
                            <IconPlus />
                          </a-avatar>
                        </a-tooltip>
                      </div>
                    </template>
                  </a-upload>
                  <!-- <a-avatar
                v-else
                :size="110"
                shape="square"
                :style="{ backgroundColor: 'var(--color-fill-3)' }"
              > -->
                  <a-progress v-else :percent="currentProgress / 100" />
                  <!-- <icon-sync spin /> -->
                  <!-- </a-avatar> -->
                </div>
              </div>
              <div
                v-for="item in docList"
                :key="item.id"
                :class="
                  selectedDoc === item.id
                    ? 'file-list-item file-hover'
                    : 'file-list-item'
                "
                @mouseover="handleMouseOver(item)"
                @mouseleave="handleMouseLeave()"
                @click="overviewDetail(item)"
              >
                <div style="width: 120px">
                  <div
                    class="file-list-panel"
                    style="
                      display: flex;
                      justify-content: end;
                      margin: 3px;
                      height: 22px;
                    "
                  >
                    <div
                      v-if="selectedDoc === item.id && !item.editing"
                      style="padding: 1px 3px; background: #fff"
                    >
                      <span
                        class="file-cover-item"
                        title="下载文件"
                        style="margin-right: 3px"
                        @click="downloadDoc(item)"
                      >
                        <icon-font type="my-d-download" :size="20" />
                      </span>
                      <a-dropdown
                        trigger="click"
                        popup-container="body"
                        @popup-visible-change="changeDropMenu($event, item)"
                      >
                        <span class="file-cover-item">
                          <icon-more :size="20" />
                        </span>
                        <template #content>
                          <a-doption @click="archiveDoc(item)">
                            <template #icon>
                              <icon-font
                                :type="
                                  item.archived
                                    ? 'my-archiver-b'
                                    : 'my-archiver'
                                "
                                :size="22"
                              />
                            </template>
                            {{ item.archived ? '撤回归档' : '归档文件' }}
                          </a-doption>
                          <a-doption @click="showCopyDocModal(item)">
                            <template #icon>
                              <icon-font type="my-copy" :size="22" />
                            </template>
                            复制文件
                          </a-doption>
                          <a-doption @click="renameDoc(item)">
                            <template #icon>
                              <icon-font type="my-rename" :size="23" />
                            </template>
                            重命名
                          </a-doption>
                          <a-doption @click="removeDoc(item)">
                            <template #icon>
                              <icon-font type="my-remove" :size="22" />
                            </template>
                            删除文件
                          </a-doption>
                        </template>
                      </a-dropdown>
                      <!-- </span> -->
                    </div>
                    <!--  -->
                  </div>
                  <div class="file-list-icon">
                    <icon-font
                      v-if="fileSuffix.includes(item.extension)"
                      :size="50"
                      :type="'my-' + item.extension"
                    />
                    <icon-font
                      v-else
                      class="list-icon"
                      :type="'my-other'"
                      :size="50"
                    />
                  </div>
                  <p class="file-list-label">
                    <a-textarea
                      v-if="item.editing"
                      ref="inputRef"
                      v-model="item.filename"
                      v-focus="true"
                      auto-size
                      placeholder="输入新的文件名"
                      :allow-clear="false"
                      @blur="confirmFilename(item)"
                      @focus="focusFilename($event, item.filename)"
                    />
                    <a-typography-paragraph
                      v-else
                      style="margin-bottom: 5px"
                      :ellipsis="{
                        rows: 2,
                        showTooltip: {
                          type: 'popover',
                          props: {
                            position: 'bottom',
                            contentStyle: {
                              width: '200px'
                            }
                          }
                        }
                      }"
                      @dblclick="renameDoc(item)"
                      >{{ item.filename }}</a-typography-paragraph
                    >
                  </p>
                  <div
                    class="file-list-size"
                    style="
                      font-size: 12px;
                      color: var(--color-text-3);
                      padding: 0 0 5px 0;
                    "
                  >
                    {{ formatBytesOptimized(item.size) }}
                  </div>
                  <div v-if="item.showDownloadProgress" class="download-cover">
                    <a-progress :percent="item.downloadProgress! / 100" />
                  </div>
                </div>
              </div>
            </div>
            <!-- </a-space> -->
          </a-scrollbar>

          <div
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
            "
          >
            <div style="margin-left: 20px">
              <a-link
                v-if="visible2"
                style="font-size: 12px; color: var(--color-text-3)"
                @click="toggle2()"
              >
                <template #icon>
                  <icon-right />
                </template>
                展开</a-link
              >
            </div>
            <div
              style="display: flex; justify-content: end; align-items: center"
            >
              <Page
                :page="page"
                style="margin-right: 10px; margin-top: 0px"
                @change="pageChangehandle"
              />
              <div style="margin-right: 20px">
                <a-link
                  v-if="visible"
                  style="font-size: 12px; color: var(--color-text-3)"
                  @click="toggle()"
                >
                  <template #icon>
                    <icon-left />
                  </template>
                  展开</a-link
                >
              </div>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col v-if="!visible" flex="400px">
        <a-card class="attribute-card" title="文档详情">
          <template #extra>
            <a-link
              style="font-size: 12px; color: var(--color-text-3)"
              @click="toggle()"
            >
              <template #icon>
                <icon-right />
              </template>
              收起</a-link
            >
          </template>
          <a-scrollbar style="height: calc(100vh - 205px); overflow: auto">
            <a-descriptions
              :column="1"
              style="padding-top: 16px"
              :label-style="{
                paddingRight: '10px',
                paddingBottom: '20px',
                fontWeight: 'bold',
                color: 'rgb(var(--gray-8))'
              }"
              :value-style="{ paddingBottom: '20px' }"
            >
              <a-descriptions-item label="文件名称：">
                <a-typography-paragraph
                  style="margin-bottom: 0"
                  :ellipsis="{
                    rows: 3,
                    showTooltip: true
                  }"
                  >{{ detail.doc?.filename }}</a-typography-paragraph
                >
              </a-descriptions-item>
              <a-descriptions-item label="文件类型：">
                {{ detail.doc?.category_name }}
              </a-descriptions-item>
              <a-descriptions-item label="所属项目：">
                <a-typography-paragraph
                  style="margin-bottom: 0"
                  :ellipsis="{
                    rows: 1,
                    showTooltip: true
                  }"
                  >{{ detail.doc?.prj_name }}</a-typography-paragraph
                >
              </a-descriptions-item>
              <a-descriptions-item label="项目编号：">
                {{ detail.doc?.prj_id }}
              </a-descriptions-item>
              <a-descriptions-item label="上传时间：">
                {{ detail.doc?.uploaded_at }}
              </a-descriptions-item>
              <a-descriptions-item label="上传人：">
                {{ detail.doc?.creator_name }}
              </a-descriptions-item>
              <a-descriptions-item label="文件大小：">
                {{ formatBytesOptimized(detail.doc?.size) }}
              </a-descriptions-item>
            </a-descriptions>
          </a-scrollbar>
        </a-card>
        <!-- <a-card class="attribute-card" title="文档权限" style="height: 61.8vh">
          <template #extra>
            <icon-settings :size="20" />
          </template>
          <a-descriptions
            :column="1"
            style="padding-top: 16px"
            :label-style="{
              paddingRight: '10px',
              paddingBottom: '20px',
              fontWeight: 'bold',
              color: 'rgb(var(--gray-8))'
            }"
            :value-style="{ paddingBottom: '20px' }"
          >
            <a-descriptions-item label="可阅读者：">
              张xx, 阮xx，郭xx
            </a-descriptions-item>
            <a-descriptions-item label="可下载者：">
              阮xx，郭xx
            </a-descriptions-item>
          </a-descriptions>
        </a-card> -->
      </a-col>
    </a-row>
    <vModal
      v-model:visible="copyDocModal"
      title="复制文件"
      :mask-closable="false"
      @modal-handle-ok="confirmCopyHandler"
      @modal-handle-cancel="cancelCopyHandler"
    >
      <div style="padding: 5px 15px">
        <a-form
          ref="copyDocFormRef"
          :model="copyDocForm"
          :auto-label-width="true"
          label-align="right"
          :rules="copyDocFormRules"
        >
          <a-form-item label="复制至目录" field="categoryId">
            <a-select
              v-model="copyDocForm.categoryId"
              placeholder="请选择需目录"
              allow-clear
              allow-search
            >
              <a-option
                v-for="{ id, name } in categories.filter(
                  item => item.allow_upload === true
                )"
                :key="id"
                :value="id"
                :label="name"
              ></a-option>
            </a-select>
          </a-form-item>
        </a-form>
      </div>
    </vModal>
  </div>
</template>

<script lang="ts" setup>
import {
  Icon,
  FileItem,
  Message,
  Modal,
  FormInstance
} from '@arco-design/web-vue'
import { IconFontUrl } from '@/enums/api'
import { h, onMounted, reactive, ref } from 'vue'
import Page from '@/components/page/index.vue'
import { getDocTypeList } from '@/api/base/base'
import { PrjDocument } from '@/types/document'
import {
  archiveDocument,
  copyDocument,
  getDocumentList,
  getDownloadDocumentUrl,
  getUploadDocumentUrl,
  removeDocument,
  renameDocument
} from '@/api/project/document'
import usePage, { IPage } from '@/components/page/index'
import { uploadFile, downloadFile } from '@/api/client'
import { formatBytesOptimized } from '@/utils'
import useVisible from '@/hooks/visible'
import vModal from '@/components/modal/index.vue'

const copyDocFormRef = ref<FormInstance>()
const copyDocForm = reactive<{
  categoryId?: string
  docId?: string
}>({})

const copyDocFormRules = {
  categoryId: [{ required: true, message: '目录不能为空', trigger: 'blur' }]
}

const copyDocModal = ref(false)
const showDropdwon = ref(false) // 是否显示group对话框
const oldFilename = ref()
const { visible, toggle } = useVisible(false)
const { visible: visible2, toggle: toggle2 } = useVisible(false)
const props = defineProps({
  prjId: {
    type: String
  }
})

const fileSuffix = [
  'png',
  'ppt',
  'jpg',
  'image',
  'ofd',
  'bmp',
  'mp4',
  'htm',
  'excel',
  'ceb',
  'ett',
  'dpt',
  'docx',
  'gif',
  'flv',
  'doc',
  'dps',
  'pdf',
  'jasper',
  'dwg',
  'java',
  'tiff',
  'jpeg',
  'rtf',
  'dot',
  'et',
  'wpt',
  'xsd',
  'txt',
  'pptx',
  'wps',
  'ps',
  'xlsx',
  'giff',
  'tif',
  'xls',
  'html',
  'word',
  'sep',
  'gd',
  'wt',
  'svg',
  'cebx',
  'xml',
  'zip'
]

// const isUploading = ref<boolean>(false)

const currentProgress = ref(0) // 控制进度条
const showUploadProgress = ref(false)

/**
 * 条件筛选表单
 */
const filterForm = reactive<{
  filename?: string
  date?: string[]
}>({
  filename: undefined,
  date: undefined
})

const { page } = usePage()

const docFile = ref<FileItem[]>([])
const allowUpload = ref(true)
const selectedDoc = ref<string>()
const categories = ref<
  {
    id: string
    name: string
    color: string
    allow_upload: boolean
  }[]
>([])

const detail = reactive<{ doc?: PrjDocument }>({
  doc: undefined
}) // 客户详情

const docList = ref<PrjDocument[]>([])
const selectCategoryId = ref()
const IconFont = Icon.addFromIconFontCn({
  src: IconFontUrl.URL
})

const handleMouseOver = (item: PrjDocument) => {
  selectedDoc.value = item.id
}

const handleMouseLeave = () => {
  if (showDropdwon.value) {
    return
  }
  selectedDoc.value = undefined
}

// const debounceChangeMouseLeave = useThrottleFn(handleMouseLeave, 1000)

/**
 * dropmenu隐藏事件
 * @param visible
 * @param group
 */
const changeDropMenu = (vis: boolean, _item: PrjDocument) => {
  showDropdwon.value = vis
  selectedDoc.value = vis ? _item.id : undefined
}

const categoryClickHanlder = (id: string, allow: boolean) => {
  selectCategoryId.value = id
  selectedDoc.value = undefined
  allowUpload.value = allow
  getList().then(() => console.log('获取项目列表'))
}

const getType = async () => {
  const { list } = await getDocTypeList()
  categories.value = list
  if (list.length > 0) {
    selectCategoryId.value = list[0].id
  }
}

/**
 * 获取筛选框列表
 */
const getFilterForm = () => {
  const { date, filename } = filterForm
  const beginFrom = date ? date[0] : date
  const endTo = date ? date[1] : date
  return {
    filename: filename === '' ? undefined : filename,
    beginFrom,
    endTo
  }
}

const searchDocument = () => {
  page.pageIndex = 1
  getList()
  toggle2()
}

/**
 * 获取项目文档列表
 */
const getList = async () => {
  const { filename, beginFrom, endTo } = getFilterForm()
  const { pageIndex, pageSize } = page
  const { list, total } = await getDocumentList({
    page_no: pageIndex,
    page_size: pageSize,
    prj_id: props.prjId,
    filename,
    category_id: selectCategoryId.value,
    begin_from: beginFrom,
    end_to: endTo
  })
  page.total = total
  docList.value = list
}

const showCopyDocModal = (item: PrjDocument) => {
  copyDocForm.docId = item.id
  copyDocModal.value = true
}

/**
 * 分页变化事件
 * @param argPage
 */
const pageChangehandle = (argPage: IPage): void => {
  page.pageIndex = argPage.pageIndex
  page.pageSize = argPage.pageSize
  getList().then(() => console.log('获取项目列表'))
}

// 自动聚焦重命名输入框，并选中排除后缀的文件名
const focusFilename = (e: any, fileName: string) => {
  const lastDotIndex = fileName.lastIndexOf('.')
  e.currentTarget.setSelectionRange(0, lastDotIndex)
}

// 文件重命名
const confirmFilename = async (item: PrjDocument) => {
  if (item.filename === '') {
    Message.error('文件名不能为空')
    return
  }
  if (item.filename === oldFilename.value) {
    oldFilename.value = undefined
    item.editing = false
    return
  }
  try {
    await renameDocument({ id: item.id, filename: item.filename })
    item.editing = false
    oldFilename.value = undefined
    Message.success('重命名成功！')
  } catch (_e) {
    item.filename = oldFilename.value
    item.editing = false
  }
}
/**
 * 查看详情
 * @param item
 */
const overviewDetail = (item: PrjDocument) => {
  detail.doc = item
  selectedDoc.value = item.id
}

/**
 * 下载文档
 * @param item
 */
const downloadDoc = async (item: PrjDocument) => {
  try {
    detail.doc = item
    const { url } = await getDownloadDocumentUrl({ id: item.id })
    // const downloadUrl = url.replace(/https:\/\/pmr\.surkw\.com:29000\//, '')
    Message.info('开始下载')
    await downloadFile(item.filename!, url, getDownloadProgress, item)
    item.showDownloadProgress = false
    item.downloadProgress = 0
    Message.success('下载成功')
  } catch (e) {
    item.showDownloadProgress = false
    item.downloadProgress = 0
  }
}

// 讲文件归档
const archiveDoc = async (doc: PrjDocument) => {
  const { id, filename } = doc
  const title = {
    setup() {
      return () => h('strong', '提示')
    }
  }
  const ModalContent = {
    setup() {
      return () =>
        h('span', { style: 'margin-left: 10px;' }, [
          h('span', `确认${doc.archived ? '撤回' : ''}归档文件： `),
          h('strong', `${filename}`),
          h('span', ` 吗？`)
        ])
    }
  }
  Modal.info({
    title: () => h(title),
    content: () => h(ModalContent),
    alignCenter: true,
    titleAlign: 'start',
    draggable: true,
    escToClose: true,
    width: 350,
    simple: true,
    hideCancel: false,
    onOk: async () => {
      try {
        await archiveDocument({ id, archive: !doc.archived })
        doc.archived = !doc.archived
        Message.success(`${doc.archived ? '归档成功' : '归档已撤回'}`)
      } catch (e) {
        console.error(e)
      }
    }
  })
}

// 获取上传进度信息
const getDownloadProgress = (e: ProgressEvent, item: PrjDocument) => {
  item.showDownloadProgress = true
  item.downloadProgress = Number(((e.loaded / e.total) * 100).toFixed(0))
}

// 取消复制
const cancelCopyHandler = () => {
  return copyDocFormRef.value!.resetFields() // 初始化表单值
}

const confirmCopyHandler = async (cb: (closed: boolean) => void) => {
  const isValid = await copyDocFormRef.value?.validate()
  if (isValid) {
    return cb(false)
  }
  const { categoryId, docId } = copyDocForm
  try {
    await copyDocument({ id: docId!, target: categoryId! })
    Message.success('复制成功')
    return cb(true)
  } catch (_e) {
    return cb(true)
  }
}

// 组件第一次挂载
onMounted(async () => {
  page.pageSize = 50
  await getType().then(() => console.log('获取类型列表'))
  getList().then(() => console.log('获取列表'))
})

// 删除文件
const removeDoc = async (doc: PrjDocument) => {
  const { id, filename } = doc
  const title = {
    setup() {
      return () => h('strong', '警告')
    }
  }
  const ModalContent = {
    setup() {
      return () =>
        h('span', { style: 'margin-left: 10px;' }, [
          h('span', `确认删除文件： `),
          h('strong', `${filename}`),
          h('span', ` 吗？`)
        ])
    }
  }
  Modal.warning({
    title: () => h(title),
    content: () => h(ModalContent),
    alignCenter: true,
    titleAlign: 'start',
    draggable: true,
    escToClose: true,
    width: 350,
    simple: true,
    hideCancel: false,
    onOk: async () => {
      try {
        await removeDocument({ id })
        const index = docList.value.findIndex(item => item.id === id)
        docList.value.splice(index, 1)
        Message.success('删除成功')
      } catch (e) {
        console.error(e)
      }
    }
  })
}

// 文件重命名
const renameDoc = (doc: PrjDocument) => {
  oldFilename.value = doc.filename
  doc.editing = true
}

// 获取上传进度信息
const uploadProgress = (e: ProgressEvent) => {
  showUploadProgress.value = true
  currentProgress.value = Number(((e.loaded / e.total) * 100).toFixed(0))
}

// 上传项目文档
const uploadocFileHandler = async (_: FileItem[], currentFile: FileItem) => {
  console.log(currentFile.file)
  try {
    const { url, form_data: data } = await getUploadDocumentUrl({
      prj_id: props.prjId!,
      category_id: selectCategoryId.value,
      filename: currentFile.file!.name
    })
    Message.info('开始上传')
    await uploadFile(
      url,
      {
        data,
        file: currentFile.file!
      },
      (e: ProgressEvent) => uploadProgress(e),
      1000 * 60 * 60
    )
    showUploadProgress.value = false
    currentProgress.value = 0
    Message.success('上传成功')
    getList()
    docFile.value = []
  } catch (e) {
    showUploadProgress.value = false
    currentProgress.value = 0
    docFile.value = []
  }
}
</script>

<style scoped lang="less">
.container {
  padding: 20px 20px 20px 20px;

  .attribute-card {
    border-top: none;
    border-left: none;
    border-right: none;

    :deep(.arco-card-body) {
      padding-top: 10px;
      padding-bottom: 0;
      padding-left: 30px;
    }
  }

  .category-card {
    :deep(.arco-card-header) {
      // padding: 20px;
    }

    border-top: none;
    border-left: none;
    border-right: none;

    :deep(.arco-card-body) {
      padding-top: 0px;
      padding-bottom: 0;
      padding-left: 30px;
    }

    .category-selected {
      background: var(--color-primary-light-1);
      // background: rgb(var(--primary-1));
    }
  }

  .list-card {
    :deep(.arco-card-header) {
      padding: 20px;
    }

    border-top: none;
    border-left: none;
    border-right: none;

    :deep(.arco-card-body) {
      padding-top: 0px;
      padding-bottom: 0;
      padding-left: 30px;
    }

    .item-container {
      padding-top: 20px;

      :deep(.arco-descriptions-item-label) {
        font-weight: normal;
      }
    }

    .file-list-container {
      display: grid;
      padding: 10px 40px;
      grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
      grid-gap: 10px 50px;
      justify-items: center;

      // color: #666;
      .file-list-item {
        width: 120px;
        // height: 120px;
        flex-direction: column;
        justify-content: start;
        align-items: center;
        text-align: center;
        display: flex;
        position: relative;

        // border: 1px dashed #ccc;
        .file-list-panel {
        }

        cursor: pointer;

        .file-list-icon {
          padding-top: 5px;
          display: inline-block;
          width: 60px;
          height: 60px;
        }

        .file-list-label {
          padding: 2px 8px 0;
          display: block;
          max-width: 100%;
          max-height: 54px;
          // height: 20px;
          line-height: 18px;
          color: var(--color-text-3);
          font-size: 12px;
          word-break: break-all;
          text-align: center;
          // overflow: hidden;
          margin-top: 2px;
          margin-bottom: 8px;
          // white-space: nowrap;
          // text-overflow: ellipsis;
        }

        .download-cover {
          width: 100%;
          height: 100%;
          // background: rgba(13, 10, 49, 0.9);
          position: absolute;
          top: 0;
          left: 0;
          z-index: 100;
          overflow: hidden;
          vertical-align: middle;
          border-radius: 5px;
          justify-items: center;
          background: #0d0a31;
          color: rgb(var(--primary-6));

          .arco-progress {
            height: 100%;
            padding: 0 8px;

            :deep(.arco-progress-line-text) {
              margin-left: 0;
            }
          }
        }

        .file-cover {
          width: 100%;
          height: 100%;
          background: rgba(13, 10, 49, 0.9);
          position: absolute;
          top: 0;
          left: 0;
          z-index: 100;
          overflow: hidden;
          vertical-align: middle;
          border-radius: 5px;
          display: none;
          grid-template-columns: repeat(auto-fill, minmax(50%, max-content));
          justify-items: center;

          .file-cover-item {
            text-align: center;
            color: #fff;
            font-size: 24px;
            cursor: pointer;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
          }

          .file-cover-item:hover {
            // background: #0d0a31;
            background: var(--color-primary-light-1);
            color: rgb(var(--primary-6));
          }
        }
      }

      .file-list-item:hover {
        .file-cover {
          display: grid;
        }
      }

      .file-hover {
        // background: #f7f9fc;
        background: var(--color-primary-light-1);
      }
    }
  }

  .log-card {
    :deep(.arco-card-body) {
      padding-right: 0;
      padding-bottom: 10px;
      padding-left: 0;
    }

    :deep(.arco-card-actions) {
      justify-content: start;
    }
  }
}

:deep(.arco-list-wrapper) {
  padding-top: 16px;
}

:deep(.arco-list-item-content) {
  display: flex;
  align-items: center;
  cursor: pointer;

  .list-icon {
    margin-right: 5px;
  }
}
</style>
