<template>
  <div class="upload-files-container">
    <div class="filter-container">
      <div class="filter-group">
        <a-date-picker
          v-model="upload_date"
          placeholder="上传日期"
          @change="selfSearch"
          class="filter-item"
        />
        <a-select
          class="filter-item"
          v-model="fusetype"
          :options="fusetypes"
          placeholder="分类"
          @change="selfSearch"
          allow-clear
        />
        <a-button type="primary" @click="selfSearch" class="search-btn">
          查询
        </a-button>
      </div>
    </div>

    <div v-if="files.length === 0" class="empty-state">
      <i class="anticon anticon-inbox empty-icon"></i>
      <p>暂无附件数据</p>
    </div>

    <div v-else class="file-timeline">
      <div v-for="(item, index) in files" :key="'fileGroup' + index" class="date-group">
        <div class="date-header">
          <i class="anticon anticon-calendar"></i>
          <span>{{ item.days }}</span>
        </div>
        <div class="file-grid">
          <div v-for="file in item.arrays" :key="'fileItem' + file.id" class="file-card">
            <div class="card-content">
              <div class="file-preview">
                <img
                  v-if="file.f_filetype.includes('jpg') || file.f_filetype.includes('png')"
                  :src="file.f_downloadpath"
                  class="preview-image"
                  @click="previewImage(file.f_downloadpath)"
                />
                <div v-else class="file-icon">
                  <i class="anticon anticon-file"></i>
                </div>
              </div>
              <div class="file-info">
                <div class="info-row">
                  <span class="info-label"><i class="anticon anticon-clock-circle"></i> 上传时间:</span>
                  <span class="info-value">{{ file.f_uploaddate }}</span>
                </div>
                <div class="info-row">
                  <span class="info-label"><i class="anticon anticon-user"></i> 操作员:</span>
                  <span class="info-value">{{ file.f_username }}</span>
                </div>
                <div class="info-row">
                  <span class="info-label"><i class="anticon anticon-tag"></i> 分类:</span>
                  <span class="info-value">{{ file.fusetype }}</span>
                </div>
                <div class="info-row remarks">
                  <span class="info-label"><i class="anticon anticon-message"></i> 说明:</span>
                  <span class="info-value">{{ file.fremarks || '无' }}</span>
                </div>
              </div>
              <div class="file-actions">
                <a-button
                  type="link"
                  :href="file.f_downloadpath"
                  target="_blank"
                  class="action-btn preview-btn"
                >
                  <i class="anticon anticon-eye"></i>
                  预览
                </a-button>
                <a-button
                  v-if="isDelete === '1'"
                  type="link"
                  danger
                  @click="delet(file.id)"
                  class="action-btn delete-btn"
                >
                  <i class="anticon anticon-delete"></i>
                  删除
                </a-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { post } from '@vue2-client/services/api'
import { del } from '@vue2-client/services/api/restTools'

export default {
  name: 'XUploadFilesView',
  props: {
    currUserInfo: {
      type: Object,
      default: () => undefined
    }
  },
  data () {
    return {
      upload_date: null,
      fusetype: null,
      files: [],
      fusetypes: [],
      isDelete: '0'
    }
  },
  methods: {
    async getfusetypes () {
      this.fusetypes = [{ label: '全部', value: '' }]
      const res = await post('/api/af-revenue/logic/getFileUseType', {})
      this.fusetypes.push(...res
        .filter(item => item.fusetype && item.fusetype.trim() !== '')
        .map(item => ({ label: item.fusetype, value: item.fusetype })))
      this.fusetype = ''
    },
    async getFiles () {
      if (!this.currUserInfo) return
      this.files = []
      let condition = `f_blobid = '${this.currUserInfo.f_userinfo_id}'`
      if (this.upload_date) {
        condition += ` and CONVERT(VARCHAR(100), f_uploaddate, 23) = '${this.upload_date}'`
      }
      if (this.fusetype) {
        condition += ` and fusetype = '${this.fusetype}'`
      }
      const res = await post('/api/af-revenue/logic/getAllFiles', { data: { condition } })
      this.files = res.days.map(day => ({
        days: day.uploadday,
        arrays: res.array.filter(file => file.uploadday === day.uploadday)
      }))
    },
    async delet (fileId) {
      await del('api/af-revenue/entity/save/t_files', { id: fileId }, { resolveMsg: '删除成功', rejectMsg: '删除失败' })
      this.getFiles()
    },
    selfSearch () {
      this.getFiles()
    },
    previewImage (url) {
      window.open(url, '_blank')
    }
  },
  mounted () {
    if (this.$login.r.includes('上传附件删除')) {
      this.isDelete = '1'
    }
    this.getFiles()
    this.getfusetypes()
  }
}
</script>

