<template>
	<div class="NCC-common-layout">
		<div class="NCC-common-layout-center">
			<el-row class="NCC-common-search-box" :gutter="16">
				<el-form @submit.native.prevent>
				<el-col :span="6">
					<el-form-item label="员工姓名">
						<user-select v-model="query.userId" placeholder="请选择员工" clearable />	
					</el-form-item>
				</el-col>
					<el-col :span="6">
						<el-form-item label="年份">
							<el-select v-model="query.year" placeholder="年份" clearable>
								<el-option v-for="year in yearOptions" :key="year" :label="year + '年'" :value="year" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="月份">
							<el-select v-model="query.month" placeholder="月份" clearable>
								<el-option v-for="month in monthOptions" :key="month" :label="month + '月'" :value="month" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="员工状态">
							<el-select v-model="query.employeeStatus" placeholder="员工状态" clearable>
								<el-option label="在职" :value="1" />
								<el-option label="离职" :value="0" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item>
							<el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
							<el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
						</el-form-item>
					</el-col>
				</el-form>
			</el-row>
			<div class="NCC-common-layout-main NCC-flex-main">
				<div class="NCC-common-head">
					<div>
						<el-button type="primary" icon="el-icon-upload2" @click="handleImport()">导入</el-button>
						<el-button type="text" icon="el-icon-download" @click="downloadTemplate()">导出模板</el-button>
						<el-button type="text" icon="el-icon-delete" @click="handleBatchDelete()">批量删除</el-button>
					</div>
					<div class="NCC-common-head-right">
						<el-tooltip effect="dark" content="刷新" placement="top">
							<el-link icon="icon-ym icon-ym-Refresh NCC-common-head-icon" :underline="false" @click="reset()" />
						</el-tooltip>
						<screenfull isContainer />
					</div>
				</div>
                <NCC-table v-loading="listLoading" :data="list" has-c @selection-change="handleSelectionChange">
					<el-table-column prop="userName" label="员工姓名" align="left" />
					<el-table-column prop="year" label="年份" align="left" />
					<el-table-column prop="month" label="月份" align="left" />
					<el-table-column label="员工状态" prop="employeeStatus" align="left">
						<template slot-scope="scope">
							<el-tag :type="scope.row.employeeStatus === 1 ? 'success' : 'danger'" size="small">
								{{ scope.row.employeeStatus === 1 ? '在职' : '离职' }}
							</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="workDays" label="工作天数" align="left" />
					<el-table-column prop="leaveDays" label="请假天数" align="left" />
					<el-table-column prop="restDays" label="休息天数" align="left" />
					<el-table-column prop="remark" label="备注" align="left" />
					<el-table-column label="创建时间" prop="createTime" align="left" width="150">
						<template slot-scope="scope">
							{{ formatTime(scope.row.createTime) }}
						</template>
					</el-table-column>
					<el-table-column label="更新时间" prop="updateTime" align="left" width="150">
						<template slot-scope="scope">
							{{ formatTime(scope.row.updateTime) }}
						</template>
					</el-table-column>
				</NCC-table>
                <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="initData" />
            </div>
        </div>
		
		<!-- 导入弹窗 -->
		<ImportDialog v-if="importVisible" ref="ImportDialog" @refresh="refresh" />
		
		<!-- 批量删除弹窗 -->
		<BatchDeleteDialog v-if="batchDeleteVisible" ref="BatchDeleteDialog" @refresh="refresh" />
	</div>
</template>

