<template>
  <el-dialog
    :title="`${toolName}下载详情统计`"
    :visible.sync="visible"
    width="85%"
    append-to-body
    @open="openEvent"
    @close="visible = false"
  >
    <el-table v-loading="loading" :data="toolDownDetailStatList">
      <el-table-column label="下载用户" align="center" key="userName" prop="userName" min-width="120" />
      <el-table-column label="下载次数" align="center" key="toolDownNum" prop="toolDownNum" min-width="120" />
      <el-table-column label="下载时间" align="center" key="donwTime" prop="donwTime" min-width="120" />
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="detailQueryParams.pageNum"
      :limit.sync="detailQueryParams.pageSize"
      @pagination="getToolDownDetailStatistics"
    />
  </el-dialog>
</template>
<script>
import { getToolDownDetailStatistics } from '@/api/statistic/statistic'
export default {
  props: {
    /**
     * 控制显示/隐藏
     */
    show: {
      type: Boolean,
      default: false
    },
    /**
     * 工具id
     */
    toolId: {
      type: String,
      default: ''
    },
    /**
     * 工具名称
     */
     toolName: {
      type: String,
      default: ''
    }
  },
  computed: {
    visible: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', false)
      }
    }
  },
  data () {
    return {
      toolDownDetailStatList: [],
      total: 0,
      loading: false,
      // 查询参数
      detailQueryParams: {
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  methods: {
    openEvent(){
      this.visible = false
      this.getToolDownDetailStatistics()
    },
    getToolDownDetailStatistics() {
      this.loading = true
      getToolDownDetailStatistics({ ...this.detailQueryParams, toolId: this.toolId }).then(response => {
        this.total = response?.total
        this.toolDownDetailStatList = response?.rows || []
        this.loading = false
      }).catch(() => { this.loading = false });
    }
  }
}
</script>
