<template>
  <v-dialog
    :title="title"
    :close-on-click-modal="false"
	width="1300px"
    v-model="visible">
	  <el-form  :inline="true" class="query-form m-b-10"  v-if="searchVisible" ref="searchForm" :model="searchForm" @keyup.enter="refreshList()" @submit.prevent>
		  <!-- 搜索框-->
		  <el-form-item label="工作时间" prop="meetingDates">
			  <el-date-picker
				  style="width:50%;"
				  v-model="searchForm.workDates"
				  type="datetimerange"
				  value-format="YYYY-MM-DD HH:mm:ss"
				  placeholder="请选择日期"
				  @change="handleDateChange"
			  />
		  </el-form-item>
		  <el-form-item>
			  <el-button type="primary" @click="refreshList()"  icon="search">查询</el-button>
			  <el-button type="default" @click="resetSearch()"  icon="refresh-right">重置</el-button>
		  </el-form-item>
	  </el-form>
	  <el-table :data="gridData" @cell-click="handleCellClick" height="500px" :show-summary="true"
				:summary-method="summaryMethod">
		  <el-table-column
			  width = "130px"
			  v-for="(column, index) in columns"
			  :key="index"
			  :label="column.name"
			  :prop="column.id"

		  ></el-table-column>
	  </el-table>

    <template #footer>
        <span class="dialog-footer">
          <el-button @click="close()" icon="circle-close">关闭</el-button>
        </span>
    </template>
  </v-dialog>
	<PunchCardListDia ref="punchCardListDia"></PunchCardListDia>
</template>