<script>
    import request from '@/utils/request'
    import ImportDialog from './ImportDialog'
    import BatchDeleteDialog from './BatchDeleteDialog'
    import { saveAs } from 'file-saver'
    
	export default {
        components: { ImportDialog, BatchDeleteDialog },
        data() {
			return {
				query: {
                    userId: undefined,
                    year: undefined,
                    month: undefined,
                    employeeStatus: undefined,
				},
                list: [],
                listLoading: true,
                multipleSelection: [], 
                total: 0,
                listQuery: {
                    currentPage: 1,
                    pageSize: 20,
					sort: "desc",
                    sidx: "",
                },
                importVisible: false,
                batchDeleteVisible: false,
                yearOptions: [],
                monthOptions: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
			}
        },
		computed: {},
		created() {
			this.initYearOptions()
			this.initData()
		},
		methods: {
			initYearOptions() {
				const currentYear = new Date().getFullYear()
				for (let i = currentYear - 5; i <= currentYear + 1; i++) {
					this.yearOptions.push(i)
				}
			},
			initData() {
                this.listLoading = true;
                let _query = {
                    ...this.listQuery,
                    ...this.query
                };
                let query = {}
                for (let key in _query) {
                    if (Array.isArray(_query[key])) {
                        query[key] = _query[key].join()
                    } else {
                        query[key] = _query[key]
                    }
                }
                request({
                    url: `/api/Extend/lqattendancesummary`,
                    method: 'GET',
                    data: query
                }).then(res => {
                    this.list = res.data.list
                    this.total = res.data.pagination.total
                    this.listLoading = false
                })
            },
			handleDel(id) {
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    type: 'warning'
                }).then(() => {
                    request({
                        url: `/api/Extend/lqattendancesummary/${id}`,
                        method: 'DELETE'
                    }).then(res => {
                        this.$message({
                            type: 'success',
                            message: res.msg,
                            onClose: () => {
                                this.initData()
                            }
                        });
                    })
                }).catch(() => {
                });
            },
			handleSelectionChange(val) {
                const res = val.map(item => item.id)
                this.multipleSelection = res
            },
            handleImport() {
                this.importVisible = true
                this.$nextTick(() => {
                    this.$refs.ImportDialog.init()
                })
            },
            handleBatchDelete() {
                this.batchDeleteVisible = true
                this.$nextTick(() => {
                    this.$refs.BatchDeleteDialog.init()
                })
            },
            async downloadTemplate() {
                try {
                    // &gw=健康师
                    // 获取健康师数据
                    const jksRes = await request({
                        url: '/api/Extend/user?page=1&pageSize=1000',
                        method: 'GET',
                    })
                    
                    if (jksRes.code !== 200 || !jksRes.data || !jksRes.data.list || jksRes.data.list.length === 0) {
                        this.$message({
                            type: 'warning',
                            message: '暂无健康师数据',
                            duration: 1500
                        })
                        return
                    }
                    
                    // 过滤出状态为正常的用户（enabledMark == 1）
                    const enabledUsers = jksRes.data.list.filter(item => item.enabledMark == 1)
                    
                    if (enabledUsers.length === 0) {
                        this.$message({
                            type: 'warning',
                            message: '暂无正常状态的用户数据',
                            duration: 1500
                        })
                        return
                    }
                    
                    // 动态导入 xlsx 库
                    const XLSX = await import('xlsx')
                    
                    // 构建表头
                    const headers = [
                        'id',
                        '员工姓名',
                        '员工电话',
                        '年份',
                        '月份',
                        '出勤天数',
                        '请假天数',
                        '休息天数',
                        '备注'
                    ]
                    
                    // 构建数据行：每个健康师一行（只包含正常状态的用户）
                    const dataRows = enabledUsers.map(item => {
                        return [
                            item.id,
                            item.realName || '无', // 员工姓名
                            item.mobilePhone || '无', // 员工电话
                            '', // 年份
                            '', // 月份
                            '', // 出勤天数
                            '', // 请假天数
                            '', // 休息天数
                            ''  // 备注
                        ]
                    })
                    
                    // 合并表头和数据
                    const excelData = [headers, ...dataRows]
                    
                    // 创建工作表
                    const ws = XLSX.utils.aoa_to_sheet(excelData)
                    
                    // 设置列宽
                    ws['!cols'] = [
                        { wch: 15 }, // 员工姓名
                        { wch: 15 }, // 员工电话
                        { wch: 10 }, // 年份
                        { wch: 10 }, // 月份
                        { wch: 12 }, // 出勤天数
                        { wch: 12 }, // 请假天数
                        { wch: 12 }, // 休息天数
                        { wch: 20 }  // 备注
                    ]
                    
                    // 创建工作簿
                    const wb = XLSX.utils.book_new()
                    XLSX.utils.book_append_sheet(wb, ws, '考勤统计导入模板')
                    
                    // 生成文件名
                    const fileName = `考勤统计导入模板_${new Date().getTime()}.xlsx`
                    
                    // 导出文件
                    const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' })
                    saveAs(new Blob([wbout], { type: 'application/octet-stream' }), fileName)
                    
                    this.$message({
                        type: 'success',
                        message: '模板下载成功',
                        duration: 1500
                    })
                } catch (error) {
                    console.error('下载模板失败:', error)
                    this.$message({
                        type: 'error',
                        message: error.message && error.message.includes('xlsx') 
                            ? '导出失败：请先安装 xlsx 库，运行命令: npm install xlsx --save'
                            : '模板下载失败，请稍后重试',
                        duration: 3000
                    })
                }
            },
            formatTime(timestamp) {
                if (!timestamp) return '无'
                const date = new Date(timestamp)
                return date.toLocaleString('zh-CN', {
                    year: 'numeric',
                    month: '2-digit',
                    day: '2-digit',
                    hour: '2-digit',
                    minute: '2-digit',
                    second: '2-digit'
                })
            },
			search() {
                this.listQuery = {
                    currentPage: 1,
                    pageSize: 20,
                    sort: "desc",
                    sidx: "",
                }
                this.initData()
            },
            refresh(isrRefresh) {
                this.importVisible = false
                this.batchDeleteVisible = false
                if (isrRefresh) this.reset()
            },
            reset() {
                for (let key in this.query) {
                    this.query[key] = undefined
                }
                this.listQuery = {
                    currentPage: 1,
                    pageSize: 20,
                    sort: "desc",
                    sidx: "",
                }
                this.initData()
            }
		}
    }
</script>
