<template>
    <div>
        <div class="headers">
            <div class="headers-left">
                <div class="imgs"></div>
                <div class="img-right">
                    <div class="name-title">微育科技</div>
                    <div class="right-name">数智科创 · 通达未来</div>
                </div>
            </div>
            <div class="headers-right">
                <div class="rights">
                    <div class="rights-names" @click="btnBack">
                        <span>上一级 &lt; </span> <span style="color:#3333;">研发人员考勤明细</span>
                    </div>
                </div>
                <div class="user-info">
                    <div class="avatar">Y</div>
                    <div class="user-details">
                        <div>言雨天</div>
                        <div>13424098909</div>
                    </div>
                   
                </div>
            </div>
        </div>

        <div class="contents">
            <div class="content-left">
                <div class="content-lefts">
                    <div class="attendance-container">
                        <div class="title-section">
                            <h2 class="main-title">2025年1月考勤表</h2>
                            <div class="headerss">
                                <div class="legend">
                                <div class="legend-item">
                                    <span class="legend-icon checkmark">✓</span>
                                    <span>出勤</span>
                                </div>
                                <div class="legend-item">
                                    <span class="legend-icon circle">O</span>
                                    <span>请假一天</span>
                                </div>
                                <div class="legend-item">
                                    <span class="legend-icon halfmoon">D</span>
                                    <span>请假半天</span>
                                </div>
                                <div class="legend-item">
                                    <span class="legend-icon triangle">▲</span>
                                    <span>出差</span>
                                </div>
                               
                        </div>
                        <div class="legend-item">
                                    <el-button @click="btnReupload" type="primary" size="small" style="background-color: #5165f7;color:white;margin-left: 15px;">重新上传</el-button>
                            </div>
                            </div>
                         
                        </div>

                        <div class="attendance-table-wrapper">
                            <table class="attendance-table">
                                <thead>
                                    <tr>
                                        <th rowspan="2" class="serial-col">序号</th>
                                        <th rowspan="2" class="name-col" >姓名</th>
                                        <th 
                                            v-for="day in days" 
                                            :key="day.date"
                                            :colspan="1" 
                                            :class="['day-header', { 'weekend': day.isWeekend }]">
                                            <div class="day-row">{{ day.weekday }}</div>
                                            <div class="date-row">{{ day.date }}</div>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(employee, index) in employees" :key="index">
                                        <td class="serial-col">{{ index + 1 }}</td>
                                        <td class="name-col">{{ employee.name }}</td>
                                        <td 
                                            v-for="day in days" 
                                            :key="day.date"
                                            :class="['day-cell', { 'weekend': day.isWeekend }]"
                                        >
                                            <div class="cell-content">
                                                <span v-if="getAttendanceStatus(employee, day.date) === 'attendance'" class="checkmark">✓</span>
                                                <span v-else-if="getAttendanceStatus(employee, day.date) === 'leave-full'" class="circle">O</span>
                                                <span v-else-if="getAttendanceStatus(employee, day.date) === 'leave-half'" class="halfmoon">D</span>
                                                <span v-else-if="getAttendanceStatus(employee, day.date) === 'business-trip'" class="triangle">▲</span>
                                                <span v-else-if="getAttendanceStatus(employee, day.date) === 'project'" class="project-box">WY123 4210</span>
                                                <span v-else></span>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ExamStatusEdit',
    data() {
        return {
            days: this.generateDays(2025, 1),
            employees: [
                { name: '徐蛟', attendance: {} },
                { name: '陈翔', attendance: {
                    5: 'project',
                    12: 'leave-full',
                    13: 'leave-full',
                    14: 'leave-full',
                    18: 'leave-full',
                    25: 'leave-half',
                    26: 'leave-half',
                    27: 'leave-half',
                    28: 'leave-half'
                }},
                { name: '高超', attendance: {
                    15: 'project',
                    16: 'project',
                    17: 'project',
                    22: 'project'
                }},
                { name: '杨雪峰', attendance: {
                    22: 'project'
                }},
                { name: '陈翔', attendance: {
                    5: 'project'
                }},
                { name: '高超', attendance: {
                    15: 'project',
                    16: 'project',
                    17: 'project',
                    22: 'project'
                }},
                { name: '陈翔', attendance: {
                    5: 'project'
                }},
                { name: '高超', attendance: {
                    22: 'project'
                }},
                { name: '陈翔', attendance: {
                    5: 'project'
                }},
                { name: '高超', attendance: {
                    22: 'project'
                }},
                { name: '杨雪峰', attendance: {
                    22: 'project'
                }}
            ]
        }
    },
    methods: {
        generateDays(year, month) {
            const days = []
            const daysInMonth = new Date(year, month, 0).getDate()
            const weekdays = ['日', '一', '二', '三', '四', '五', '六']
            
            for (let date = 1; date <= daysInMonth; date++) {
                const day = new Date(year, month - 1, date)
                const weekday = weekdays[day.getDay()]
                const isWeekend = day.getDay() === 0 || day.getDay() === 6
                
                days.push({
                    date,
                    weekday,
                    isWeekend
                })
            }
            
            return days
        },
        getAttendanceStatus(employee, date) {
            if (employee.attendance && employee.attendance[date]) {
                return employee.attendance[date]
            }
            return 'attendance'
        },
        btnBack() {
            this.$router.go(-1)
        },
        btnReupload() {
            console.log('重新上传')
            // 处理重新上传逻辑
        }
    }
}
</script>

