<template>
  <div class="bottom-menu">
    <div class="bottom_body body_body">
      <TitleC title="应急值守"></TitleC>
      <el-table
        :data="tableData"
        max-height="180"
        style="width: 100%"
        show-overflow-tooltip
      >
        <el-table-column type="index" label="序号" align="center" width="60" />
        <el-table-column prop="areaName" label="值班地点" align="center">
          <template #default="scope">
            <span> {{ scope.row.areaName }}-{{ scope.row.postName }} </span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="值班人员" align="center" />
        <el-table-column prop="mobile" label="值班电话" align="center" />
        <el-table-column prop="dutyTime" label="值班时间" align="center" />

        <!-- <el-table-column label="操作" align="center" width="60">
          <template #default="scope">
            <span
              @click="
                (dialogVisible = true), (form = scope.row), (readonly = true)
              "
            >
              <span class="pointer details">详情</span>
            </span>
          </template>
        </el-table-column> -->
      </el-table>
      <!-- 分页 -->
      <el-pagination
        class="pagination"
        @size-change="getDutyList"
        @current-change="getDutyList"
        v-model:current-page.sync="currentPage"
        v-model:page-size.sync="pageSize"
        :page-sizes="[10, 15, 20, 30]"
        layout="total, prev, pager, next, jumper"
        :total="total"
        background
        small
      >
      </el-pagination>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { onMounted, ref } from "vue";
import { dutyList } from "@/api/homePage";
import { userUSerStore } from "@/store/user";
const userStore = userUSerStore();
const user = ref(JSON.parse(userStore.user_df));
const userId = ref(user.value.userId);

//列表
const tableData = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

//获取应急值守list
const getDutyList = () => {
  let params = {
    limit: pageSize.value,
    page: currentPage.value,
    userId: userId.value,
  };
  dutyList(params).then((res: any) => {
    console.log(res.data);

    tableData.value = res.data.list;
    total.value = res.data.total;
  });
};

onMounted(() => {
  getDutyList();
});
</script>

<style lang="scss" scoped>
.bottom-menu {
  position: fixed;
  bottom: 20px;
  left: $sideWidth;
  right: $sideWidth;
  margin: 0 1%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  .item {
    font-size: 18px;
    font-family: PingFang-SC, PingFang-SC;
    color: #ffffff;
    padding: 10px 60px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    cursor: pointer;
  }
}
.bottom_body {
  width: 90%;
}
::v-deep .el-input__inner {
  color: white !important;
}
.body_body {
  background-color: rgba(0, 61, 123, 0.353) !important;
  border-radius: 0 0 10px 10px;
}
</style>
