<template>
	<div>
		<el-container>
			<!-- 左侧树形结构 -->
			<el-aside width="270px">
				<div class="JKWTree-tree" style="height: 500px">
					<h3>组织列表</h3>
					<el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
				</div>
			</el-aside>

			<!-- 右侧内容区域 -->
			<el-container>
				<el-main>
					<!-- 搜索框 -->
					<div class="gva-search-box">
						<el-form ref="elSearchFormRef" :inline="true" :model="searchInfo" class="demo-form-inline"
							:rules="searchRule" @keyup.enter="onSubmit">
							<!-- 左侧查询输入框 -->
							<el-form-item>
								<el-input v-model="searchInfo.ke" placeholder="查询请输入员工编号或员工姓名" clearable
									style="width: 300px;"></el-input>
							</el-form-item>
							<!-- 右侧查询和重置按钮 -->
							<el-form-item>
								<el-button type="primary" icon="search" @click="onSubmit">查询</el-button>
								<el-button icon="refresh" @click="onReset">重置</el-button>
							</el-form-item>
						</el-form>
					</div>

					<!-- 表格及操作按钮 -->
					<div class="gva-table-box">

						<!-- 操作按钮部分 -->
						<div class="gva-btn-list">
							<el-button type="primary" icon="plus" @click="openDialog">新增</el-button>
							<!-- 导出到Excel功能 -->
							<el-button type="primary" icon="el-icon-download" style="margin-left: 10px;"
								@click="showExportDialog">导出到Excel</el-button>
						</div>

						<!-- 导出字段选择对话框 -->
						<el-dialog title="选择导出字段" :visible.sync="exportDialogVisible" width="30%">
							<el-checkbox-group v-model="selectedExportFields">
								<el-checkbox label="employeenumber">员工编号</el-checkbox>
								<el-checkbox label="employeename">员工姓名</el-checkbox>
								<el-checkbox label="gender">性别</el-checkbox>
								<!-- 添加更多字段选项 -->
							</el-checkbox-group>
							<div slot="footer" class="dialog-footer">
								<el-button @click="exportDialogVisible = false">取 消</el-button>
								<el-button type="primary" @click="exportSelectedFields">确 定</el-button>
							</div>
						</el-dialog>

						<!-- 表格 -->
						<el-table ref="multipleTable"
                      style="width: 100%;height: 500px"
                      tooltip-effect="dark" :data="tableData" border
							row-key="ID" @row-dblclick="handleRowDoubleClick" @selection-change="handleSelectionChange">
							<el-table-column type="selection" width="55" />
							<el-table-column align="left" label="员工编号" prop="员工编号"  width="100" />
							<el-table-column align="left" label="员工姓名" prop="员工姓名"  width="100"/>
							<el-table-column align="left" label="性别" prop="性别" />
							<el-table-column align="left" label="聘用日期" prop="聘用日期" width="160" />
							<el-table-column align="left" label="转正日期" prop="转正日期" width="160" />
							<el-table-column align="left" label="所在部门" prop="所在部门" width="140"  />
							<el-table-column align="left" label="职称职务" prop="职称职务" width="300" />
							<el-table-column align="left" label="身份证号" prop="身份证号" width="170" />
							<el-table-column align="left" label="出生日期" prop="出生日期" width="160" />
							<el-table-column align="left" label="人员性质" prop="人员性质" width="120" />
							<el-table-column align="left" label="人员类别" prop="人员类别" width="100" />
							<el-table-column align="left" label="班次类型" prop="班次类型" width="120" />
							<el-table-column align="left" label="工资表类别" prop="工资表类别" width="160" />
							<el-table-column align="left" label="薪酬核算分组" prop="薪酬核算分组" width="120" />
							<el-table-column align="left" label="MES在职" prop="在职状态" width="100" />
							<el-table-column align="left" label="U8在职" prop="U8在职" width="100" />
							<el-table-column align="left" label="U8离职日期" prop="U8离职日期" width="160" />
							<el-table-column align="left" label="创建用户" prop="sys_id" width="160" />
							<el-table-column align="left" label="创建时间" prop="sys_rq" width="160" />
							<el-table-column align="left" label="修改时间" prop="mod_rq" width="160" />
							<el-table-column align="left" label="操作" min-width="120" fixed='right'>
								<template #default="scope">
									<el-button type="primary" link icon="edit" class="table-button"
										@click="updateCompanyFunc(scope.row)">编辑</el-button>
								</template>
							</el-table-column>
						</el-table>

						<!-- 分页 -->
						<div class="gva-pagination">
							<el-pagination layout="total, sizes, prev, pager, next, jumper" :current-page="page"
								:page-size="pageSize" :page-sizes="[5,10, 30, 50, 100]" :total="total"
								@current-change="handleCurrentChange" @size-change="handleSizeChange" />
						</div>
					</div>

					<!-- 弹窗 -->
					<el-dialog v-model="dialogFormVisible" :before-close="closeDialog"
						:title="type==='create'?'添加员工基本资料':'修改员工基本资料'" destroy-on-close>
						<el-row>
							<!-- 左侧表单 -->
							<el-col :span="8">
								<el-scrollbar height="500px">
									<el-form :model="formData" label-position="right" ref="elFormRef" :rules="rule"
										label-width="100px">
										<el-form-item label="员工编号:" prop="address">
											<el-input v-model="formData.address" :clearable="true" placeholder="请输入员工编号"
												style="width: 180px;" />
										</el-form-item>
										<el-form-item label="性别:" prop="gender">
											<el-input v-model="formData.gender" :clearable="true" placeholder="请输入性别"
												style="width: 180px;" />
										</el-form-item>
										<el-form-item label="身份证:" prop="idCard">
											<el-input v-model="formData.idCard" :clearable="true" placeholder="请输入身份证"
												style="width: 180px;" />
										</el-form-item>
										<el-form-item label="部门名称:" prop="department">
											<el-input v-model="formData.department" :clearable="true"
												placeholder="请输入部门名称" style="width: 180px;" />
										</el-form-item>
										<el-form-item label="入职日期:" prop="joinDate">
											<el-input v-model="formData.joinDate" :clearable="true"
												placeholder="请输入入职日期" style="width: 180px;" />
										</el-form-item>
										<el-form-item label="人员类别:" prop="joinDate">
											<el-select v-model="formData.joinDate" placeholder="请选择人员类别"
												style="width: 180px;">
												<el-option label="生产" value="生产"></el-option>
												<el-option label="行政" value="行政"></el-option>
											</el-select>
										</el-form-item>
										<el-form-item label="班次类型:" prop="joinDate">
											<el-input v-model="formData.joinDate" :clearable="true"
												placeholder="请输入班次类型" style="width: 180px;" />
										</el-form-item>
										<el-form-item label="工资表类别:" prop="joinDate">
											<el-select v-model="formData.joinDate" placeholder="请选择工资表类别"
												style="width: 180px;">
												<el-option label="职员级计时工资表" value="职员级计时工资表"></el-option>
												<el-option label="另发工资" value="另发工资"></el-option>
												<el-option label="操作级计件工资表" value="操作级计件工资表"></el-option>
												<el-option label="操作级计时工资表" value="操作级计时工资表"></el-option>
											</el-select>
										</el-form-item>
									</el-form>
								</el-scrollbar>
							</el-col>
							<!-- 中间表单 -->
							<el-col :span="8">
								<el-scrollbar height="500px">
									<el-form :model="formData" label-position="right" ref="elFormRef" :rules="rule"
										label-width="100px">
										<el-form-item label="姓名:" prop="name"
											:rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]">
											<el-input v-model="formData.name" :clearable="true" placeholder="请输入姓名"
												style="width: 180px;" />
										</el-form-item>
										<el-form-item label="出生日期:" prop="birthDate">
											<el-input v-model="formData.birthDate" :clearable="true"
												placeholder="请输入出生日期" style="width: 180px;" />
										</el-form-item>
										<el-form-item label="职务:" prop="position">
											<el-input v-model="formData.position" :clearable="true" placeholder="请输入职务"
												style="width: 180px;" />
										</el-form-item>
										<el-form-item label="部门编号:" prop="departmentId">
											<el-input v-model="formData.departmentId" :clearable="true"
												placeholder="请输入部门编号" style="width: 180px;" />
										</el-form-item>
										<el-form-item label="转正日期:" prop="departmentId">
											<el-input v-model="formData.departmentId" :clearable="true"
												placeholder="请输入转正日期" style="width: 180px;" />
										</el-form-item>
										<el-form-item label="扣减司龄:" prop="departmentId">
											<el-input v-model="formData.departmentId" :clearable="true"
												placeholder="请输入扣减司龄" style="width: 180px;" />
										</el-form-item>
										<el-form-item label="人员性质:" prop="departmentId">
											<el-select v-model="formData.joinDate" placeholder="请选择人员性质"
												style="width: 180px;">
												<el-option label="退休返聘" value="退休返聘"></el-option>
												<el-option label="劳动合同工" value="劳动合同工"></el-option>
												<el-option label="借用" value="借用"></el-option>
												<el-option label="劳务派遣" value="劳务派遣"></el-option>
												<el-option label="实习生" value="实习生"></el-option>
											</el-select>
										</el-form-item>
										<el-form-item label="工资核算分组:" prop="departmentId">
											<el-input v-model="formData.departmentId" :clearable="true"
												placeholder="请输入工资核算分组" style="width: 180px;" />
										</el-form-item>
									</el-form>
								</el-scrollbar>
							</el-col>

							<!-- 右侧图片 -->
							<div>
								<el-col :span="8">
                  <el-upload
                    action="/source/upload"
                    accept=".jpg,.jpeg,.png,.gif,.JPG,.JPEG"
                    :show-file-list="false"
                    :on-change="handleLicensePreview"
                    :before-upload="beforeLicenseUpload"
                    :auto-upload="false"
                    >
                      <img v-if="form.img" :src="form.img" class="preach-img">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
								</el-col>
							</div>

						</el-row>

						<!-- 添加 编辑页面 取消 确定 -->
						<template #footer>
							<div class="dialog-footer">
								<el-button @click="closeDialog">取 消</el-button>
								<el-button type="primary" @click="enterDialog">确 定</el-button>
							</div>
						</template>
					</el-dialog>

					<!-- 详情展示弹窗 -->
					<el-dialog v-model="detailShow" style="width: 1000px" lock-scroll :before-close="closeDetailShow"
						title="查看员工基本资料管理" destroy-on-close>
						<el-scrollbar height="550px">
							<el-descriptions column="2" border>
								<!-- 左侧部分 -->
								<el-descriptions-item label="员工编号" :min-width="labelMinWidth">
									{{ formData.employeeId }}
								</el-descriptions-item>
								<el-descriptions-item label="性别" :min-width="labelMinWidth">
									{{ formData.gender }}
								</el-descriptions-item>
								<el-descriptions-item label="身份证" :min-width="labelMinWidth">
									{{ formData.idCard }}
								</el-descriptions-item>
								<el-descriptions-item label="部分名称" :min-width="labelMinWidth">
									{{ formData.sectionName }}
								</el-descriptions-item>
								<el-descriptions-item label="入职日期" :min-width="labelMinWidth">
									{{ formData.employeeId }}
								</el-descriptions-item>
								<el-descriptions-item label="人员类别" :min-width="labelMinWidth">
									{{ formData.gender }}
								</el-descriptions-item>
								<el-descriptions-item label="班次类型" :min-width="labelMinWidth">
									{{ formData.idCard }}
								</el-descriptions-item>
								<el-descriptions-item label="工资表类别" :min-width="labelMinWidth">
									{{ formData.sectionName }}
								</el-descriptions-item>

								<!-- 右侧部分 -->
								<el-descriptions-item label="姓名" :min-width="labelMinWidth">
									{{ formData.name }}
								</el-descriptions-item>
								<el-descriptions-item label="出生日期" :min-width="labelMinWidth">
									{{ formData.birthdate }}
								</el-descriptions-item>
								<el-descriptions-item label="职务" :min-width="labelMinWidth">
									{{ formData.position }}
								</el-descriptions-item>
								<el-descriptions-item label="部门编号" :min-width="labelMinWidth">
									{{ formData.departmentId }}
								</el-descriptions-item>
								<el-descriptions-item label="转正日期" :min-width="labelMinWidth">
									{{ formData.name }}
								</el-descriptions-item>
								<el-descriptions-item label="扣减司龄" :min-width="labelMinWidth">
									{{ formData.birthdate }}
								</el-descriptions-item>
								<el-descriptions-item label="人员性质" :min-width="labelMinWidth">
									{{ formData.position }}
								</el-descriptions-item>
								<el-descriptions-item label="工资性质" :min-width="labelMinWidth">
									{{ formData.departmentId }}
								</el-descriptions-item>
							</el-descriptions>
						</el-scrollbar>
					</el-dialog>

				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script setup>