<script>
	import ddService from "@/api/test/dd/dd.js"
	import PunchCardListDia from "./PunchCardListDia";
  export default {
    data () {
      return {
      	userId:"",
      	userName:"",
      	userTitle:"",
        title: '',
        method: '',
        visible: false,
        loading: false,
	    gridData:[],
	    searchVisible: true,
	    searchForm:{
			workDates:[]
	    },
		  columns: [],
	  }
    },
    components: {
		PunchCardListDia
    },
    created () {
    },
    methods: {
      init (id,name,title) {
		  this.title = name+'的考勤列表'
		  this.visible = true
		  this.userId = id
		  this.userName = name
		  this.userTitle = title
        this.loading = false
        this.$nextTick(() => {
			this.loading = true
			ddService.getattcolumns().then((data) => {
				console.log('data',data.result)
				this.columns = data.result.columns.slice(0, 18);
				let leaveTypes = this.columns
					.map(item => item.id)   // 提取 columns 中每个 item 的 name 属性
					.join(',');
				this.columns.unshift({ id: '1', name: '日期' });
				this.columns = this.columns.map(item => {
					if (item.name.includes('时长')) {
						item.name = item.name + '(分钟)';
					} else if (item.name.includes('次数')) {
						item.name = item.name + '(次)';
					} else if (item.name.includes('天数')) {
						item.name = item.name + '(天)';
					}
					return item;
				});


				let params = {
					userId:id,
					leaveTypes:leaveTypes,
					dateFrom:"",
					dateTo:""
				}
				ddService.getleavetimebynames(params).then((da) =>{
					console.log('da',da)
					const numColumns = da.result.columnVals.length;
					const numRows = da.result.columnVals[0].columnVals.length;

					// 假设每一行的数据来自于 columnVals 中的多个列
					// 遍历每一列的值
					for (let rowIndex = 0; rowIndex < numRows; rowIndex++) {
						let obj = {};  // 每一行的数据对象
						// 假设第一列是日期，获取日期字段
						let dateValue = da.result.columnVals[0].columnVals[rowIndex]?.date || '';  // 获取日期值
						let dateOnly = dateValue.split(' ')[0];  // 按空格分割，获取日期部分
						obj[this.columns[0].id] = dateOnly; // 将日期添加到对象中，作为每一行的第一列
						// 遍历当前行的列数据，并填充到 obj 中
						for (let colIndex = 0; colIndex < numColumns; colIndex++) {
							// 获取每列的数据
							let columnData = da.result.columnVals[colIndex].columnVals[rowIndex];

							// 提取 value 字段
							let columnValue = columnData?.value || '';  // 使用可选链，确保字段存在
							// 将当前列的数据填充到 obj 中，列名来自 this.columns
							obj[this.columns[colIndex+1].id] = columnValue; // 使用 this.columns 中的 id 作为 key
						}
						// 将当前行的 obj 数据加入 gridData
						this.gridData.push(obj);
					}
				})

				this.loading = false
			})
        })
      },
		refreshList(){
			this.loading = true

			ddService.getattcolumns().then((data) => {
				console.log('data',data.result)
				this.columns = data.result.columns.slice(0, 18);
				let leaveTypes = this.columns
					.map(item => item.id)   // 提取 columns 中每个 item 的 name 属性
					.join(',');
				this.columns.unshift({ id: '1', name: '日期' });
				this.columns = this.columns.map(item => {
					if (item.name.includes('时长')) {
						item.name = item.name + '(分钟)';
					} else if (item.name.includes('次数')) {
						item.name = item.name + '(次)';
					} else if (item.name.includes('天数')) {
						item.name = item.name + '(天)';
					}
					return item;
				});
				let params = {
					userId:this.userId,
					leaveTypes:leaveTypes,
					dateFrom:this.searchForm.workDates[0],
					dateTo:this.searchForm.workDates[1]
				}
				ddService.getleavetimebynames(params).then((da) =>{
					console.log('da',da)
					const numColumns = da.result.columnVals.length;
					const numRows = da.result.columnVals[0].columnVals.length;
					this.gridData = []
					// 假设每一行的数据来自于 columnVals 中的多个列
					// 遍历每一列的值
					for (let rowIndex = 0; rowIndex < numRows; rowIndex++) {
						let obj = {};  // 每一行的数据对象
						// 假设第一列是日期，获取日期字段
						let dateValue = da.result.columnVals[0].columnVals[rowIndex]?.date || '';  // 获取日期值
						let dateOnly = dateValue.split(' ')[0];  // 按空格分割，获取日期部分
						obj[this.columns[0].id] = dateOnly; // 将日期添加到对象中，作为每一行的第一列
						// 遍历当前行的列数据，并填充到 obj 中
						for (let colIndex = 0; colIndex < numColumns; colIndex++) {
							// 获取每列的数据
							let columnData = da.result.columnVals[colIndex].columnVals[rowIndex];

							// 提取 value 字段
							let columnValue = columnData?.value || '';  // 使用可选链，确保字段存在
							// 将当前列的数据填充到 obj 中，列名来自 this.columns
							obj[this.columns[colIndex+1].id] = columnValue; // 使用 this.columns 中的 id 作为 key
						}
						// 将当前行的 obj 数据加入 gridData
						this.gridData.push(obj);
					}
				})

				this.loading = false
			})
		},
		resetSearch () {
			this.$refs.searchForm.resetFields()
			this.searchForm.workDates = [] // 重置时清空供应商筛选
			this.refreshList()
		},
		close(){
			this.visible = false
			this.searchForm.workDates = []
		},
		handleCellClick(row, column, cell, event) {
			console.log('column',column)
			console.log('this.columns[0]', row[this.columns[0].id])
			let workDate = this.moment(row[this.columns[0].id]).format('YYYY-MM-DD HH:mm:ss');
			// 判断是否是第一列
			this.$refs.punchCardListDia.init(this.userId, this.userName, this.userTitle,workDate)

			// if (column.property === this.columns[0].id) {
			// 	console.log('点击了第一列:', row);
			// }
		},
		summaryMethod({ columns, data }) {
			const sums = [];
			columns.forEach((column, index) => {
				if (index === 0) {
					sums[index] = '汇总';  // 第一列可以是文字或“Total”
				} else {
					// 对数字列进行求和
					const values = data.map(item => Number(item[column.property]));
					sums[index] = values.reduce((prev, curr) => prev + curr, 0);
				}
			});
			return sums;
		},
		handleDateChange(val) {
			if (val && val[0] && val[1]) {
				const startDate = new Date(val[0]);
				const endDate = new Date(val[1]);
				const diffDays = (endDate - startDate) / (1000 * 3600 * 24); // 计算日期差距

				if (diffDays > 31) {
					this.$message.warning('选择的时间范围不能超过31天');
					// 限制选中的日期范围为31天内
					const newEndDate = new Date(startDate);
					newEndDate.setDate(startDate.getDate() + 31);
					this.searchForm.workDates = [startDate, newEndDate];
				}
			}
		},
    }
  }
</script>


