<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"
    />
  </div>
</template>
<script>
import CustomsTable from "@/components/CustomsTable"
import paginationMixin from "@/components/TabComponents/mixin"
export default {
  // 数据概览
  name: "",
  components: {
    CustomsTable,
  },
  mixins: [paginationMixin],
  data() {
    return {
      listLoading: false,
      selectedIndex: sessionStorage.getItem("homeSelectedIndex") - 0 || 0,
      headList: ["社区筛查", "医院筛查", "体检筛查"],
      columns: [
        {
          label: "医联体",
          minWidth: 120,
          value: "name",
        },
        {
          label: "累计上报量",
          minWidth: 120,
          value: "1",
        },
        {
          label: "最近一季度上报量",
          minWidth: 120,
          value: "2",
        },
        {
          label: "累计审核合格量",
          minWidth: 120,
          value: "3",
        },
        {
          label: "高风险",
          minWidth: 120,
          value: "4",
        },
        {
          label: "中风险",
          minWidth: 120,
          value: "5",
        },
        {
          label: "低风险",
          minWidth: 120,
          value: "6",
        },
        {
          label: "胃癌",
          minWidth: 120,
          value: "7",
        },
        {
          label: "早期胃癌",
          minWidth: 120,
          value: "8",
        },
        {
          label: "食道癌",
          minWidth: 120,
          value: "9",
        },
      ],
      tableData: [
        {
          name: "1",
          1: 2,
        },
      ],
    }
  },
  watch: {},
  mounted() {},
  methods: {
    setSelectedIndex(i) {
      console.log(this.selectedIndex)
      this.selectedIndex = i
      sessionStorage.setItem("homeSelectedIndex", this.selectedIndex)
    },
  },
}
</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>