<template>
  <div class="tablePage">
    <!-- 筛选参数 -->
    <el-header>
      <el-form :inline="true" style="display:flex">
        <el-form-item style="flex-grow: 1">
          <el-date-picker
            v-model="date"
            @change="setData"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button @click="exportList()" type="primary">
            <i class="el-icon-download"></i>导出明细
          </el-button>
        </el-form-item>
      </el-form>
    </el-header>

    <div class="dataBoxList">
      <div class="dataBox">
        <h5 class="tit">整体报告</h5>
        <div class="dataList">
          <div class="item">
            <label>浏览次数</label>
            <h5>{{dashboardInfo.viewNumber}}</h5>
          </div>
          <div class="item">
            <label>浏览人数</label>
            <h5>{{dashboardInfo.viewPerson}}</h5>
          </div>
        </div>
      </div>

      <!-- 表格 -->
      <el-container>
        <el-table :data="list" :loading="loading">
          <el-table-column
            label="标题"
            prop="articleTitle"
            min-width="300"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <!-- <el-table-column label="分类" prop="classifyName"></el-table-column> -->
          <el-table-column label="浏览次数" prop="viewNumber"></el-table-column>
          <el-table-column label="浏览人数" prop="viewPerson"></el-table-column>
        </el-table>
      </el-container>
      <!-- 分页 -->
      <!-- <el-footer class="fixed-bottom">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="dashboardForm.page"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10,20,30,50]"
          :page-size="dashboardForm.size"
          :total="total"
        ></el-pagination>
      </el-footer>-->
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { timestampFormat } from "@/utils/utils";
import { buildExcelHeader } from "@/api/fetch-api-new.js";
export default {
  name: "Dashboard",
  data() {
    return {
      date: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },

      dashboardForm: {
        dateRange: "",
        page: 1,
        size: 9999
      },

      dashboardInfo: { viewNumber: 0, shareNumber: 0, viewPerson: 0 },

      list: [], //列表数据
      total: 0, //列表总数
      loading: true //表格加载状态
    };
  },
  computed: {
    startDate() {
      let date = this.date;
      let result = (date && date[0]) || "";
      if (result) {
        result = date[0].getTime();
      }
      return result;
    },

    endDate() {
      let date = this.date;
      let result = (date && date[1]) || "";
      if (result) {
        result = date[1].getTime();
      }
      return result;
    }
  },
  methods: {
    initData() {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      this.date = [start, end];

      this.setData();
    },

    getMemberDashboard(resize) {
      app
        .get({
          url: app.api.getArticleDashboard,
          data: this.dashboardForm
        })
        .then(res => {
          this.dashboardInfo = res;
        })
        .catch(err => {});
    },

    getList(resize) {
      if (resize && resize != undefined) {
        this.dashboardForm.page = 1;
      }
      this.loading = true;
      app
        .get({
          url: app.api.getArticleViewRank,
          data: this.dashboardForm
        })
        .then(res => {
          this.loading = false;
          this.list = res;
        })
        .catch(err => {
          this.loading = false;
        });
    },

    setData() {
      this.dashboardForm.dateRange =
        timestampFormat(this.startDate, "yyyy-MM-dd") +
        "," +
        timestampFormat(this.endDate, "yyyy-MM-dd");
      this.getMemberDashboard();
      this.getList();
    },

    // 切换页码大小
    handleSizeChange(val) {
      this.queryForm.size = val;
      this.queryForm.page = 1;
      this.initData();
    },

    // 切换页码
    handleCurrentChange(val) {
      this.queryForm.page = val;
      this.initData();
    },

    //导出，下载表格
    exportList() {
      let fileName =
        "资料库明细" + timestampFormat(new Date().getTime()) + ".xlsx";

      buildExcelHeader({
        url: app.api.exportArticleViewRank,
        data: this.dashboardForm,
        filename: fileName
      });
    }
  },
  mounted() {},
  created() {
    this.initData();
  }
};
</script>

<style lang="scss" scoped>
.stat-container {
  color: #1a1b1c;
  font-weight: 400;
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 30px;
  margin-top: 5px;
  background-color: white;
  .userInfo {
    display: flex;
    align-items: center;
    span {
      font-size: 40px;
      margin-left: 30px;
    }
  }
  .btn {
    margin-top: 30px;
  }
  .formBox {
    width: 500px;
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    margin-top: 30px;
    .footerBtn {
      text-align: right;
    }
  }
}

h5 {
  margin: 0;
}
.dataBoxList {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.dataBox {
  width: 100%;
  min-height: 240px;
  background-color: rgb(242, 242, 242);
  overflow: hidden;
  margin-bottom: 30px;
  .tit {
    font-size: 22px;
    margin: 30px;
  }

  .dataList {
    display: flex;
    justify-content: center;
    margin-top: 60px;
    .item {
      width: 250px;
      text-align: center;
      label {
        font-size: 16px;
      }
      h5 {
        font-size: 40px;
        margin: 20px 0;
      }
    }
  }

  .chartList {
    width: 98%;
    display: flex;
    margin: 30px 0;
    margin-left: 1%;
    .chare {
      width: 100%;
      height: 400px;
    }
  }
}

.fixed-bottom {
  width: 100%;
  text-align: right;
}

.el-header {
  padding: 0;
}
</style>