<template>
  <div>
    <div style="padding: 20px">
      <el-row :gutter="20">
        <!--部门数据-->
        <el-col :span="4" :xs="24">
          <!-- <div class="head-container">
            <el-input
              v-model="deptName"
              placeholder="请输入部门名称"
              clearable
              prefix-icon="Search"
              style="margin-bottom: 20px"
            />
          </div> -->
          <div class="head-container">
            <el-tree
              style="font-size: 16px"
              :data="deptOptions"
              :props="{ label: 'label', children: 'children' }"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              ref="deptTreeRef"
              node-key="id"
              highlight-current
              default-expand-all
              @node-click="handleNodeClick"
              :current-node-key="currentNodeKey"
              :default-expanded-keys="expandedKeys"
            />
          </div>
        </el-col>
        <!--数据-->
        <el-col :span="20" :xs="24">
          <el-form ref="queryRef" :inline="true" label-width="80px">
            <el-form-item label-width="85px" label="姓名： ">
              <el-input
                v-model="listQuery.fullName"
                placeholder="请输入姓名"
                clearable
                style="width: 240px"
                @keyup.enter="handleQuery"
              />
            </el-form-item>

            <!-- <el-form-item label="考勤情况:">
              <el-select
                placeholder="考勤情况"
                v-model="listQuery.status"
                clearable
                style="width: 240px"
              >
                <el-option
                  v-for="dict in info_kq"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item> -->
            <!-- <el-form-item label="起止时间:" style="width: 308px">
              <el-date-picker
                v-model="dateRange"
                value-format="YYYY-MM-DD"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item> -->
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery"
                >搜索</el-button
              >
              <el-button icon="RefreshRight" @click="resetQuery"
                >重置</el-button
              >
            </el-form-item>
            <el-form-item style="margin-left: 2vw">
              <div style="font-size: 15px">
                <div style="display: inline-block; width: 60px">汇总表：</div>

                <el-date-picker
                  @change="changeDate"
                  style="width: 20vw"
                  v-model="listQuery.sumTableDate"
                  type="month"
                  placeholder="请选择月份"
                />
                <el-button
                  @click="handleQuery"
                  style="padding: 10px 40px; margin-left: 10px"
                  type="primary"
                  >查看</el-button
                >
              </div>
            </el-form-item>
          </el-form>
          <div style="padding: 0 25px">
            <el-table
              :data="tableData"
              border
              style="
                width: 100%;
                margin-top: 20px;
                height: 530px;
                overflow: auto;
              "
            >
              <el-table-column
                align="center"
                prop="fullName"
                label="姓名"
                width="250"
              />
              <el-table-column
                align="center"
                prop="weekNumber"
                label="周数"
                width="250"
              />
              <el-table-column
                align="center"
                prop="weekStart"
                label="一周开始日期"
              >
                <template #default="scope">{{
                  parseTime(scope.row.weekStart, "{y}-{m}-{d}")
                }}</template></el-table-column
              >
              <el-table-column
                align="center"
                prop="weekEnd"
                label="一周结束日期"
              >
                <template #default="scope">{{
                  parseTime(scope.row.weekEnd, "{y}-{m}-{d}")
                }}</template></el-table-column
              >
              <el-table-column align="center" prop="address" label="详细">
                <template #default="scope">
                  <el-button @click="detail(scope.row)" type="text"
                    >详细</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <div style="float: right; margin-top: 30px">
              <el-pagination
                v-model:current-page="listQuery.pageNum"
                v-model:page-size="listQuery.pageSize"
                :page-sizes="[10, 20, 30, 50]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange1"
                @current-change="handleCurrentChange1"
              />
            </div>
          </div> </el-col
      ></el-row>
    </div>
    <el-dialog
      v-model="dialogVisible"
      title="考勤详情"
      width="60%"
      :before-close="handleClose"
    >
      <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="tableData1" 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>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
          <!-- <el-button type="primary" @click="dialogVisible = false">
            Confirm
          </el-button> -->
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { deptTreeSelect2 } from "@/api/system/user";
import { attendanceList } from "@/api/clocking/attendanceQuery";
import { useDict } from "@/utils/dict";
import { dept, attendance } from "@/api/clocking/details";
export default {
  name: "YinetoaAttendanceQuery",

  data() {
    return {
      dialogVisible: false,
      value2: "",
      small: false,
      total: 0,
      background: false,
      disabled: false,
      dateRange: [],
      dateRange1: [],
      tableData: [],
      tableData1: [],
      deptOptions: [],
      listQuery: {
        sumTableDate: undefined,
        fullName: null,
        status: "",
        deptId: null,
        pageNum: 1,
        pageSize: 10,
      },
      dateTime: "",
      deptName: "",
      deptId: null,
      id: null,
      info_kq: useDict("info_kq").info_kq,
    };
  },
  created() {
    this.attendanceList();
    this.$nextTick(() => {
      this.getDeptTree();
    });
    const deptOptions = localStorage.getItem("deptOptions");
    if (deptOptions) {
      this.currentNodeKey = JSON.parse(deptOptions).id;
      this.expandedKeys = [JSON.parse(deptOptions).id];
    }
  },
  mounted() {},

  methods: {
    handleSizeChange1(newPage) {
      this.listQuery.pageSize = newPage;
      this.attendanceList();
    },
    handleCurrentChange1(val) {
      this.listQuery.pageNum = val;
      this.attendanceList();
    },
    detail(row) {
      this.dialogVisible = true;
      this.dateAcc(row.weekEnd, row.weekStart);
      this.deptId = row.deptId;
      this.id = row.id;
      this.dept();
      this.attendance();
    },
    dateAcc(weekEnd, weekStart) {
      this.weekEnd = weekEnd.slice(0, 10);
      this.weekStart = weekStart.slice(0, 10);
      this.dateTime = this.weekStart + " 至 " + this.weekEnd;
    },
    async attendance() {
      let { data } = await attendance(this.id);
      this.tableData1 = [data];
    },
    async dept() {
      let { data } = await dept(this.deptId);
      this.deptName = data.deptName;
    },
    changeDate(val) {
      var y = val.getFullYear();
      var m = val.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      this.listQuery.sumTableDate = y + "-" + m;
    },

    async attendanceList() {
      let { rows, total } = await attendanceList(
        this.addDateRange(this.listQuery, this.dateRange)
      );
      this.tableData = rows;
      this.total = total;
    },
    /** 节点单击事件 */
    handleNodeClick(data) {
      this.$modal.loading("查询中...");
      this.listQuery.deptId = data.id;
      this.handleQuery();
      this.$modal.closeLoading();
    },
    // /** 搜索按钮操作 */
    handleQuery() {
      this.listQuery.pageNum = 1;
      this.attendanceList();
    },
    async getDeptTree() {
      let { data } = await deptTreeSelect2();
      this.deptOptions = data;
    },
  },
};
</script>

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