<style scoped>
.headerss{
    display: flex
;
    width: 86%;
    justify-content: space-between;
}
.headers {
    width: 100%;
    height: 90px;
    display: flex;
    border-bottom: 1px solid #EDEFFE;
}

.headers-left {
    width: 222px;
    height: 100%;
    display: flex;
    background: white;
    border-right: 1px solid #EDEFFE;
}

.imgs {
    width: 45px;
    height: 46px;
    background: #5165f7;
    border-radius: 6px;
    position: relative;
    top: 26px;
    margin-left: 24px;
}

.img-right {
    font-size: 14px;
    position: relative;
    top: 40px;
    height: 40px;
    margin-left: 12px;
}

.name-title {
    position: relative;
    top: -6px;
    font-weight: bold;
}

.right-name {
    font-size: 12px;
}

.headers-right {
    flex: 1;
    background: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.rights {
    display: flex;
    align-items: center;
}

.rights-names {
    cursor: pointer;
}

.user-info {
    display: flex;
    align-items: center;
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #5165f7;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-weight: bold;
}

.user-details {
    font-size: 14px;
}

.contents {
    width: 100%;
    min-height: calc(100vh - 90px);
    background: #f8f8f8;
    padding: 20px;
}

.content-left {
    width: 100%;
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-sizing: border-box;
}

.content-lefts {
    width: 100%;
}

.attendance-container {
    width: 100%;
    box-sizing: border-box;
}

.title-section {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #EDEFFE;
}

.main-title {
    font-size: 20px;
    font-weight: bold;
    color: #363636;
    margin: 0;
}

.legend {
    display: flex;
    gap: 20px;
    margin-left: 30px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    color: #363636;
}

.legend-icon {
    display: inline-block;
    width: 20px;
    text-align: center;
}

.legend-icon.checkmark {
    color: #67C23A;
    font-weight: bold;
}

.legend-icon.circle {
    color: #606266;
}

.legend-icon.halfmoon {
    color: #606266;
}

.legend-icon.triangle {
    color: #606266;
}

.attendance-table-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.attendance-table-wrapper::-webkit-scrollbar {
    height: 8px;
}

.attendance-table-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.attendance-table-wrapper::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.attendance-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.attendance-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #EBEEF5;
    font-size: 14px;
    table-layout: auto;
}

.attendance-table th,
.attendance-table td {
    border: 1px solid #EBEEF5;
    padding: 8px;
    text-align: center;
    vertical-align: middle;
}

.attendance-table th {
    background: #EDEFFE;
    color: #363636;
    font-weight: bold;
}

.serial-col {
    width: 60px;
}

.name-col {
    width: 60px;
    min-width: 60px;
}

.day-header {
    width: 35px;
    min-width: 35px;
    padding: 0;
}

.day-header.weekend {
    background: #E8F5E9;
}

.day-row {
    padding: 4px;
    font-size: 12px;
    border-bottom: 1px solid #EBEEF5;
}

.date-row {
    padding: 4px;
    font-size: 12px;
}

.day-cell {
    width: 35px;
    min-width: 35px;
    height: 40px;
    padding: 4px;
}

.day-cell.weekend {
    background: #E8F5E9;
}

.cell-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.checkmark {
    color: #67C23A;
    font-weight: bold;
    font-size: 16px;
}

.circle {
    color: #606266;
    font-size: 16px;
}

.halfmoon {
    color: #606266;
    font-size: 14px;
}

.triangle {
    color: #606266;
    font-size: 12px;
}

.project-box {
    background: #67C23A;
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    white-space: nowrap;
}
</style>
