<template>
    <div class="app-container" id="monthReport">
        <el-radio-group
            v-model="tabIndex"
            size="medium"
            style="margin-bottom: 10px"
        >
            <el-radio-button label="考勤报表"></el-radio-button>
            <el-radio-button label="异常考勤统计"></el-radio-button>
        </el-radio-group>
        <!-- 考勤率页面 -->
        <div v-show="tabIndex === '考勤报表'">
            <el-form
                :model="queryParams"
                ref="queryForm"
                size="small"
                :inline="true"
                v-show="showSearch"
                label-width="auto"
            >
                <el-form-item label="选择月份">
                    <el-date-picker
                        v-model="queryParams.month"
                        type="monthrange"
                        range-separator="至"
                        start-placeholder="开始月份"
                        end-placeholder="结束月份"
                        value-format="yyyy-MM"
                        :clearable="false"
                        :editable="false"
                        style="width: 240px"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="部门" prop="orgIdList">
                    <treeselect
                        v-model="queryParams.orgIdList"
                        :options="deptOptions"
                        :normalizer="normalizer"
                        multiple
                        placeholder="选择部门"
                        style="width: 240px"
                    />
                </el-form-item>
                <el-form-item label="姓名" prop="userName">
                    <el-input
                        v-model="queryParams.userName"
                        placeholder="请输入姓名"
                        clearable
                        style="width: 240px"
                        @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="外勤预警" prop="outside">
                    <el-select
                        v-model="queryParams.outside"
                        placeholder="选择外勤预警"
                        style="width: 240px"
                    >
                        <el-option label="是" value="预警" />
                        <el-option label="否" value="未预警" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="primary"
                        icon="el-icon-search"
                        size="mini"
                        @click="handleQuery"
                        >搜索</el-button
                    >
                    <el-button
                        icon="el-icon-refresh"
                        size="mini"
                        @click="resetQuery"
                        >重置</el-button
                    >
                </el-form-item>
            </el-form>
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button
                        type="warning"
                        plain
                        icon="el-icon-download"
                        size="mini"
                        @click="handleExport"
                        v-hasPermi="['att:attMonthReport:export']"
                        >导出
                    </el-button>
                </el-col>

                <!-- <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-search"
          size="mini"
          @click="handleDays"
          v-hasPermi="['system:user:admin']"
          >更新应出勤天数
        </el-button>

        <el-button
          type="primary"
          plain
          icon="el-icon-date"
          size="mini"
          @click="onHandleYearData"
          >年数据
        </el-button>
      </el-col> -->

                <right-toolbar
                    :showSearch.sync="showSearch"
                    @queryTable="getList"
                ></right-toolbar>
            </el-row>

            <el-table v-loading="loading" :data="typeList">
                <el-table-column
                    label="序号"
                    align="center"
                    width="80"
                    type="index"
                >
                    <template slot-scope="scope">
                        <span>{{
                            (queryParams.pageNum - 1) * queryParams.pageSize +
                            scope.$index +
                            1
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    align="center"
                    :key="item.prop"
                    :prop="item.prop"
                    :label="item.label"
                    v-for="item in mainListFields"
                >
                    <template #header>
                        <span v-if="item.label === '外勤次数'">
                            外勤次数
                            <el-tooltip
                                effect="dark"
                                placement="top"
                                content="大于5天为外勤预警"
                            >
                                <i class="el-icon-info" />
                            </el-tooltip>
                        </span>

                        <span v-else>
                            {{ item.label }}
                        </span>
                    </template>
                    <template slot-scope="scope">
                        <span
                            v-if="item.needShow"
                            style="color: #02a7f0; cursor: pointer"
                            @click="openRecord(scope.row, item.type)"
                        >
                            {{ scope.row[item.prop] }}
                        </span>
                        <span v-else>{{ scope.row[item.prop] }}</span>
                    </template>
                </el-table-column>
            </el-table>

            <pagination
                v-show="total > 0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
            />
        </div>

        <div v-show="tabIndex === '异常考勤统计'">
            <el-form
                :model="queryParamsAbnormal"
                ref="queryFormAbnormal"
                size="small"
                :inline="true"
                v-show="showSearch"
                label-width="auto"
            >
                <el-form-item label="年份">
                    <el-date-picker
                        clearable
                        type="year"
                        value-format="yyyy"
                        placeholder="请选择年份"
                        v-model="queryParamsAbnormal.year"
                    />
                </el-form-item>
                <el-form-item label="月份">
                    <el-date-picker
                        clearable
                        type="month"
                        value-format="yyyy-MM"
                        placeholder="请选择月份"
                        v-model="queryParamsAbnormal.attCurrentMonth"
                    />
                </el-form-item>
                <el-form-item label="部门" prop="orgIdList">
                    <treeselect
                        v-model="queryParamsAbnormal.orgIdList"
                        :options="deptOptions"
                        :normalizer="normalizer"
                        multiple
                        placeholder="选择部门"
                        style="width: 240px"
                    />
                </el-form-item>
                <el-form-item label="姓名" prop="userName">
                    <el-input
                        v-model="queryParamsAbnormal.userName"
                        placeholder="请输入姓名"
                        clearable
                        style="width: 240px"
                        @keyup.enter.native="handleQueryAbnormal"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="primary"
                        icon="el-icon-search"
                        size="mini"
                        @click="handleQueryAbnormal"
                    >
                        查询
                    </el-button>
                    <el-button
                        type="primary"
                        icon="el-icon-search"
                        size="mini"
                        @click="resetQueryAbnormal"
                    >
                        重置
                    </el-button>

                    <el-button
                        type="warning"
                        icon="el-icon-download"
                        size="mini"
                        @click="handleExportAbnormal"
                    >
                        导出
                    </el-button>
                </el-form-item>
            </el-form>
            <el-table v-loading="loading" :data="abnormalList">
                <el-table-column
                    label="序号"
                    align="center"
                    width="80"
                    type="index"
                >
                    <template slot-scope="scope">
                        <span>{{
                            (queryParamsAbnormal.pageNum - 1) *
                                queryParamsAbnormal.pageSize +
                            scope.$index +
                            1
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    :label="item.label"
                    align="center"
                    :prop="item.prop"
                    v-for="item in abnormalListFields"
                    :key="item.prop"
                >
                    <template slot-scope="scope">
                        <span
                            v-if="item.needShow"
                            style="color: #02a7f0; cursor: pointer"
                            @click="openRecord(scope.row, item.type)"
                        >
                            {{ scope.row[item.prop] }}
                        </span>
                        <span v-else>{{ scope.row[item.prop] }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 相关记录 -->
        <el-dialog
            :title="title"
            width="1300px"
            height="1000px"
            append-to-body
            @close="cancelRecord"
            :visible.sync="showRecord"
        >
            <el-form
                :model="queryRecord"
                ref="queryFormRecord"
                size="small"
                :inline="true"
                v-show="showSearch"
                label-width="110px"
            >
                <el-form-item label="选择考勤时间段">
                    <el-date-picker
                        v-model="dateRange"
                        style="width: 240px"
                        value-format="yyyy-MM-dd"
                        type="daterange"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="primary"
                        icon="el-icon-search"
                        size="mini"
                        @click="handleQueryRecord"
                        >查询</el-button
                    >
                    <!--          <el-button icon="el-icon-refresh" size="mini" @click="resetRecord">重置</el-button>-->
                </el-form-item>
            </el-form>

            <el-table
                :data="tableDataRecord"
                width="900px"
                height="600px"
                row-key="id"
            >
                <el-table-column
                    label="序号"
                    align="center"
                    width="80"
                    type="index"
                >
                    <template slot-scope="scope">
                        <span>{{
                            (queryRecord.pageNum - 1) * queryRecord.pageSize +
                            scope.$index +
                            1
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="id"
                    align="center"
                    prop="id"
                    v-if="false"
                />
                <el-table-column
                    label="姓名"
                    align="center"
                    prop="name"
                    width="80"
                    sortable
                />
                <el-table-column
                    label="所属部门"
                    align="center"
                    prop="orgName"
                    width="150"
                    sortable
                />
                <el-table-column
                    label="考勤日期"
                    align="center"
                    prop="attCurrent"
                    width="150"
                    sortable
                    >\
                    <template slot-scope="scope">
                        <span>{{ formatDate(scope.row.attCurrent) }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="上班打卡时间"
                    align="center"
                    prop="goWorkTime"
                    width="180"
                    sortable
                />
                <el-table-column
                    label="上班状态"
                    align="center"
                    prop="goWorkStatus"
                    width="100"
                    sortable
                >
                    <template slot-scope="scope">
                        <dict-tag
                            :options="dict.type.att_status"
                            :value="scope.row.goWorkStatus"
                        />
                    </template>
                </el-table-column>
                <el-table-column
                    label="上班打卡地址"
                    align="center"
                    prop="goWorkAddress"
                    sortable
                    width="180"
                />
                <el-table-column
                    label="下班打卡时间"
                    align="center"
                    prop="offWorkTime"
                    width="180"
                    ortable
                />
                <el-table-column
                    label="下班状态"
                    align="center"
                    prop="offWorkStatus"
                    width="100"
                    sortable
                >
                    <template slot-scope="scope">
                        <dict-tag
                            :options="dict.type.att_status"
                            :value="scope.row.offWorkStatus"
                        />
                    </template>
                </el-table-column>
                <el-table-column
                    label="下班打卡地址"
                    align="center"
                    prop="offWorkAddress"
                    width="180"
                    sortable
                />
            </el-table>

            <pagination
                v-show="totalTwo > 0"
                :total="totalTwo"
                :page.sync="queryRecord.pageNum"
                :limit.sync="queryRecord.pageSize"
                @pagination="getListRecord"
            />
        </el-dialog>

        <!-- 外出次数查询 -->
        <el-dialog
            :title="title"
            :visible.sync="showOutCount"
            width="1200px"
            height="1000px"
            append-to-body
        >
            <el-form
                :model="queryRecordOutCount"
                ref="queryFormRecord"
                size="small"
                :inline="true"
                v-show="showSearch"
                label-width="110px"
            >
                <el-form-item>
                    <el-button
                        type="warning"
                        icon="el-icon-download"
                        size="mini"
                        @click="handleExportOutCountList"
                        >导出</el-button
                    >
                </el-form-item>
            </el-form>

            <el-table
                v-loading="loadingTwo"
                :data="tableDataOutCount"
                width="900px"
                height="600px"
                row-key="id"
            >
                <el-table-column
                    label="序号"
                    align="center"
                    width="80"
                    type="index"
                >
                    <template slot-scope="scope">
                        <span>{{
                            (queryRecordOutCount.pageNum - 1) *
                                queryRecordOutCount.pageSize +
                            scope.$index +
                            1
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="考勤日期"
                    align="center"
                    prop="attCurrentDay"
                    width="180"
                    :show-overflow-tooltip="true"
                >
                    <template slot-scope="scope">
                        <span>{{ formatDate(scope.row.attCurrentDay) }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="打卡时间"
                    align="center"
                    prop="attCurrentTime"
                    width="140"
                    sortable
                />
                <el-table-column
                    label="打卡地址"
                    align="center"
                    prop="attAddress"
                    sortable
                />
            </el-table>

            <pagination
                v-show="totalTwoOutCount > 0"
                :total="totalTwoOutCount"
                :page.sync="queryRecord.pageNum"
                :limit.sync="queryRecord.pageSize"
                @pagination="getOutCountList"
            />
        </el-dialog>

        <!-- 打卡次数记录 -->
        <el-dialog
            :title="title"
            :visible.sync="showAttCount"
            width="1200px"
            height="1000px"
            append-to-body
        >
            <el-form
                :model="queryAttCount"
                ref="queryFormRecordAtt"
                size="small"
                :inline="true"
                v-show="showSearch"
                label-width="110px"
            >
                <el-form-item> </el-form-item>
            </el-form>

            <el-table
                v-loading="loadingAttCount"
                :data="tableDataAttCount"
                width="900px"
                height="600px"
                row-key="id"
            >
                <el-table-column
                    label="序号"
                    align="center"
                    width="80"
                    type="index"
                >
                    <template slot-scope="scope">
                        <span>{{
                            (queryAttCount.pageNum - 1) *
                                queryAttCount.pageSize +
                            scope.$index +
                            1
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="考勤日期"
                    align="center"
                    prop="attCurrentDay"
                    :show-overflow-tooltip="true"
                >
                    <template slot-scope="scope">
                        <span>{{ formatDate(scope.row.attCurrentDay) }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="考勤时间"
                    align="center"
                    prop="attCurrentTime"
                    sortable
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    label="打卡地址"
                    align="center"
                    prop="attAddress"
                    sortable
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    label="备注"
                    align="center"
                    prop="remark"
                    sortable
                    :show-overflow-tooltip="true"
                />
            </el-table>

            <pagination
                v-show="totalAttCount > 0"
                :total="totalAttCount"
                :page.sync="queryAttCount.pageNum"
                :limit.sync="queryAttCount.pageSize"
                @pagination="getClockingRecordListByUserId"
            />
        </el-dialog>

        <!-- 应出勤天数组成 -->
        <el-dialog
            :title="title"
            :visible.sync="showRequiredDays"
            width="1200px"
            height="1000px"
            append-to-body
        >
            <el-form
                :model="queryRequiredDays"
                ref="queryFormRecord"
                size="small"
                :inline="true"
                v-show="showSearch"
                label-width="110px"
            >
            </el-form>

            <el-table
                v-loading="loadingTwoRequiredDays"
                :data="tableDataRequiredDays"
                width="900px"
                height="600px"
                row-key="id"
            >
                <el-table-column
                    label="序号"
                    align="center"
                    width="80"
                    type="index"
                >
                    <template slot-scope="scope">
                        <span>{{
                            (queryRequiredDays.pageNum - 1) *
                                queryRequiredDays.pageSize +
                            scope.$index +
                            1
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="月份"
                    align="center"
                    prop="attCurrentMonth"
                    sortable
                />
                <el-table-column
                    label="应出勤天数"
                    align="center"
                    prop="attDays"
                    sortable
                />
                <el-table-column
                    label="所属考勤组"
                    align="center"
                    prop="groupName"
                    sortable
                />
                <el-table-column
                    label="考勤规则"
                    align="center"
                    prop="attCurrentDay"
                    width="180"
                    :show-overflow-tooltip="true"
                >
                    <template slot-scope="scope">
                        <span>{{
                            parseAttendanceRule(scope.row.attRules)
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="节假日"
                    align="center"
                    prop="isHaveHoliday"
                    width="180"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    label="应出勤开始时间"
                    align="center"
                    prop="attStartDate"
                    sortable
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    label="应出勤结束时间"
                    align="center"
                    prop="attEndDate"
                    sortable
                    :show-overflow-tooltip="true"
                />
            </el-table>

            <pagination
                v-show="totalTwoRequiredDays > 0"
                :total="totalTwoRequiredDays"
                :page.sync="queryRequiredDays.pageNum"
                :limit.sync="queryRequiredDays.pageSize"
                @pagination="getRequiredDaysList"
            />
        </el-dialog>

        <!-- 年数据 -->
        <el-dialog
            title="年数据列表"
            :visible.sync="showYearDataVisible"
            width="85%"
            height="80%"
            append-to-body
        >
            <el-form :inline="true">
                <el-form-item label="年份">
                    <el-date-picker
                        type="year"
                        style="width: 240px"
                        value-format="yyyy"
                        placeholder="选择年份"
                        v-model="queryYearDataParams.year"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="primary"
                        icon="el-icon-search"
                        size="mini"
                        @click="getYearDataList"
                    >
                        查询
                    </el-button>
                    <el-button
                        icon="el-icon-refresh"
                        size="mini"
                        @click="resetQueryYearData"
                    >
                        重置
                    </el-button>

                    <el-button
                        type="warning"
                        icon="el-icon-download"
                        size="mini"
                        @click="handleExportYearDataList"
                    >
                        导出
                    </el-button>
                </el-form-item>
            </el-form>
            <el-table :data="tableDataYearData" border>
                <el-table-column
                    align="center"
                    label="用户名"
                    prop="userName"
                />
                <el-table-column
                    align="center"
                    width="170"
                    label="部门"
                    prop="orgName"
                    :show-overflow-tooltip="true"
                />

                <el-table-column
                    :label="item.label + '月'"
                    v-for="item in monthColList"
                    :key="item.dataValue"
                    align="center"
                >
                    <template slot-scope="scope">
                        <span
                            style="cursor: pointer"
                            :style="{
                                color:
                                    scope.row[item.dataValue] == 1
                                        ? '#409eff'
                                        : '#f56c6c',
                            }"
                            @click="openYearDataDetail(scope.row, item.label)"
                        >
                            {{
                                scope.row[item.dataValue] == 1 ? '正常' : '异常'
                            }}
                        </span>
                    </template>
                </el-table-column>
            </el-table>

            <pagination
                v-show="totalYearData > 0"
                :total="totalYearData"
                :page.sync="queryYearDataParams.pageNum"
                :limit.sync="queryYearDataParams.pageSize"
                @pagination="getYearDataList"
            />
        </el-dialog>
    </div>
</template>

<script>
import { getDetail, getDays } from '@/api/report/monthlyError'
import {
    getMonthAttReport,
    exportMonthReport,
    getClockingRecordListByUserId,
    getRequiredDaysList,
    getYearDataListAPI,
} from '@/api/report/monthReport'
import {
    getAttendanceRateList,
    getLateEarlyAbsentList,
    getAttendanceRateDetail,
    getAttAbnormalDetailsList,
    exportAttRateTypeList,
    exportAbnormalList,
} from '@/api/report/attendanceRate'

import { listDeptTree } from '@/api/system/userInfo'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import {
    getOutCountList,
    exportOutCountList,
    exportYearDataListAPI,
} from '@/api/report/attReport'

var monstr = ''
export default {
    name: 'MonthReport',
    dicts: ['att_status'],
    components: { Treeselect },
    data() {
        return {
            // 遮罩层
            loading: false,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 字典表格数据
            typeList: [],
            // 弹出层标题
            title: '',
            title1: '正常打卡天数',
            title2: '迟到记录',
            title3: '早退记录',
            title4: '旷工记录',
            title5: '打卡地异常记录',
            title6: '出入异常记录',
            title7: '请假记录',
            title8: '轮休记录',
            title9: '临时外出记录',
            title10: '出差天数',
            title11: '打卡记录',
            title12: '外勤记录',
            title13: '培训记录',
            // 是否显示弹出层
            open: false,
            showRecord: false,
            dateRange: [],
            attCurrentMonth: '',
            pickerOptions: {
                disabledDate: this.disabledDate,
            },
            queryRecord: {
                pageNum: 1,
                pageSize: 10,
                userId: undefined,
                attStatus: undefined,
                attCurrentMonth: undefined,
                leavePaidRate: '',
                leaveUnpaidRate: '',
            },
            tableDataRecord: [],
            totalTwo: 0,
            dialogQueryForm: {
                pageNum: 1,
                pageSize: 10,
            },
            dialogList: [],
            dialogTotal: 0,

            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                month: undefined,
                userName: undefined,
                orgIdList: undefined,
                orgName: undefined,
                outside: undefined,
            },
            deptOptions: [],

            queryRecordOutCount: {
                pageNum: 1,
                pageSize: 10,
                userId: undefined,
                attCurrentDay: undefined,
                userName: undefined,
            },
            showOutCount: false,
            totalTwoOutCount: 0,
            // 遮罩层
            loadingTwo: false,
            tableDataOutCount: [],

            queryAttCount: {
                pageNum: 1,
                pageSize: 10,
                month: undefined,
                userName: undefined,
            },
            showAttCount: false,
            totalAttCount: 0,
            // 遮罩层
            loadingAttCount: false,
            tableDataAttCount: [],

            queryRequiredDays: {
                pageNum: 1,
                pageSize: 10,
                userId: undefined,
                attCurrentDay: undefined,
                userName: undefined,
                attCurrentMonth: undefined,
            },
            showRequiredDays: false,
            totalTwoRequiredDays: 0,
            // 遮罩层
            loadingTwoRequiredDays: false,
            tableDataRequiredDays: [],

            showYearDataVisible: false,
            queryYearDataParams: {
                pageNum: 1,
                pageSize: 10,
                year: String(new Date().getFullYear()), // 当前年份
            },
            tableDataYearData: [],
            totalYearData: 0,

            // 主列表字段
            mainListFields: [
                { label: '姓名', prop: 'userName' },
                { label: '部门', prop: 'orgName' },
                { label: '考勤月份', prop: 'attCurrentMonth' },
                { label: '应出勤天数', prop: 'requiredDays' },

                {
                    label: '考勤率',
                    prop: 'normalRate',
                    needShow: true,
                    type: '正常打卡天数',
                },
                {
                    label: '迟到率',
                    prop: 'lateRate',
                    needShow: true,
                    type: '迟到记录',
                },
                {
                    label: '旷工率',
                    prop: 'skippingRate',
                    needShow: true,
                    type: '旷工记录',
                },
                {
                    label: '早退率',
                    prop: 'earlyRate',
                    needShow: true,
                    type: '早退记录',
                },
                {
                    label: '休假率(带薪)',
                    prop: 'leavePaidRate',
                    needShow: true,
                    type: '带薪1',
                },
                {
                    label: '休假率(不带薪)',
                    prop: 'leaveUnpaidRate',
                    needShow: true,
                    type: '带薪0',
                },
                // { label: "异常打卡率", prop: "abnormalRate" },
                { label: '外勤次数', prop: 'outsideAttNum' },
            ],

            // 月份初始化列表
            monthColList: [
                { label: '1', dataValue: 'oneMonth' },
                { label: '2', dataValue: 'twoMonth' },
                { label: '3', dataValue: 'threeMonth' },
                { label: '4', dataValue: 'fourMonth' },
                { label: '5', dataValue: 'fiveMonth' },
                { label: '6', dataValue: 'sixMonth' },
                { label: '7', dataValue: 'sevenMonth' },
                { label: '8', dataValue: 'eightMonth' },
                { label: '9', dataValue: 'nineMonth' },
                { label: '10', dataValue: 'tenMonth' },
                { label: '11', dataValue: 'elevenMonth' },
                { label: '12', dataValue: 'twelveMonth' },
            ],

            tabIndex: '考勤报表',
            abnormalList: [],
            abnormalListFields: [
                { label: '姓名', prop: 'userName' },
                { label: '单位', prop: 'orgName' },
                {
                    label: '迟到天数',
                    prop: 'lateNum',
                    needShow: true,
                    type: '早退记录',
                },
                {
                    label: '旷工天数',
                    prop: 'skippingNum',
                    needShow: true,
                    type: '旷工记录',
                },
                {
                    label: '早退天数',
                    prop: 'earlyNum',
                    needShow: true,
                    type: '早退记录',
                },
            ],
            queryParamsAbnormal: {
                pageNum: 1,
                pageSize: 10,
                year: '',
                attCurrentMonth: new Date()
                    .toISOString()
                    .split('T')[0]
                    .slice(0, 7), // 默认当月
                userName: undefined,
                orgIdList: [],
                orgName: undefined,
            },
        }
    },
    created() {
        this.getDeptList()
        this.getAbnormalList()
        this.getMonth()
        this.getList()
    },
    methods: {
        parseAttendanceRule(ruleString) {
            const days = [
                '周一',
                '周二',
                '周三',
                '周四',
                '周五',
                '周六',
                '周日',
            ]
            const needAttend = ruleString.split(',').map((item) => item === '1')
            let result = ''

            needAttend.forEach((attend, index) => {
                if (attend) {
                    if (result !== '') result += '、'
                    result += days[index].replace('周', '')
                }
            })
            return result || '无'
        },

        formatDate(dateString) {
            const date = new Date(dateString) // 创建日期对象
            const year = date.getFullYear() // 获取年份
            const month = String(date.getMonth() + 1).padStart(2, '0') // 获取月份（注意：月份从0开始）
            const day = String(date.getDate()).padStart(2, '0') // 获取日期
            const weekdays = [
                '星期天',
                '星期一',
                '星期二',
                '星期三',
                '星期四',
                '星期五',
                '星期六',
            ] // 星期几数组
            const weekday = weekdays[date.getDay()] // 获取星期几

            return `${year}-${month}-${day} ${weekday}` // 组合成所需格式
        },
        getMonth() {
            // 默认当月
            var nowDate = new Date()
            var date = {
                year: nowDate.getFullYear(),
                month: nowDate.getMonth() + 1,
                day: nowDate.getDate(),
            }
            const dayDate =
                date.year +
                '-' +
                (date.month >= 10 ? date.month : '0' + date.month)
            this.$set(this.queryParams, 'month', [dayDate, dayDate])
        },
        getDeptList() {
            listDeptTree().then((response) => {
                this.deptOptions = this.handleTree(response.data, 'id')
            })
        },
        /** 转换部门数据结构 */
        normalizer(node) {
            if (node.children && !node.children.length) {
                delete node.children
            }
            return {
                id: node.id,
                label: node.orgName,
                children: node.children,
            }
        },
        handleSelect(value, instanceId) {
            console.log('Selected:', value)
            // 在这里处理选择事件
            this.queryParams.orgName = value.orgName
        },
        /** 查询字典类型列表 */
        getList() {
            this.loading = true
            console.log(this.queryParams)
            let query = _.cloneDeep(this.queryParams)
            query.startMonth = query.month[0]
            query.endMonth = query.month[1]
            delete query['month']

            if (query.orgIdList && query.orgIdList.length > 0) {
                query.orgIds = query.orgIdList.map((id) => id.toString())
            } else {
                query.orgIds = undefined
            }
            delete query['orgIdList']

            console.log(query)
            getAttendanceRateList(query).then((response) => {
                this.typeList = response.rows
                this.total = response.total
                this.loading = false
            })
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.getMonth()
            this.resetForm('queryForm')
            this.handleQuery()
        },
        //打开月异常详情页面
        openRecord(row, titleBoss) {
            this.queryRecord.leaveUnpaidRate = ''
            this.queryRecord.leavePaidRate = ''
            this.id = row.id
            this.title = titleBoss
            this.queryRecord.userId = row.userId
            this.queryRecord.attCurrentMonth = row.attCurrentMonth
            this.attCurrentMonth = row.attCurrentMonth
            if (titleBoss == '正常打卡天数') {
                this.queryRecord.attStatus = 1
            } else if (titleBoss == '迟到记录') {
                this.queryRecord.attStatus = 2
            } else if (titleBoss == '早退记录') {
                this.queryRecord.attStatus = 4
            } else if (titleBoss == '旷工记录') {
                this.queryRecord.attStatus = 3
            } else if (titleBoss == '打卡地异常记录') {
                this.queryRecord.attStatus = 9
            } else if (titleBoss == '出入异常记录') {
                this.queryRecord.attStatus = 8
            } else if (titleBoss == '请假记录') {
                this.queryRecord.attStatus = 6
            } else if (titleBoss == '轮休记录') {
                this.queryRecord.attStatus = 5
            } else if (titleBoss == '临时外出记录') {
                this.queryRecord.attStatus = 7
            } else if (titleBoss == '出差天数') {
                this.queryRecord.attStatus = 10
            } else if (titleBoss == '外勤记录') {
                this.queryRecord.attStatus = 26
            } else if (titleBoss == '培训记录') {
                this.queryRecord.attStatus = 28
            } else if (titleBoss == '带薪1') {
                this.queryRecord.attStatus = ''
                this.queryRecord.leavePaidRate = 1
                this.queryRecord.leaveUnpaidRate = 0
            } else if (titleBoss == '带薪0') {
                this.queryRecord.attStatus = ''
                this.queryRecord.leaveUnpaidRate = 1
                this.queryRecord.leavePaidRate = 0
            }
            this.showRecord = true
            this.getListRecord()
        },
        disabledDate(time) {
            const str = this.attCurrentMonth + '-01'
            // 获取当前日期
            var currentDate = new Date(str)
            // 获取当前月份的第一天
            var firstDayOfMonth = new Date(
                currentDate.getFullYear(),
                currentDate.getMonth(),
                1,
            )
            // 获取当前月份的最后一天
            var lastDayOfMonth = new Date(
                currentDate.getFullYear(),
                currentDate.getMonth() + 1,
                0,
            )
            return time < firstDayOfMonth || time > lastDayOfMonth
        },
        /** 查询月异常详情列表 */
        getListRecord() {
            // getAttendanceRateDetail(
            //   this.queryRecord,
            //   this.dateRange
            // )(this.addDateRange(this.queryRecord, this.dateRange)).then(
            //   (response) => {
            //     this.tableDataRecord = response.rows;
            //     this.totalTwo = response.total;
            //   }
            // );

            if (this.tabIndex == '考勤报表') {
                getAttendanceRateDetail(
                    this.addDateRange(this.queryRecord, this.dateRange),
                ).then((response) => {
                    this.tableDataRecord = response.rows
                    this.totalTwo = response.total
                })
            } else {
                getAttAbnormalDetailsList(
                    this.addDateRange(this.queryRecord, this.dateRange),
                ).then((response) => {
                    this.tableDataRecord = response.rows
                    this.totalTwo = response.total
                })
            }
        },

        /** 搜索按钮操作 */
        handleQueryRecord() {
            this.queryRecord.pageNum = 1
            this.getListRecord()
        },

        cancelRecord() {
            this.showRecord = false
            this.resetRecord()
        },
        /** 重置按钮操作 */
        resetRecord() {
            // this.resetForm("queryFormRecord");
            this.handleQueryRecord()
        },

        /** 导出按钮操作 */
        handleExport() {
            let query = _.cloneDeep(this.queryParams)
            query.startMonth = query.month[0]
            query.endMonth = query.month[1]
            delete query['month']

            if (query.orgIdList && query.orgIdList.length > 0) {
                query.orgIds = query.orgIdList.map((id) => id.toString())
            } else {
                query.orgIds = undefined
            }
            delete query['orgIdList']

            console.log(query)
            exportAttRateTypeList(query).then((res) => {
                this.downloadFile({
                    fileName: `考勤率报表_${new Date().getTime()}.xlsx`,
                    fileData: res,
                    fileType: 'application/vnd.ms-excel;charset=utf-8',
                })
            })
        },

        handleExportAbnormal() {
            let query = _.cloneDeep(this.queryParamsAbnormal)
            exportAbnormalList(query).then((res) => {
                this.downloadFile({
                    fileName: `异常考勤统计_${new Date().getTime()}.xlsx`,
                    fileData: res,
                    fileType: 'application/vnd.ms-excel;charset=utf-8',
                })
            })
        },
        /** 更新应该出勤天数按钮操作 */
        handleDays() {
            // 显示加载中提示
            this.$modal.loading('加载中...')
            let query = _.cloneDeep(this.queryParams)
            let month = query.month[0]
            query.attCurrentMonth = month
            getDays(query)
                .then((response) => {
                    this.$modal.msgSuccess('更新成功')
                })
                .finally(() => {
                    // 不管请求成功或失败，最终都会关闭加载提示
                    this.$modal.closeLoading()
                })
        },

        //打开工作时间外出次数
        openOutCountList(row) {
            this.title = '工作时间外出次数'
            this.queryRecordOutCount.userId = row.userId
            this.queryRecordOutCount.attCurrentDay = row.attCurrentDay
            this.queryRecordOutCount.attCurrentMonth = row.attCurrentMonth
            this.showOutCount = true
            this.getOutCountList()
        },

        /** 查询工作时间外出次数列表 */
        getOutCountList() {
            this.loadingTwo = true
            getOutCountList(this.queryRecordOutCount).then((response) => {
                this.tableDataOutCount = response.rows
                this.totalTwoOutCount = response.total
                this.loadingTwo = false
            })
        },

        openRequiredDaysList(row) {
            this.title = '应出勤天数组成'
            this.queryRequiredDays.userId = row.userId
            this.queryRequiredDays.attCurrentDay = row.attCurrentDay
            this.queryRequiredDays.attCurrentMonth = row.attCurrentMonth
            this.showRequiredDays = true
            this.getRequiredDaysList()
        },

        /** 查询应出勤天数组成列表 */
        getRequiredDaysList() {
            this.loadingTwoRequiredDays = true
            getRequiredDaysList(this.queryRequiredDays).then((response) => {
                this.tableDataRequiredDays = response.rows
                this.totalTwoRequiredDays = response.total
                this.loadingTwoRequiredDays = false
            })
        },

        /** 导出按钮操作 */
        handleExportOutCountList() {
            exportOutCountList(this.queryRecordOutCount).then((res) => {
                this.downloadFile({
                    fileName: `工作时间外出次数记录_${new Date().getTime()}.xlsx`,
                    fileData: res,
                    fileType: 'application/vnd.ms-excel;charset=utf-8',
                })
            })
        },

        //打开打卡次数记录
        openAttCountList(row) {
            this.title = '打卡记录'
            this.queryAttCount.month = row.attCurrentMonth
            this.queryAttCount.userName = row.userName
            this.showAttCount = true
            this.getClockingRecordListByUserId()
        },

        /** 查询打卡次数记录列表 */
        getClockingRecordListByUserId() {
            this.loadingAttCount = true
            getClockingRecordListByUserId(this.queryAttCount).then(
                (response) => {
                    this.tableDataAttCount = response.rows
                    this.totalAttCount = response.total
                    this.loadingAttCount = false
                },
            )
        },

        // 查看年数据
        onHandleYearData() {
            this.getYearDataList()
            this.showYearDataVisible = true
        },

        // 获取年数据
        getYearDataList() {
            getYearDataListAPI(this.queryYearDataParams).then((response) => {
                this.tableDataYearData = response.rows
                this.totalYearData = response.total
            })
        },

        // 重置年数据查询
        resetQueryYearData() {
            this.queryYearDataParams.year = String(new Date().getFullYear())
            this.getYearDataList()
        },
        // 打开月数据
        openYearDataDetail(row, dataValue) {
            console.log(row, dataValue)

            this.queryParams.month = [
                `${this.queryYearDataParams.year}-${
                    dataValue > 9 ? dataValue : '0' + dataValue
                }`,
                `${this.queryYearDataParams.year}-${
                    dataValue > 9 ? dataValue : '0' + dataValue
                }`,
            ]

            this.queryParams.userName = row.userName
            // this.queryParams.orgIdList = [250];
            this.queryParams.orgName = row.orgName
            this.handleQuery()
            this.showYearDataVisible = false
        },

        handleExportYearDataList() {
            exportYearDataListAPI(this.queryYearDataParams).then((res) => {
                this.downloadFile({
                    fileName: `年报表记录_${new Date().getTime()}.xlsx`,
                    fileData: res,
                    fileType: 'application/vnd.ms-excel;charset=utf-8',
                })
            })
        },

        // 获取异常考勤统计列表
        getAbnormalList() {
            let query = _.cloneDeep(this.queryParamsAbnormal)
            if (query.orgIdList && query.orgIdList.length > 0) {
                query.orgIds = query.orgIdList.map((id) => id.toString())
            } else {
                query.orgIds = undefined
            }
            delete query['orgIdList']

            getLateEarlyAbsentList(query).then((response) => {
                this.abnormalList = response.rows
                this.totalAbnormal = response.total
            })
        },

        handleQueryAbnormal() {
            this.getAbnormalList()
        },

        resetQueryAbnormal() {
            this.queryParamsAbnormal = {
                attCurrentMonth: new Date()
                    .toISOString()
                    .split('T')[0]
                    .slice(0, 7),
                userName: undefined,
                orgIdList: undefined,
                orgName: undefined,
                pageNum: 1,
                pageSize: 10,
                year: '',
            }
            this.getAbnormalList()
        },
    },
}
</script>
