<template>
  <div style="margin: 0 auto">
    <el-container>
      <!-- 左侧树形结构 -->
      <el-aside width="210px" >
        <div class="JKWTree-tree" style="height: 746px">
          <h3>组织架构</h3>
          <el-tree :data="treeData"  :props="defaultProps" @node-click="handleNodeClick" @node-expand="handleNodeExpand">
            <template #default="{node,data}">
              {{data['名称']}}<{{data['num']}}人>
            </template>
          </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: 200px;" @input="onSubmit"></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-button type="primary" icon="plus" @click="openDialog">新增</el-button>
                <el-button type="primary" icon="Download" @click="exportToExcel" style="float: right;">导出到Excel</el-button>
                <el-dialog v-model="dialogexportToExcel" title="员工基本资料导出" width="50%">

                </el-dialog>
              </el-form-item>
            </el-form>
          </div>

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

            <!-- 导出字段选择对话框 -->
            <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: 580px"
                      tooltip-effect="dark"
                      :data="tableData"
                      border
                      row-key="ID"
                      highlight-current-row="true"
                      @row-dblclick="updateCompanyFunc"
                      @row-click="tableRowClick"
                      @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>
            <!-- 分页 -->
            <div class="gva-pagination">
              <el-pagination layout="total, sizes, prev, pager, next, jumper" :current-page="page"
                             :page-size="pageSize" :page-sizes="[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="formDataTest" label-position="right" ref="elFormRef" :rules="rule" label-width="100px">
                    <el-form-item label="员工编号:" prop="address">
                      <el-input v-model="formDataTest['员工编号']" :clearable="true" placeholder="请输入员工编号" style="width: 180px;" />
                    </el-form-item>
                    <el-form-item label="性别:" prop="gender">
                      <el-input v-model="formDataTest['性别']" :clearable="true" placeholder="请输入性别" style="width: 180px;" />
                    </el-form-item>
                    <el-form-item label="身份证号:" prop="idCard">
                      <el-input v-model="formDataTest['身份证号']" :clearable="true" placeholder="请输入身份证" style="width: 180px;" />
                    </el-form-item>
                    <el-form-item label="部门名称:" prop="department">
                      <el-input v-model="formDataTest['所在部门']" :clearable="true" placeholder="请输入部门名称" style="width: 180px;" />
                    </el-form-item>
                    <el-form-item label="入职日期:" prop="joinDate">
                      <el-input v-model="formDataTest['聘用日期']" :clearable="true" placeholder="请输入入职日期" style="width: 180px;" />
                    </el-form-item>
                    <el-form-item label="人员类别:" prop="joinDate">
                      <el-select v-model="formDataTest['人员类别']" 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="formDataTest['班次类型']" :clearable="true" placeholder="请输入班次类型" style="width: 180px;" />
                    </el-form-item>
                    <el-form-item label="工资表类别:" prop="joinDate">
                      <el-select v-model="formDataTest['工资表类别']" 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="formDataTest" label-position="right" ref="elFormRef" :rules="rule" label-width="100px">
                    <el-form-item label="员工姓名:" prop="name">
                      <el-input v-model="formDataTest['员工姓名']" :clearable="true" placeholder="请输入姓名" style="width: 180px;" />
                    </el-form-item>
                    <el-form-item label="出生日期:" prop="birthDate">
                      <el-input v-model="formDataTest['出生日期']" :clearable="true" placeholder="" style="width: 180px;" />
                    </el-form-item>
                    <el-form-item label="职务:" prop="position">
                      <el-input v-model="formDataTest['职称职务']" :clearable="true" placeholder="请输入职务" style="width: 180px;" />
                    </el-form-item>
                    <!--										<el-form-item label="部门编号:" prop="departmentId">-->
                    <!--											<el-input v-model="formDataTest['部门编号']" :clearable="true" placeholder="请输入部门编号" style="width: 180px;" />-->
                    <!--										</el-form-item>-->
                    <el-form-item label="转正日期:" prop="departmentId">
                      <el-input v-model="formDataTest['转正日期']" :clearable="true" placeholder="请输入转正日期" style="width: 180px;" />
                    </el-form-item>
                    <el-form-item label="扣减司龄:" prop="departmentId">
                      <el-input v-model="formDataTest['扣减司龄']" :clearable="true" placeholder="" style="width: 180px;" />
                    </el-form-item>
                    <el-form-item label="人员性质:" prop="departmentId">
                      <el-select v-model="formDataTest['人员性质']" 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="U8状态:" prop="joinDate">
                      <el-input v-model="formDataTest['U8在职']" :clearable="true"  placeholder="" style="width: 180px;" />
                    </el-form-item>
                    <el-form-item label="在职状态:" prop="joinDate">
                      <el-input v-model="formDataTest['在职状态']" :clearable="true" placeholder="" style="width: 180px;" />
                    </el-form-item>
                  </el-form>
                </el-scrollbar>
              </el-col>
              <!-- 右侧图片 -->
            </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-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 {getCustom, getDepartment, getProductData, getStaffList, ygjbzledit} from '@/api/yunyin/yunying'
defineOptions({name: 'Company'})
// =========== 导出Excel表格 ===========
const exportToExcel = () => {
  console.log('点击了导出按钮')
  dialogexportToExcel.value = true;
}
// 导出Excel弹窗
const dialogexportToExcel = ref(false)

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

//点击左侧树形 获取右侧table列表
const tableData = reactive([])
const handleNodeClick = async (node) => {
  _department_code.value = node['编号'];
  _getStaffList()
};
// 点击管理中心 显示全部数据
const handleNodeExpand = async (node) => {
  // console.log(node)
  _department_code.value = node['编号'];
  _getStaffList()

}

//封装的方法
const _getStaffList = async ()=>{
  let params = {}
  params.department_code = _department_code.value;
  params.search = _searchValue.value;
  params.limit = pageSize.value;
  params.page = page.value;
  params.mes_online = 1;
  params.u8_online = 1;
  // console.log(params)
  try {
    const WorkListdata = await getStaffList(params);//接口调用函数
    // console.log(WorkListdata)
    tableData.splice(0,tableData.length,...WorkListdata.data.list);//表格数据
    total.value = WorkListdata.data.total;//共多少条total
  } catch (error) {
    console.error(error);
  }
}

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

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

const _searchValue = ref(null)
// 搜索
const onSubmit = () => {
  // const searchValue = searchInfo._rawValue.ke; // 获取搜索框输入的值
  _searchValue.value = searchInfo._rawValue.ke;
  // console.log(_searchValue);
  _getStaffList()
};

// 查询
const getTableData = async () => {
  // console.log(table)
}
getTableData()

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

// 验证规则
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 type = ref('')

//修改
const updateCompanyFunc = async (row) => {
  const product_code = row.员工编号;
  formDataTest = row;
  console.log(row);
  // const response = await ygjbzledit({ product_code: product_code });
  // console.log(response);
  dialogFormVisible.value = true;
};
// 弹窗控制标记
const dialogFormVisible = ref(false)

// 打开弹窗
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;
}
.el-table .warning-row {
  background: oldlace;
}

/* 选中某行时的背景色*/
.el-table__body tr.current-row>td {
  background: #ff80ff !important;
}
</style>