<script setup>
import Util from "../../Util/index.js";
import {computed, ref, watch} from "vue";
import minimizeStr from '../../components/minimize-str/index.vue'

let props = defineProps(['isViewDownloadRecord', 'shareFiles', 'viewType', 'currentFile', 'currentSite'])
let emits = defineEmits(['close'])
let isViewDownloadRecord = computed(() => {
  return props.isViewDownloadRecord
})
let computedDownloadRecord = computed(() => {
  let downloadRecord = []

  if(props.viewType === 'single')
    downloadRecord.push(...props.currentFile.downloadRecords)
  else
    props.shareFiles.forEach((file) => {
      if(file.downloadRecords !== undefined)
        file.downloadRecords.forEach((record) => {
          downloadRecord.push({name:file.name, path:file.filePath, username:file.username, ...record})
        })
    })

  return downloadRecord
})
let filterResult = ref([])
let filterCondition = [
  {label:'筛选时间', value:'time'},
  {label:'筛选ip', value:'ip'},
  {label:'筛选ua', value:'ua'},
]

let filterParam = ref('')
let filterBy = ref('ip')

watch(props.viewType, () => {
  if(props.viewType === 'all') {
    if (filterCondition.length === 3)
      filterCondition.push({label: '筛选分享人', value: 'sharer'})
  } else if(filterCondition.length === 4)
    filterCondition.pop()
})
watch(filterParam, () => {
    filterResult.value.splice(0)
    switch (filterBy.value){
      case 'time':
        if(filterParam.value[0] !== undefined)
          computedDownloadRecord.value.forEach((record) => {
            if(filterParam.value[0].getTime() <= record.time && filterParam.value[1].getTime() >= record.time)
              filterResult.value.push(record)
          })
        break
      case 'ip':
        if(filterParam.value.trim() !== ''){
          computedDownloadRecord.value.forEach((record) => {
            if(record.ip.includes(filterParam.value))
              filterResult.value.push(record)
          })
        }
        break
      case 'ua':
        if(filterParam.value.trim() !== ''){
          computedDownloadRecord.value.forEach((record) => {
            if(record.ua.includes(filterParam.value))
              filterResult.value.push(record)
          })
        }
        break
      case 'sharer':
        if(filterParam.value.trim() !== ''){
          computedDownloadRecord.value.forEach((record) => {
            if(record.username.includes(filterParam.value))
              filterResult.value.push(record)
          })
        }
    }
})

function handleSelectChange(){
  filterParam.value = ""
}
function close(){
  filterBy.value = 'ip'
  filterParam.value = ""
  emits('close')
}


</script>

<template>
  <el-dialog title="查看下载记录" v-model="isViewDownloadRecord" :width="viewType==='single'?null:'1250px'" @close="close" top="0">
    <el-row>
      <el-col :span="10" v-if="viewType === 'single'">
        当前文件:{{currentFile.name}}
      </el-col>
      <el-col :span="10" v-if="viewType === 'all'">
        当前节点:{{currentSite.hostname}}
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-select placeholder="筛选" v-model="filterBy" @change="handleSelectChange">
          <el-option v-for="condition in filterCondition" :label="condition.label" :value="condition.value"/>
        </el-select>
        <div v-show="filterBy === 'time'" style="display: inline">
          <el-date-picker type="datetimerange" v-model="filterParam"/>
        </div>
        <el-input style="width: 300px" v-show="filterBy !== 'time'" v-model="filterParam">
        </el-input>
      </el-col>
    </el-row>

    <el-table :data="filterParam.length>1?filterResult:computedDownloadRecord" empty-text="没有记录">
      <el-table-column label="文件" v-if="viewType === 'all'" width="400px">
        <template #default="scoped">
          <minimize-str :str="scoped.row.path" length="75"/>
        </template>
      </el-table-column>
      <el-table-column label="分享人" v-if="viewType === 'all'" width="100px">
        <template #default="scoped">
          <minimize-str :str="scoped.row.username" length="10"/>
        </template>
      </el-table-column>
      <el-table-column label="下载时间" width="200px">
        <template #default="scoped">
          {{Util.formatDate(scoped.row.time)}}
        </template>
      </el-table-column>
      <el-table-column label="下载ip" width="200px">
        <template #default="scoped">
          {{scoped.row.ip}}
        </template>
      </el-table-column>
      <el-table-column label="下载ua" width="300px">
        <template #default="scoped">
          <el-popover width="300px">
            <template #reference>
              {{scoped.row.ua.length>75?scoped.row.ua.substring(0, 75) + '......':scoped.row.ua}}
            </template>
            <template #default>
              {{scoped.row.ua}}
            </template>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<style scoped>

</style>