// 全量引入格式化工具 请按需保留
import {createCompany, deleteCompany, deleteCompanyByIds, updateCompany, findCompany, getCompanyList} from '@/api/company'
import {getDictFunc, formatDate, formatBoolean, filterDict, ReturnArrImg, onDownloadFile} from '@/utils/format'
import {ElMessage, ElMessageBox} from 'element-plus'
import {ref, reactive} from 'vue'
import {getDepartment,getStaffList} from '@/api/yunyin/yunying'
defineOptions({name: 'Company'})

// =========== 左侧树侧形结构 ===========
const treeData = ref({})
const defaultProps = {
  children: 'children',
  label: '名称' // 将label设置为中文名称对应的字段名
};
const getDepartmentdata = async () => {
  try {
    const data  = await getDepartment() //接口调用函数
    if(data.code === 0){
      treeData.value = data.data;
    }else {
      console.error(data.msg);
    }
  } catch (error) {
    console.error(error)
  }
}
getDepartmentdata();

//点击左侧树形获取列表
const tableData = reactive([])
const handleNodeClick = async (node) => {
  //通过 department_code 编号 获取列表数据
  const department_code = node.编号;
  try {
    const WorkListdata = await getStaffList({ department_code:department_code,limit: pageSize.value, page: page.value});//接口调用函数
    tableData.splice(0,tableData.length,...WorkListdata.data.list);//表格数据
    total.value = tableData.length;//共多少条
  } catch (error) {
    console.error(error);
  }
};

