<template>
  <div>
    <Breadcrumb :items="['文档中心', '项目归档']" :title="'项目归档'" />
    <div class="container">
      <a-row style="flex-flow: nowrap" :gutter="10">
        <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-select
                        v-model="filterForm.prjId"
                        allow-clear
                        allow-search
                        placeholder="选择项目信息"
                        @change="getList"
                      >
                        <a-option
                          v-for="{ id, name } in prjList"
                          :key="id"
                          :value="id"
                          :label="name"
                        ></a-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                  <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="8">
                    <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-row>
              </a-form>
            </template>
            <a-scrollbar style="height: calc(100vh - 288px); overflow: auto">
              <div class="file-list-container">
                <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()"
                >
                  <div style="width: 120px; padding: 2px 8px 0">
                    <div
                      class="file-list-panel"
                      style="display: flex; justify-content: end"
                    >
                      <div v-if="selectedDoc === item.id">
                        <span
                          class="file-cover-item"
                          title="下载"
                          style="margin-right: 3px"
                          @click="downloadDoc(item)"
                        >
                          <icon-font type="my-d-download" :size="20" />
                        </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-typography-paragraph
                        style="margin-bottom: 5px"
                        :ellipsis="{
                          rows: 2,
                          showTooltip: {
                            type: 'popover',
                            props: {
                              position: 'bottom',
                              contentStyle: {
                                width: '200px'
                              }
                            }
                          }
                        }"
                        >{{ 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 v-else class="file-cover">
                  <span
                    class="file-cover-item"
                    title="查看详情"
                    @click="overviewDetail(item)"
                    ><icon-file
                  /></span>
                  <span
                    class="file-cover-item"
                    title="下载"
                    @click="downloadDoc(item)"
                    ><icon-download
                  /></span>
                  <span
                    class="file-cover-item"
                    title="删除"
                    @click="removeDoc(item)"
                    ><icon-delete
                  /></span>
                </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 - 255px); 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>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Icon, Message } from '@arco-design/web-vue'
import { IconFontUrl } from '@/enums/api'
import { onMounted, reactive, ref } from 'vue'
import Page from '@/components/page/index.vue'
import { PrjDocument } from '@/types/document'
import { getDocumentList, getDownloadDocumentUrl } from '@/api/project/document'
import usePage, { IPage } from '@/components/page/index'
import { downloadFile } from '@/api/client'
import { formatBytesOptimized } from '@/utils'
import useVisible from '@/hooks/visible'
import { getProjectList } from '@/api/project/info'

const { visible, toggle } = useVisible(false)
const { visible: visible2, toggle: toggle2 } = useVisible(false)

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 filterForm = reactive<{
  prjId?: string
  filename?: string
  date?: string[]
}>({
  filename: undefined,
  date: undefined
})

const { page } = usePage()
const prjList = ref<{ id: string; name: string }[]>([])
const selectedDoc = ref<string>()

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

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

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

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

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

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

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

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

/**
 * 下载文档
 * @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 getDownloadProgress = (e: ProgressEvent, item: PrjDocument) => {
  item.showDownloadProgress = true
  item.downloadProgress = Number(((e.loaded / e.total) * 100).toFixed(0))
}

// 获取主责人账号信息
const getProjects = async () => {
  const { list } = await getProjectList({ page_no: 1, page_size: 9999 })
  prjList.value = list
}

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

<script lang="ts">
export default {
  name: 'DocumentArchive'
}
</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 {
    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: center;
        align-items: center;
        text-align: center;
        display: flex;
        position: relative;

        // border: 1px dashed #ccc;
        .file-list-panel {
          height: 30px;
          text-align: right;
          .file-cover-item {
            line-height: 30px;
          }
        }
        cursor: pointer;
        .file-list-icon {
          padding-top: 5px;
          display: inline-block;
          width: 60px;
          height: 60px;
        }
        .file-list-label {
          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>
