<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"  class="demo-form-inline" :rules="searchRule" @keyup.enter="onSubmit">
              <el-form-item>
                <el-input v-model="searchInfo" placeholder="搜索员工编号或员工姓名" clearable style="width: 200px;margin: 5px"></el-input>
                <el-button type="primary" icon="search" @click="onSubmit" style="margin: 5px">查询</el-button>
                <el-button disabled type="primary" icon="Download" @click="exportToExcel" style="margin: 5px;float: right;">导出到Excel</el-button>
                <el-dialog v-model="dialogexportToExcel" disabled title="员工基本资料导出" width="50%">
                </el-dialog>
              </el-form-item>
            </el-form>
          </div>

          <div class="gva-table-box">
            <!-- 表格数据 -->
            <el-table ref="multipleTable" style="width: 100%;height: 580px" tooltip-effect="dark"
                      :row-style="{ height: '20px' }"  :header-cell-style="{ padding: '0px' }"
                      :cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
                      :data="tableData"  border row-key="ID"
                      highlight-current-row="true" @row-dblclick="updateCompanyFunc"
                      @row-click="tableRowClick" :show-overflow-tooltip="true"
                      @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" width="900px" style="height: 600px;" :title="'修改员工基本资料'" destroy-on-close>
            <el-form :model="formDataTest" label-position="right" ref="elFormRef" :rules="rule" label-width="100px">
              <div>
                <div style="float: left; width: 34%;">
                  <!-- 左侧部分 -->
                  <el-form-item label="员工编号：" prop="employeeId">
                    <el-input v-model="formDataTest['员工编号']"  placeholder="" style="width: 190px;" />
                  </el-form-item>
                  <el-form-item label="性别：" prop="gender">
                    <el-input v-model="formDataTest['性别']"  placeholder="" style="width: 190px;" />
                  </el-form-item>
                  <el-form-item label="身份证号：" prop="gender">
                    <el-input v-model="formDataTest['身份证号']"  placeholder="" style="width: 200px;" />
                  </el-form-item>
                  <el-form-item label="部门名称：" prop="gender">
                    <el-input v-model="formDataTest['所在部门']"  placeholder="" style="width: 190px;" />
                  </el-form-item>
                  <el-form-item label="入职日期:" prop="joinDate">
                    <el-input v-model="formDataTest['聘用日期']"  placeholder="" style="width: 190px;" />
                  </el-form-item>
                  <el-form-item label="人员类别:" prop="joinDate">
                    <el-select v-model="formDataTest['人员类别']" placeholder="" style="width: 190px;">
                      <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['班次类型']"  placeholder="" style="width: 190px;" />
                  </el-form-item>
                  <el-form-item label="工资表类别:" prop="joinDate">
                    <el-select v-model="formDataTest['工资表类别']" placeholder="" style="width: 190px;">
                      <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在职']"   placeholder="" style="width: 190px;" />
                  </el-form-item>
                </div>
                <div style="float: left; width: 33%;margin-left: 50px">
                  <!-- 中间部分 -->
                  <el-form-item label="员工姓名:" prop="name">
                    <el-input v-model="formDataTest['员工姓名']"  placeholder="" style="width: 190px;" />
                  </el-form-item>
                  <el-form-item label="出生日期:" prop="birthDate">
                    <el-input v-model="formDataTest['出生日期']"  placeholder="" style="width: 190px;" />
                  </el-form-item>
                  <el-form-item label="职务:" prop="position">
                    <el-input v-model="formDataTest['职称职务']" placeholder="" style="width: 190px;" />
                  </el-form-item>
                  <el-form-item label="部门编号:" prop="position">
                    <el-input v-model="formDataTest['部门编码']" placeholder="" style="width: 190px;" />
                  </el-form-item>
                  <el-form-item label="转正日期:" prop="departmentId">
                    <el-input v-model="formDataTest['转正日期']" placeholder="" style="width: 190px;" />
                  </el-form-item>
                  <el-form-item label="扣减司龄:" prop="departmentId">
                    <el-input v-model="formDataTest['扣减司龄']" placeholder="" style="width: 190px;" />
                  </el-form-item>
                  <el-form-item label="人员性质:" prop="departmentId">
                    <el-select v-model="formDataTest['人员性质']" placeholder="" style="width: 190px;">
                      <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="joinDate">
                    <el-input v-model="formDataTest['薪酬核算分组']"  placeholder="" style="width: 190px;" />
                  </el-form-item>
                  <el-form-item label="在职状态:" prop="joinDate">
                    <el-input v-model="formDataTest['在职状态']" placeholder="" style="width: 190px;" />
                  </el-form-item>
                </div>

<!--                <div style="float: left; text-align: center; margin-left: 50px;">-->
<!--                  &lt;!&ndash; 右侧图片 &ndash;&gt;-->
<!--                  <div style="height: 200px; width: 160px; background-color: #eee; position: relative;">-->
<!--                    &lt;!&ndash; 上传按钮 &ndash;&gt;-->
<!--                    <input type="file" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;"-->
<!--                           @change="handleFileUpload">-->
<!--                    &lt;!&ndash; 显示上传的图片 &ndash;&gt;-->
<!--                    <img v-if="formDataTest.imageUrl" :src="formDataTest.imageUrl" alt="Uploaded Image" style="max-width: 100%; max-height: 100%;">-->
<!--                  </div>-->
<!--                </div>-->

              </div>
            </el-form>
            <!-- 添加编辑页面取消确定按钮 -->