// 分页相关的响应式变量
const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
// 分页
const handleCurrentChange = (val) => {
  page.value = val;
  getDepartmentdata();
};

// 修改页面容量 点击多少条/页
const handleSizeChange = (val) => {
  page.value = 10;//默认显示十条
  pageSize.value = val;
  getDepartmentdata();
};


// 自动化生成的字典（可能为空）以及字段
const formData = ref({
  address: '',
  image: '',
  name: '',
})

// 验证规则
const rule = reactive({})
const searchRule = reactive({
  createdAt: [{
    validator: (rule, value, callback) => {
      if (searchInfo.value.startCreatedAt && !searchInfo.value.endCreatedAt) {
        callback(new Error('请填写结束日期'))
      } else if (!searchInfo.value.startCreatedAt && searchInfo.value.endCreatedAt) {
        callback(new Error('请填写开始日期'))
      } else if (searchInfo.value.startCreatedAt && searchInfo.value.endCreatedAt && (
          searchInfo.value.startCreatedAt.getTime() === searchInfo.value.endCreatedAt
          .getTime() || searchInfo.value.startCreatedAt.getTime() > searchInfo.value
          .endCreatedAt.getTime())) {
        callback(new Error('开始日期应当早于结束日期'))
      } else {
        callback()
      }
    },
    trigger: 'change'
  }],
})
const elFormRef = ref()
const elSearchFormRef = ref()

