<!--
 * @Author: liuJie
 * @Date: 2026-02-13 16:04:29
 * @LastEditors: liuJie
 * @LastEditTime: 2026-03-19 10:32:45
 * @Describe: file describe
-->
<script setup lang="ts">
  import { onMounted, ref, watch, reactive } from 'vue';
  import { ElDialog, ElPopconfirm } from 'element-plus';
  import { EDIT_EMPLOYEE_FORM_RULES } from '../configs/form';
  import {
    getEmployeeDetailTableList,
    type EmployeeTableType,
    updateEducationStaffTrainingCardScore,
    delateEducationStaffTrainingCardScore,
  } from '@/api/employee-training-record-card-management';
  const props = defineProps({
    index: {
      type: Number,
      default: 1,
    },
    id: {
      type: Number,
      default: 0,
    },
  });
  const rules = ref(EDIT_EMPLOYEE_FORM_RULES);
  const tabName = ref('');

  const pagination = reactive({
    pageNumber: 1,
    pageSize: 10,
    total: 0,
  });
  // 日期范围
  const dateRange = ref<[string, string] | null>(null);

  const tableQuery = reactive({
    pageNumber: pagination.pageNumber,
    pageSize: pagination.pageSize,
    queryParam: {
      logType: props.index,
      pestcId: props.id,
      keyWord: '',
      dateStart: '',
      dateEnd: '',
    },
  });
  const handleSizeChange = (value: number) => {
    pagination.pageSize = value;
    tableQuery.pageSize = value;
    getActionTableList();
  };

  const handleCurrentChange = (value: number) => {
    pagination.pageNumber = value;
    tableQuery.pageNumber = value;
    getActionTableList();
  };
  // 格式化时间
  const formatDate = (date) => {
    if (!date) return '';
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`; // 输出：2026-02-11
  };

  let tableData = ref<any[]>([]);
  const getActionTableList = async () => {
    tableQuery.queryParam.dateStart = dateRange.value ? formatDate(dateRange.value[0]) : '';
    tableQuery.queryParam.dateEnd = dateRange.value ? formatDate(dateRange.value[1]) : '';
    try {
      const res = await getEmployeeDetailTableList(tableQuery);
      if (res) {
        tableData.value = res.records;
        pagination.total = res.totalRow;
      }
    } catch (e) {
      tableData.value = [];
      pagination.total = 0;
    }
  };

  watch(
    () => props.index,
    (val) => {
      if (val === 1 || val === 2) {
        tableQuery.queryParam.logType = val;
        getActionTableList();
      }
    },
    { immediate: true, deep: true },
  );

  const ediDialogVisible = ref(false);
  const formData = reactive({
    id: 0,
    scoreMust: 0,
  });
  const editHandle = (row) => {
    Object.assign(formData, {
      id: row.id || '',
      scoreMust: row.scoreMust,
    });
    ediDialogVisible.value = true;
  };
  const deleteHandle = (id) => {
    try {
      delateEducationStaffTrainingCardScore(id);
      getActionTableList();
    } catch (e) {
      console.error('删除失败', e);
    }
  };

  const cancelHandle = () => {
    ediDialogVisible.value = false;
  };
  const confirmHandle = async () => {
    ediDialogVisible.value = false;
    formData.scoreMust = Number(formData.scoreMust);
    try {
      await updateEducationStaffTrainingCardScore(formData);
      getActionTableList();
    } catch (e) {
      console.error('保存失败', e);
    }
  };
  const handleSearch = () => {
    pagination.pageNumber = 1;
    tableQuery.pageNumber = 1;
    getActionTableList();
  };

  const handleReset = () => {
    tableQuery.queryParam.keyWord = '';
    tableQuery.queryParam.dateStart = '';
    tableQuery.queryParam.dateEnd = '';
    dateRange.value = null;
    tableQuery.pageNumber = 1;
    handleSearch();
  };
</script>
<template>
  <div>
    <!-- 查询区 -->
    <el-form :inline="true" class="mb-12">
      <el-form-item>
        <el-date-picker type="daterange" start-placeholder="开始时间" end-placeholder="结束时间" v-model="dateRange" />
      </el-form-item>
      <el-form-item>
        <el-input placeholder="搜索关键词" v-model="tableQuery.queryParam.keyWord" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button type="default" @click="handleReset">重置</el-button>
        <!-- <el-button type="primary">导出</el-button>
                <el-button type="danger">删除</el-button> -->
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table border stripe :data="tableData">
      <el-table-column type="selection" width="50" />
      <el-table-column label="编号" type="index" width="80" />
      <el-table-column label="日期" prop="logDate" width="200" />
      <el-table-column label="教育内容" prop="educationContent" width="280" />
      <el-table-column label="学时" prop="creditHour">
        <template #default="scope">
          <span>{{ scope.row.creditHour }}时</span>
        </template>
      </el-table-column>
      <el-table-column label="成绩" prop="scoreMust">
        <template #default="scope">
          <span>{{ scope.row.scoreMust }}分</span>
        </template>
      </el-table-column>
      <el-table-column label="受教育者签字" prop="educationSign" width="220">
        <template #default="scope">
            <img :src="scope.row.educationSign" style="width:100%" v-if="scope.row.educationSign" alt="">
        </template>
      </el-table-column>
      <el-table-column label="操作" width="220">
        <template #default="scope">
          <el-button link type="primary" @click="editHandle(scope.row)">编辑</el-button>
          <el-popconfirm title="确定要删除该条记录吗？" placement="top" @confirm="deleteHandle(scope.row.id)">
            <template #reference>
              <el-button link type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        layout="total, prev, pager, next"
        :total="pagination.total"
        :page-size="pagination.pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 编辑 -->
    <el-dialog v-model="ediDialogVisible" title="编辑内容" width="500px">
      <el-form :rules="rules" :model="formData" label-width="120px">
        <el-form-item label="成绩分数：" required prop="scoreMust">
          <el-input v-model="formData.scoreMust" placeholder="输入成绩分数，单位分，0-200" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="cancelHandle">取 消</el-button>
        <el-button type="primary" @click="confirmHandle">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
  .mb-12 {
    margin-bottom: 12px;
  }

  .pagination {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
  }
</style>