<!--            <template #footer>-->
              <div  style="text-align: right; position: absolute; bottom: 20px; right: 20px; width: 90%;">
                <el-button @click="closeDialog">取消</el-button>
                <el-button type="primary" disabled @click="enterDialog">确定</el-button>
              </div>
<!--            </template>-->
          </el-dialog>


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

<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      formDataTest: {
        imageUrl: '' // 添加一个字段来保存上传的图片路径
      },
      rule: {} // 初始化rule对象
    };
  },
  methods: {
    closeDialog() {
      // 关闭对话框的逻辑
      this.dialogFormVisible = false;
    },
    enterDialog() {
      // 确定按钮的逻辑
      // 在这里可以执行提交表单的逻辑
    },
    handleFileUpload(event) {
      // 处理文件上传逻辑
      const file = event.target.files[0];
      console.log(file)
      // 模拟上传并保存文件路径
      // 在实际应用中，您需要将文件上传到服务器并保存路径
      this.formDataTest.imageUrl = URL.createObjectURL(file);
      // 手动触发Vue的更新
      this.$forceUpdate();
    }
  }
};
</script>

<script setup>
// 全量引入格式化工具 请按需保留
import {ref, reactive} from 'vue'
import {getCustom, getDepartment, getProductData, getStaffList, ygjbzledit} from '@/api/yunyin/yunying'
import {ElMessage} from "element-plus";
defineOptions({name: 'Company'})
// =========== 导出Excel表格 ===========
const exportToExcel = () => {
  console.log('点击了导出按钮')
  dialogexportToExcel.value = true;
}
// 导出Excel弹窗
const dialogexportToExcel = ref(false)

// =========== 获取左侧树侧形结构 ===========
const treeData = ref({})
const _department_code = ref(null)
const getDepartmentdata = async () => {
  try {
    const data  = await getDepartment();
    treeData.value = data.data;
  } catch (error) {
    console.error(error)
  }
}
getDepartmentdata();

//点击左侧树形 获取右侧table列表
const tableData = reactive([]);
const handleNodeClick = async (node) => {
  _department_code.value = node['编号'];
  searchInfo.value = '';
  _getStaffList()
};

//点击管理中心 显示部门的全部数据
const handleNodeExpand = async (node) => {
  _department_code.value = node['编号'];
  searchInfo.value = '';
  _getStaffList()
}

// 搜索
const searchInfo = ref('')
//点击【查询】按钮
const onSubmit = () => {
  _department_code.value = '';
  _getStaffList();
};

//获取员工信息列表
const _getStaffList = async ()=>{
  let params = {}
  params.search = searchInfo.value;
  params.department_code = _department_code.value;
  params.mes_online = 1;
  params.u8_online = 1;
  params.limit = 100;
  params.page = 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;
  } 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 dialogFormVisible = ref(false)
//修改
let formDataTest = reactive({})
const updateCompanyFunc = async (row) => {
  Object.assign(formDataTest,row);
  // formDataTest['部门编号'] = _department_code.value;
  // 判断是否为 undefined，建议使用 typeof
  if (typeof formDataTest['扣减司龄'] === "undefined") {
    formDataTest['扣减司龄'] = "0";
  }
  dialogFormVisible.value = true;
};

// 修改关闭弹窗
const closeDialog = () => {dialogFormVisible.value = false}

// 弹窗确定
const enterDialog = async () => {
  _ygjbzledit();
}
//修改员工资料
const _ygjbzledit = async ()=>{
  const formattedData = {
    '员工编号': formDataTest['员工编号'],
    '员工姓名': formDataTest['员工姓名'],
    '性别': formDataTest['性别'],
    '出生日期': formDataTest['出生日期'],
    '身份证': formDataTest['身份证号'],
    '职称职务': formDataTest['职称职务'],
    '所在部门': formDataTest['所在部门'],
    '部门编号': formDataTest['部门编号'],
    '入职日期': formDataTest['聘用日期'],
    '转正日期': formDataTest['转正日期'],
    '扣减司龄': formDataTest['扣减司龄'],
    '人员类别': formDataTest['人员类别'],
    '人员性质': formDataTest['人员性质'],
    '班次类型': formDataTest['班次类型'],
    '工资核算分组': formDataTest['薪酬核算分组'],
    '工资表类别': formDataTest['工资表类别'],
    'U8在职': formDataTest['U8在职'],
    '在职状态': formDataTest['在职状态'],
  };
  console.log(formattedData);
  try {
    // const ygjbzleditdata = await ygjbzledit(formattedData);
    // console.log(ygjbzleditdata);
    // if (ygjbzleditdata.code === 0) {
    //   ElMessage({type: 'success',message: '更新成功'})
    // } else {
    //   ElMessage({ type: 'error',message: '更新失败'})
    // }
  } catch (error) {
    console.error(error);
  }
}

</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>