<template>
    <div class="app-container">
      <!-- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
        <el-form-item label="报表名称">
          <el-input
            v-model="queryParams.name"
            placeholder="报表名称"
            clearable
            style="width: 160px;"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form> -->
      <div class="box-class clearfix">
        <div 
        class="item-class clearfix" 
        @click="pageLink(item.url)" 
        v-hasPermi="[item.hasPermi]"
        v-for="item in itemList" :key="item.id">
          <div class="span-img-class"></div>
          <div class="span-text-class">{{ item.name }}</div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  
  import { pageList } from '@/api/userMr/userMr'
  
  export default {
    name: "agreement",
    dicts: ['agreement_type'],
    data() {
      return {
        // 遮罩层
        loading: true,
        // 显示搜索条件
        showSearch: true,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          type: undefined
        },
        itemList: [
          // {id: 1, name: '单场次销售报表', hasPermi: 'session:session:list', url: '/statisticalReport/singleSales'},
          {id: 2, name: '渠道订单销售统计', hasPermi: 'statisticalReport:sessionInventory:downloadExcel', url: '/statisticalReport/channelSales'},
          {id: 3, name: '产品销售统计', hasPermi: 'statisticalReport:seatInventory:downloadExcel', url: '/statisticalReport/product'},
          {id: 4, name: '团队订单销售统计', hasPermi: 'session:session:list', url: '/statisticalReport/team'},
          {id: 5, name: '分销商订单统计', hasPermi: 'session:session:list', url: '/statisticalReport/distributor'},
        ]
      };
    },
    created() {
      // this.getList();
    },
    methods: {
      /** 查询列表 */
      getList() {
        this.loading = true;
        pageList(this.addDateRange(this.queryParams, this.dateRange))
        .then(response => {
            this.dataList = response.data.rows;
            this.total = response.data.total;
            this.loading = false;
          }
        );
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.$set(this.queryParams, 'name', '');
        this.handleQuery();
      },
      pageLink(url) {
        if(url){
          this.$router.push(url);
        }
      }
    }
  };
  </script>
  
  <style lang="scss" scoped>
     .box-class{
       padding: 20px 20px;
       .item-class:hover{
         box-shadow: 0 2px 4px rgba(93, 37, 37, 0.12), 0 0 6px rgba(0, 0, 0, .04);
       }
       .item-class{
         box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
         padding: 20px 40px;
         border-radius: 6px;
         float: left;
         cursor: pointer;
         margin-right: 60px;
  
         .span-img-class{
           background: url("../../assets/images/statistics-icon.png") no-repeat;
           display: inline-block;
           width: 40px;
           height: 40px;
           float: left;
           background-size: 100% 100%;
         }
         .span-text-class{
           display: inline-block;
           height: 40px;
           float: left;
           margin-left: 20px;
           line-height: 40px;
         }
       }
     }
  </style>
  