<template>
  <div class="right-list-toobar">
    <el-toolbar>
      <el-button @click="refresh"><i class="fa fa-refresh"></i>刷新</el-button>
      <el-col>当前报表：菜单点击量排行</el-col>
      <el-col align="right">
        <el-date-picker id="URLHit-date-picker1" v-model="dateRangeValue" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="请选择日期范围" @change="dateRangeChange"></el-date-picker>&nbsp;
        <el-button @click="check" class="button" type="primary"><slot name="button">查看</slot></el-button>
      </el-col>
    </el-toolbar>
    <div class="padding-top-bottom mini" v-loading="dataLoading">
      <tree-grid serialNumberName="序号" :columns="columns" :tree-structure="true" :data-source="menus" :need-checkbox="false">
      </tree-grid>
    </div>
  </div>
</template>

<script>
import TreeGrid from '@src/components/TreeGrid.vue'
export default {
  data() {
    return {
      dataLoading: false,
      dateRangeValue: [],
      startDate: '', // 搜索框日期范围
      endDate: '',
      menus: [], // 菜单项
      users: [], // 用户列表
      userName: 'admin', // toolbar用户名
      columns: [ // tree-grid配置
        {
          text: '菜单名称',
          minwidth: '20%',
          dataIndex: 'name'
        },
        {
          text: 'URL',
          minwidth: '50%',
          dataIndex: 'URL'
        },
        {
          text: '点击量',
          minwidth: '10%',
          dataIndex: 'clickCount'
        },
        {
          text: '来源插件',
          minwidth: '20%',
          dataIndex: 'source'
        }
      ]
    }
  },
  methods: {
    dateRangeChange(val) {
      if (val && val instanceof Array) {
        this.startDate = val[0]
        this.endDate = val[1]
      } else {
        this.dateRangeValue = []
        this.startDate = ''
        this.endDate = ''
      }
    },
    refresh() {
      this.userName = 'admin'
      this.loadMenus()
    },
    check() {
      this.loadMenus()
    },
    onOptionChange(val) {
      this.userName = val
      this.loadMenus()
    },
    async loadMenus() {
      this.dataLoading = true
      let userName = this.userName
      let resp
      try {
        resp = await axios.get('/ui/stats/menuhit', {
          params: {
            userName
          }
        })
        this.dataLoading = false
      } catch (e) {
        this.dataLoading = false
        return
      }
      if (resp.data.status !== 1) {
        return resp.data
      }
      this.menus = resp.data.data
    },
    async loadUsers() {
      let resp = await axios.get('/ui/stats/users')
      this.users = resp.data.data
    }
  },
  created() {
    this.loadUsers()
    this.loadMenus()
  },
  components: {
    TreeGrid
  }
}

</script>

<style scoped>

</style>