<style scoped>
.upload-files-container {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background-color: #f9fafc;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 过滤区样式 */
.filter-container {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(240, 240, 240, 0.8);
  transition: all 0.3s ease;
}

.filter-container:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.filter-item {
  min-width: 200px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  border-radius: 6px;
}

.search-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  border-radius: 6px;
  padding: 0 16px;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(24, 144, 255, 0.2);
  justify-content: center;
}

.search-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(24, 144, 255, 0.3);
}

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
  background-color: #fff;
  border-radius: 10px;
  color: #8c8c8c;
  border: 1px dashed #e8e8e8;
  transition: all 0.3s ease;
}

.empty-icon {
  font-size: 48px;
  color: #bfbfbf;
  margin-bottom: 16px;
}

.empty-state p {
  font-size: 16px;
  margin-top: 8px;
  color: #8c8c8c;
}

/* 文件时间线 */
.file-timeline {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.date-group {
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(240, 240, 240, 0.8);
  transition: all 0.3s ease;
}

.date-group:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.date-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #e6f7ff, #f0f5ff);
  border-bottom: 1px solid #e6f0ff;
  font-weight: 500;
  color: #1890ff;
  font-size: 15px;
}

.date-header i {
  font-size: 18px;
}

/* 文件网格 */
.file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

/* 文件卡片 */
.file-card {
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.3s ease;
  border: 1px solid #f0f0f0;
  height: 100%;
  background-color: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.03);
}

.file-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  border-color: #e6f7ff;
}

.card-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 文件预览 */
.file-preview {
  height: 200px;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid #f0f0f0;
}

.preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  cursor: zoom-in;
}

.preview-image:hover {
  transform: scale(1.08);
}

.file-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 64px;
  color: #bfbfbf;
  background-color: #fafafa;
  transition: all 0.3s ease;
}

.file-icon:hover {
  color: #1890ff;
}

.file-icon i {
  opacity: 0.7;
}

/* 文件信息 */
.file-info {
  padding: 16px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: #fff;
}

.info-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: #595959;
  line-height: 1.5;
}

.info-label {
  font-weight: 500;
  color: #8c8c8c;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 80px;
}

.info-label i {
  font-size: 14px;
  color: #1890ff;
}

.info-value {
  color: #262626;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.remarks .info-value {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.6;
  color: #434343;
}

/* 操作按钮 */
.file-actions {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid #f0f0f0;
  background-color: #fafafa;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  border-radius: 4px;
  padding: 4px 12px;
  transition: all 0.3s ease;
}

.action-btn i {
  font-size: 14px;
}

.preview-btn {
  color: #1890ff;
}

.preview-btn:hover {
  background-color: #e6f7ff;
}

.delete-btn {
  color: #ff4d4f;
}

.delete-btn:hover {
  background-color: #fff1f0;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .filter-group {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-item {
    width: 100%;
    min-width: auto;
  }

  .search-btn {
    width: 100%;
  }

  .file-grid {
    grid-template-columns: 1fr;
  }

  .upload-files-container {
    padding: 16px;
  }
}

@media (max-width: 480px) {
  .file-preview {
    height: 160px;
  }

  .date-header {
    padding: 12px 16px;
  }

  .file-grid {
    padding: 12px;
    gap: 12px;
  }
}
</style>