const searchInfo = ref({})

// 重置
const onReset = () => {
  searchInfo.value = {}
  getTableData()
}

// 搜索
const onSubmit = () => {
  elSearchFormRef.value?.validate(async (valid) => {
    console.log(valid)
    // if (!valid) return
    // page.value = 1
    // pageSize.value = 10
    // getTableData()
  })
}




// 查询
const getTableData = async () => {
  const table = await getCompanyList({
    page: page.value,
    pageSize: pageSize.value,
    ...searchInfo.value
  })
  if (table.code === 0) {
    tableData.value = table.data.list
    total.value = table.data.total
    page.value = table.data.page
    pageSize.value = table.data.pageSize
  }
}
getTableData()

// ============== 表格控制部分结束 ===============

// 获取需要的字典 可能为空 按需保留
const setOptions = async () => {}

// 获取需要的字典 可能为空 按需保留
setOptions()

// 多选数据
const multipleSelection = ref([])
// 多选
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

// 删除行
const deleteRow = (row) => {
  ElMessageBox.confirm('确定要删除吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteCompanyFunc(row)
  })
}

// 批量删除控制标记
const deleteVisible = ref(false)

// 多选删除
const onDelete = async () => {
  const ids = []
  if (multipleSelection.value.length === 0) {
    ElMessage({
      type: 'warning',
      message: '请选择要删除的数据'
    })
    return
  }
  multipleSelection.value &&
    multipleSelection.value.map(item => {
      ids.push(item.ID)
    })
  const res = await deleteCompanyByIds({
    ids
  })
  if (res.code === 0) {
    ElMessage({
      type: 'success',
      message: '删除成功'
    })
    if (tableData.value.length === ids.length && page.value > 1) {
      page.value--
    }
    deleteVisible.value = false
    getTableData()
  }
}

