<template>
  <div class="dataCenter">
    <div class="header">
      <div
        v-for="(item, index) in headList"
        :key="index"
        :class="['btn', selectedIndex == index ? 'active' : '']"
        @click="setSelectedIndex(index)"
      >
        {{ item }}
      </div>
    </div>
    <customs-table
      ref="table"
      :table-data="tableData"
      :columns="columns"
      :header-class="'newHeader'"
      :list-loading="listLoading"
      :current-page="pageIndex"
      :total-count="total"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      @pageSizeChange="handleSizeChange"
      @currentPageChange="handleCurrentChange"
      showSummary
      :getSummaries="getSummaries"
    />
  </div>
</template>
<script>
import CustomsTable from "@/components/CustomsTable"
import paginationMixin from "@/components/TabComponents/mixin"
import { getPatientPage, getReportCount } from "@/api/dataoverview.js"
export default {
  // 数据概览
  name: "",
  components: {
    CustomsTable,
  },
  mixins: [paginationMixin],
  data() {
    return {
      listLoading: false,
      selectedIndex: sessionStorage.getItem("homeSelectedIndex") - 0 || 0,
      headList: ["筛查概览", "社区筛查", "医院筛查", "体检筛查"],
      columns: [
        {
          label: "医联体",
          minWidth: 120,
          value: "unionName",
        },
        {
          label: "累计上报量",
          minWidth: 100,
          value: "report",
        },
        {
          label: "最近一季度上报量",
          minWidth: 120,
          value: "lastQuarter",
        },
        {
          label: "累计审核合格量",
          minWidth: 120,
          value: "pass",
        },
        {
          label: "高风险",
          minWidth: 80,
          value: "high",
        },
        {
          label: "中风险",
          minWidth: 80,
          value: "middle",
        },
        {
          label: "低风险",
          minWidth: 80,
          value: "low",
        },
        {
          label: "高级别上皮内瘤变",
          minWidth: 120,
          value: "inogmCount",
        },
        {
          label: "早期胃癌",
          minWidth: 80,
          value: "earlyGas",
        },

        {
          label: "进展期胃癌",
          minWidth: 80,
          value: "periodGas",
        },
        {
          label: "内镜数量",
          minWidth: 80,
          value: "gasCount",
        },
      ],
      tableData: [],
      reportMap: {
        middle: 10,
      },
    }
  },
  watch: {},
  mounted() {
    this.handleSearch()
    this.getReportCount()
  },
  methods: {
    getSummaries() {
      const sums = []
      this.columns.map((c, i) => {
        if (i === 0) {
          sums[0] = "总计"
        } else {
          sums[i] = this.reportMap[c.value] || "--"
        }
      })
      return sums
    },
    setSelectedIndex(i) {
      this.selectedIndex = i
      this.pageIndex = 1
      this.handleSearch()
      this.getReportCount()
      sessionStorage.setItem("homeSelectedIndex", this.selectedIndex)
    },
    getReportCount() {
      getReportCount({
        patientFrom: this.selectedIndex == "0" ? null : this.selectedIndex,
      }).then((res) => {
        this.reportMap = res.data
      })
    },
    handleSearch() {
      this.listLoading = true
      let data = {
        size: this.pageSize,
        current: this.pageIndex,
        patientFrom: this.selectedIndex == "0" ? null : this.selectedIndex,
      }
      getPatientPage(data).then((res) => {
        this.listLoading = false
        if (res.code === 1) {
          const d = res.data
          this.tableData = d.records || []
          this.total = Number(d.total)
        }
        this.listLoading = false
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.dataCenter {
  padding: 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  .header {
    display: flex;
    margin-bottom: 20px;
    .btn {
      cursor: pointer;
      width: 112px;
      height: 48px;
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #dddddd;
      font-size: 16px;
      font-family: AlibabaPuHuiTiM;
      color: #000;
      text-align: center;
      line-height: 48px;
      margin-right: 24px;
    }
    .active {
      background: #4e68ff;
      border: none;
      color: #ffffff;
    }
  }
}
</style>