<template>
  <TableLayout
    height="300px"
    class="flex-1"
    style="width:50%"
    :column="column"
    :data="list"
    :pageInfo="pageInfo"
    @page-info-change="fetch"
  >
    <template v-slot:createTime="{row}">{{new Date(row.createTime).format('yyyy-MM-dd hh:mm')}}</template>
    <template v-slot:type="{ row }">{{acceptMap[row.type].name}}</template>
    <template v-slot:size="{ row }">{{row.size?.formatFileSize()}}</template>
    <template v-slot:viewTime="{ row }">{{handlerViewTime(+row.viewTime)}}</template>
    <template v-slot:action="{ row }">
      <el-button @click="toPreview(row)" type="text">查看</el-button>
    </template>
  </TableLayout>
</template>

<script>
import TableLayout from '@/components/layout/TableLayout.vue'
import { findStatisticDataApi } from '@/api/statistic'
import { ACCEPT_MAP } from '@/utils'

export default {
  components: { TableLayout },

  data: () => ({ list: [], pageInfo: { current: 1, size: 10, total: 0 } }),

  watch: {
    '$parent.activeType': {
      immediate: true,
      handler (t) {
        this.type = t
        this.pageInfo.current = 1
        this.fetch()
      }
    }
  },

  created () {
    this.acceptMap = ACCEPT_MAP
    this.column = [
      { prop: 'createTime', label: '浏览时间', width: '120' },
      { prop: 'name', label: '资源名称' },
      { prop: 'type', label: '资源类型' },
      { prop: 'size', label: '文件大小' },
      { prop: 'viewTime', label: '浏览用时' },
      { prop: 'action', label: '操作', width: '100' }
    ]
  },

  methods: {
    async fetch () {
      const { list, total } = await findStatisticDataApi('res-details-table', { type: this.type, pageInfo: this.pageInfo })
      this.list = list
      this.pageInfo.total = total
    },

    async toPreview (row) {
      this.$store.showResourcePreviewDialog(row.resourceId)
    },

    handlerViewTime (time) {
      if (time < 60) return '不足1分钟'
      if (time < 60 * 60) return `${~~(time / 60)}分钟`
      return `${~~(time / 60 / 60)}小时${~~(time / 60 % 60)}分钟`
    }
  }
}
</script>
