<template>
  <div>
    <div style="padding: 20px 60px">
      <div style="display: flex; justify-content: space-between">
        <div>部门名称：{{ deptName }}</div>
        <div>考勤日期：{{ dateTime }}</div>
        <div style="width: 80px"></div>
      </div>
      <div style="margin-top: 20px">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="fullName" align="center" label="姓名" />
          <el-table-column align="center" label="周一">
            <template #default="scope">
              <div>上午：{{ scope.row.mondayMorning }}</div>
              <div>下午：{{ scope.row.mondayAfternoon }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="周二">
            <template #default="scope">
              <div>上午：{{ scope.row.tuesdayMorning }}</div>
              <div>下午：{{ scope.row.tuesdayMorning }}</div>
            </template></el-table-column
          >
          <el-table-column align="center" label="周三">
            <template #default="scope">
              <div>上午：{{ scope.row.wednesdayMorning }}</div>
              <div>下午：{{ scope.row.wednesdayAfternoon }}</div>
            </template></el-table-column
          >
          <el-table-column align="center" label="周四">
            <template #default="scope">
              <div>上午：{{ scope.row.thursdayMorning }}</div>
              <div>下午：{{ scope.row.thursdayAfternoon }}</div>
            </template></el-table-column
          >
          <el-table-column align="center" label="周五">
            <template #default="scope">
              <div>上午：{{ scope.row.fridayMorning }}</div>
              <div>下午：{{ scope.row.fridayAfternoon }}</div>
            </template></el-table-column
          >
          <el-table-column align="center" label="周六">
            <template #default="scope">
              <div>上午：{{ scope.row.saturdayMorning }}</div>
              <div>下午：{{ scope.row.saturdayAfternoon }}</div>
            </template></el-table-column
          >
          <el-table-column align="center" label="周日">
            <template #default="scope">
              <div>上午：{{ scope.row.sundayMorning }}</div>
              <div>下午：{{ scope.row.sundayAfternoon }}</div>
            </template></el-table-column
          >
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { dept, attendance } from "@/api/clocking/details";
export default {
  name: "YinetoaDetail",

  data() {
    return {
      deptName: "",
      dateTime: "",
      id: this.$route.query.id,
      weekEnd: this.$route.query.weekEnd,
      weekStart: this.$route.query.weekStart,
      tableData: [],
      fullName: "",
    };
  },
  created() {
    this.dept();
    this.dateAcc();
    this.attendance();
  },
  mounted() {},

  methods: {
    dateAcc() {
      this.weekEnd = this.weekEnd.slice(0, 10);
      this.weekStart = this.weekStart.slice(0, 10);
      this.dateTime = this.weekStart + " 至 " + this.weekEnd;
    },
    async attendance() {
      let { data } = await attendance(this.$route.query.id);
      this.tableData = [data];
    },
    async dept() {
      let { data } = await dept(this.$route.query.deptId);
      this.deptName = data.deptName;
    },
  },
};
</script>

<style lang="scss" scoped></style>
