<template>
  <div class="project-progress-container">
    <!-- 左侧项目信息表单 -->
    <div class="left-section">
      <h3 class="mb20 ml10 textl">项目人员表</h3>
      <el-form :model="projectInfo" label-width="120px" class="project-info-form">
        <el-form-item label="选择项目">
          <el-select v-model="selectedProject" placeholder="请选择项目" @change="handleProjectChange">
            <el-option
              v-for="project in projectList"
              :key="project.id"
              :label="project.name"
              :value="project.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目名称">
          <span>{{ projectInfo.name }}</span>
        </el-form-item>
        <el-form-item label="项目编码">
          <span>{{ projectInfo.code }}</span>
        </el-form-item>
        <el-form-item label="预计工时">
          <span>{{ projectInfo.presetDays }} 天</span>
        </el-form-item>
        <el-form-item label="项目开始时间">
          <span>{{ projectInfo.startDate }}</span>
        </el-form-item>
        <el-form-item label="项目结束时间">
          <span>{{ projectInfo.endDate }}</span>
        </el-form-item>
      </el-form>
    </div>

    <!-- 右侧滚动列表格 -->
    <div class="right-section">
      <div class="date-range-container">
        <span class="date-range-label">统计时间：</span>
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="handleDateRangeChange"
        />
      </div>
      <CustomTable
        :columns="scrollableColumns"
        :tableData="executionData"
        :showPagination="false"
        :maxHeight="tableHeight"
        @button-click="handleButtonClick"
      >
      </CustomTable>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import CustomTable from '@/components/CustomTable.vue'

const router = useRouter()

const dateRange = ref(getDefaultDateRange())
const tableHeight = ref('100%')
const selectedProject = ref(null)
const projectInfo = ref({
  name: '',
  code: '',
  presetDays: '',
  startDate: '',
  endDate: '',
})

const projectList = [
  { id: 1, name: '项目1', code: 'XM001', presetDays: 120, startDate: '2024-09-01', endDate: '2024-09-30' },
  { id: 2, name: '项目2', code: 'XM002', presetDays: 90, startDate: '2024-10-01', endDate: '2024-12-31' },
  // 添加更多项目...
]

function getDefaultDateRange() {
  const now = new Date()
  const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1)
  const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0)
  return [startOfMonth, endOfMonth]
}

const scrollableColumns = computed(() => {
  if (dateRange.value && dateRange.value.length === 2) {
    const start = new Date(dateRange.value[0])
    const end = new Date(dateRange.value[1])
    const days = []
    for (let d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
      const dayOfWeek = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][d.getDay()]
      const dateStr = `${d.getMonth() + 1}/${d.getDate()}`
      days.push({
        prop: dateStr,
        label: `${dayOfWeek}\n${dateStr}`,
        minWidth: 100,
        type: 'multiButton'
      })
    }
    return days
  }
  return []
})

const executionData = computed(() => {
  // 这里我们模拟一些数据，实际使用时应该从后端获取
  const data = {
    '张三': ['2023/5/1', '2023/5/2', '2023/5/3'],
    '李四': ['2023/5/1', '2023/5/3', '2023/5/4'],
    '王五': ['2023/5/2', '2023/5/3', '2023/5/5'],
    '赵六': ['2023/5/1', '2023/5/4', '2023/5/5'],
    '钱七': ['2023/5/2', '2023/5/4', '2023/5/5']
  }

  const result = {}
  if (dateRange.value && dateRange.value.length === 2) {
    const start = new Date(dateRange.value[0])
    const end = new Date(dateRange.value[1])
    for (let d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
      const dateStr = `${d.getMonth() + 1}/${d.getDate()}`
      result[dateStr] = Object.keys(data).filter(name => 
        data[name].includes(`${d.getFullYear()}/${dateStr}`)
      )
    }
  }
  return [result] // 将结果包装在数组中，因为 el-table 期望一个数组
})

const handleDateRangeChange = () => {
  // 日期范围变化时，可以在这里添加额外的逻辑
}

const handleProjectChange = projectId => {
  const selectedProjectInfo = projectList.find(project => project.id === projectId)
  if (selectedProjectInfo) {
    projectInfo.value = { ...selectedProjectInfo }
  }
}

const handleButtonClick = ({ userName, date }) => {
  console.log(`点击了 ${userName} 在 ${date} 的工作日志`)
  // 这里可以添加跳转到工作日志页面的逻辑
  router.push({
    name: 'WorkLog',
    params: { userId: userName },
    query: {
      date: date,
      projectId: selectedProject.value
    }
  })
}

</script>

<style scoped>
.project-progress-container {
  display: flex;
  height: 88vh;
  background-color: white;
}

.left-section,
.right-section {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.left-section {
  width: 400px; /* 根据固定列的总宽度调整 */
  padding-top: 34px;
  padding-bottom: 20px;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5); /* 添加右侧阴影 */
  z-index: 1; /* 确保左侧在右侧之上 */
  margin-right: 5px;
  position: relative;
}

.right-section {
  flex: 1;
  overflow-x: auto;
  padding: 20px;
  padding-left: 0; /* 移除左侧内边距，与左侧部分紧密相连 */
}

.placeholder-header {
  height: 102px; /* 与左侧表格的标题和日期选择器高度一致 */
}

.date-range {
  margin-bottom: 20px;
}

:deep(.el-table) {
  /* border: 1px solid #dcdfe6; */
  height: 100% !important;
}

:deep(.el-table__header th) {
  background-color: #4a4a4a;
  color: white;
  text-align: center;
}

:deep(.el-table__body td) {
  text-align: center;
}

:deep(.el-table__footer td) {
  background-color: #f5f7fa;
  font-weight: bold;
  text-align: center; /* 确保合计行内容居中 */
}

:deep(.el-table__header .cell),
:deep(.el-table__body .cell),
:deep(.el-table__footer .cell) {
  white-space: pre-wrap;
  line-height: 1.2;
  padding: 8px 0;
}

:deep(.el-table__body-wrapper) {
  overflow-x: hidden;
}

/* 确保两个表格的高度一致 */
.left-section :deep(.el-table),
.right-section :deep(.el-table) {
  height: 100% !important;
}

/* 调整日期选择器样式 */
:deep(.el-date-editor) {
  width: 100%;
}

/* 调整表内容的字体大小 */
:deep(.el-table) {
  font-size: 14px;
}

/* 调整表头的样式 */
:deep(.el-table__header-wrapper) {
  background-color: #f5f7fa;
}
.rightTab :deep(.el-table__header th) {
  background-color: #fff;
}
:deep(.el-table__header th) {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: bold;
}

/* 调整合计行的样式 */
:deep(.el-table__footer-wrapper) {
  background-color: #f5f7fa;
}

:deep(.el-table__footer td) {
  background-color: #f5f7fa !important;
  font-weight: bold;
  color: #606266;
}

.date-range-container {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  width: 500px;
  margin-left: 20px;
}

.date-range-label {
  white-space: nowrap;
  margin-right: 10px;
}

:deep(.el-date-editor.el-input__wrapper) {
  flex: 1;
}
.custom-table {
  height: 100%;
}

.project-name {
  cursor: pointer;
  color: #409eff;
}

.project-name:hover {
  text-decoration: underline;
}

.user-select-container {
  position: absolute;
  top: 25px;
  right: 10px;
  width: 220px;
  z-index: 2;
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 10px;
  span {
    width: 100px;
  }
}
</style>