<script setup>
import mPage from "@/components/mPage.vue";
import { dataMainInterface, mychartInterface } from "@/api/api.js";
import { ref, reactive, computed } from 'vue'
import { useRouter } from "vue-router"
import { Search } from '@element-plus/icons-vue'

const router = useRouter()

let chartOptions = ref([])
let chartName = ref("")
let chartNameList = ref("")
let page_no = ref(1)
let pageSize = ref(10)
let total = ref(0)
let orderNumber = ref("")
let tableData = ref([])

let exportExcel = computed(()=>{
    return (import.meta.env.VITE_APP_API_ROOT + "/yb/chartCensus/exportChartVisitCensusList?" + localStorage.getItem("auth") || "") + "&ClassifyId=" + chartName.value;
})

function handleSelect(val) {
    chartName.value = val.MyChartClassifyId;
    page_no.value = 1;
    getTableList();
}

/* 获取公用分类 */
async function 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);
}

//表格的排序事件
function sortChangeHandle(item) {
    if (item.prop === "VisitCount") {
        orderNumber.value = item.order === "ascending" ? 1 : item.order === "descending" ? 2 : "";
    } else {
        orderNumber.value = item.order === "ascending" ? 3 : item.order === "descending" ? 4 : "";
    }
    getTableList();
}
//获取表格数据
async function getTableList() {
    const res = await dataMainInterface.getchartCensusList({
        PageSize: pageSize.value,
        CurrentIndex: page_no.value,
        ClassifyId: chartName.value,
        Order: orderNumber.value,
    });
    if (res.Ret === 200) {
    tableData.value = res.Data.List || [];
    total.value = res.Data.Paging.Totals || 0;
    }
}
getTableList()
//表格的 change 事件
function changeTableDate() {
    chartName.value = "";
    page_no.value = 1;
    getTableList();
}

//分页
function handleCurrentChange(page) {
    page_no.value = page;
    getTableList();
}
//跳转到阅读详情
function readDetail(item) {
    router.push({
        path: "/readClassify",
        query: {
            name: item.ClassifyName,
            id: item.ClassifyId,
        },
    });
}
</script>
<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="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 #default="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">
          <mPage :total="total" :page_no="page_no" @handleCurrentChange="handleCurrentChange" />
        </el-col>
      </el-card>
    </div>
  </template>
  <style scoped lang="scss">
  .box {
    display: flex;
  }
  </style>

