<template>
  <div class="container-readStatistics">
    <el-card>
      <div style="display: flex; justify-content: space-between">
        <a :href="exportExcel" download style="margin-right: 30px">
          <el-button type="primary">导出EXCEL</el-button>
        </a>
        <el-autocomplete
          prefix-icon="el-icon-search"
          class="inline-input"
          style="width: 300px"
          v-model="chartNameList"
          clearable
          :fetch-suggestions="getPublicClassify"
          placeholder="请选择图分类"
          @clear="changeTableDate"
          @select="handleSelect"
        ></el-autocomplete>
      </div>
    </el-card>

    <el-card style="margin-top: 30px">
      <el-table :data="tableData" border @sort-change="sortChangeHandle" style="width: 100%">
        <el-table-column prop="ClassifyName" label="图分类" align="center"></el-table-column>
        <el-table-column prop="VisitCount" label="阅读量" align="center" sortable="custom">
          <template slot-scope="scope">
            <span class="editsty" @click="readDetail(scope.row)">{{ scope.row.VisitCount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="LastVisitTime" label="最近一次阅读时间" align="center" sortable="custom"></el-table-column>
      </el-table>
      <el-col :span="24" class="toolbar">
        <m-page :total="total" :page_no="page_no" @handleCurrentChange="handleCurrentChange" />
      </el-col>
    </el-card>
  </div>
</template>

<script>
import mPage from "@/components/mPage.vue";
import { dataMainInterface, mychartInterface } from "@/api/api.js";

export default {
  name: "",
  components: { mPage },
  props: {},
  data() {
    return {
      chartOptions: [],
      chartName: "",
      chartNameList: "",
      page_no: 1,
      pageSize: 10,
      total: 0,
      orderNumber: "",
      tableData: [],
    };
  },
  computed: {
    exportExcel() {
      return (process.env.API_ROOT + "/yb/chartCensus/exportChartVisitCensusList?" + localStorage.getItem("auth") || "") + "&ClassifyId=" + this.chartName;
    },
  },
  mounted() {
    this.getTableList();
  },
  methods: {
    handleSelect(val) {
      this.chartName = val.MyChartClassifyId;
      this.page_no = 1;
      this.getTableList();
    },
    /* 获取公用分类 */
    async getPublicClassify(data, cb) {
      const res = await mychartInterface.commonClassifys({Keyword:data});
      if (res.Ret !== 200) return;
      let arr = res.Data
        ? res.Data.List.map((item) => {
            return { ...item, value: item.MyChartClassifyName };
          })
        : [];
      cb(arr);
    },
    //表格的排序事件
    sortChangeHandle(item) {
      if (item.prop === "VisitCount") {
        this.orderNumber = item.order === "ascending" ? 1 : item.order === "descending" ? 2 : "";
      } else {
        this.orderNumber = item.order === "ascending" ? 3 : item.order === "descending" ? 4 : "";
      }
      this.getTableList();
    },
    //获取表格数据
    async getTableList() {
      const res = await dataMainInterface.getchartCensusList({
        PageSize: this.pageSize,
        CurrentIndex: this.page_no,
        ClassifyId: this.chartName,
        Order: this.orderNumber,
      });
      if (res.Ret === 200) {
        this.tableData = res.Data.List || [];
        this.total = res.Data.Paging.Totals;
      }
    },
    //表格的 change 事件
    changeTableDate() {
      this.chartName = "";
      this.page_no = 1;
      this.getTableList();
    },
    //分页
    handleCurrentChange(page) {
      this.page_no = page;
      this.getTableList();
    },
    //跳转到阅读详情
    readDetail(item) {
      this.$router.push({
        path: "/readClassify",
        query: {
          name: item.ClassifyName,
          id: item.ClassifyId,
        },
      });
    },
  },
};
</script>
<style scoped lang="scss">
.box {
  display: flex;
}
</style>
