<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>
    <custom-table
      ref="customTable"
      :table-header="tableHeader"
      :table-data="tableData"
      :page="page"
      @changePage="changePage"
    ></custom-table>
  </div>
</template>
<script>
import CustomTable from "@/components/CustomTable"
export default {
  // 数据概览
  name: "",
  components: {
    CustomTable,
  },
  data() {
    return {
      selectedIndex: sessionStorage.getItem("homeSelectedIndex") - 0 || 0,
      headList: ["社区筛查", "医院筛查", "体检筛查"],
      tableHeader: [
        {
          title: "医联体",
          minWidth: 40,
          key: "name",
          align: "center",
        },
        {
          title: "累计上报量",
          minWidth: 60,
          key: "1",
          align: "center",
        },
        {
          title: "最近一季度上报量",
          minWidth: 96,
          key: "2",
          align: "center",
        },
        {
          title: "累计审核合格量",
          minWidth: 84,
          key: "3",
          align: "center",
        },
        {
          title: "高风险",
          minWidth: 30,
          key: "4",
          align: "center",
        },
        {
          title: "中风险",
          minWidth: 30,
          key: "5",
          align: "center",
        },
        {
          title: "低风险",
          minWidth: 30,
          key: "6",
          align: "center",
        },
        {
          title: "胃癌",
          minWidth: 30,
          key: "7",
          align: "center",
        },
        {
          title: "早期胃癌",
          minWidth: 40,
          key: "8",
          align: "center",
        },
        {
          title: "食道癌",
          minWidth: 30,
          key: "9",
          align: "center",
        },
      ],
      tableData: [
        {
          name: "1",
          1: 2,
        },
      ],
      page: {
        current: 1,
        size: 10,
        total: 20,
      },
    }
  },
  watch: {},
  mounted() {},
  methods: {
    setSelectedIndex(i) {
      console.log(this.selectedIndex)
      this.selectedIndex = i
      sessionStorage.setItem("homeSelectedIndex", this.selectedIndex)
    },
    changePage(v) {
      this.page[v.type] = v.value
      console.log(this.page)
      this.$refs.customTable.loading = false
    },
  },
}
</script>
<style lang="scss" scoped>
.dataCenter {
  padding: 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  .header {
    display: flex;
    .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>