// 行为控制标记（弹窗内部需要增还是改）
const type = ref('')

// 更新行
const updateCompanyFunc = async (row) => {
  // const res = await findCompany({ ID: row.ID })
  // type.value = 'update'
  // if (res.code === 0) {
  //     formData.value = res.data.recompany
  //     dialogFormVisible.value = true
  // }
  dialogFormVisible.value = true
}

// 删除行
const deleteCompanyFunc = async (row) => {
  const res = await deleteCompany({
    ID: row.ID
  })
  if (res.code === 0) {
    ElMessage({
      type: 'success',
      message: '删除成功'
    })
    if (tableData.value.length === 1 && page.value > 1) {
      page.value--
    }
    getTableData()
  }
}

// 弹窗控制标记
const dialogFormVisible = ref(false)

// 查看详情控制标记
const detailShow = ref(false)

// 打开详情弹窗
const openDetailShow = () => {
  detailShow.value = true
}

// 打开详情
const getDetails = async (row) => {
  // 打开弹窗
  // const res = await findCompany({ ID: row.ID })
  // if (res.code === 0) {
  //   formData.value = res.data.recompany
  //   openDetailShow()
  // }
  detailShow.value = true

}

// 关闭详情弹窗
const closeDetailShow = () => {
  detailShow.value = false
  formData.value = {
    address: '',
    image: '',
    name: '',
  }
}

// 打开弹窗
const openDialog = () => {
  type.value = 'create'
  dialogFormVisible.value = true
}

// 关闭弹窗
const closeDialog = () => {
  dialogFormVisible.value = false
  formData.value = {
    address: '',
    image: '',
    name: '',
  }
}
// 弹窗确定
const enterDialog = async () => {
  elFormRef.value?.validate(async (valid) => {
    if (!valid) return
    let res
    switch (type.value) {
      case 'create':
        res = await createCompany(formData.value)
        break
      case 'update':
        res = await updateCompany(formData.value)
        break
      default:
        res = await createCompany(formData.value)
        break
    }
    if (res.code === 0) {
      ElMessage({
        type: 'success',
        message: '创建/更改成功'
      })
      closeDialog()
      getTableData()
    }
  })
}
</script>

<style>
	.JKWTree-container {
		display: flex;
	}
	.JKWTree-tree {
		width: 300px;
		background-color: #fff;
		padding: 10px;
		margin-right: 20px;
	}
	.JKWTree-tree h3 {
		font-size: 15px;
		font-weight: 700;
		margin: 10px 0;
	}
	.JKWTree-content {
		flex: 1;
	}
	/* 图片上传 */
	.upload-box {
		width: 200px;
		height: 200px;
		border: 2px dashed #e2e2e2;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		cursor: pointer;
	}
	.uploaded-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.upload-icon {
		font-size: 40px;
		color: #c0c4cc;
	}
	.file-input {
		display: none;
	}
</style>