<template>
  <div class="safety-platform-container">
    <header class="safety-platform-container__header">
      <div class="breadcrumb-title">劳防用品领用管理</div>
    </header>
    <main class="safety-platform-container__main">
      <div class="search-form">
        <el-form :inline="true">
          <el-form-item label="标题">
            <el-input
              v-model="queryParams.queryParam.name"
              placeholder="请输入标题"
              clearable
              style="width: 170px"
            />
          </el-form-item>
          <el-form-item label="状态">
            <el-select
              v-model="queryParams.queryParam.status"
              placeholder="请选择状态"
              clearable
              style="width: 170px"
            >
              <el-option label="启用" :value="1" />
              <el-option label="禁用" :value="0" />
            </el-select>
          </el-form-item>
        </el-form>
        <div>
          <el-button
            type="primary"
            @click="$router.push({ name: 'laborProductsRequisitionManageAdd' })"
          >
            添加
          </el-button>
          <el-button type="primary" @click="queryTableList">查询</el-button>
          <el-button @click="handleRestParams">重置</el-button>
        </div>
      </div>

      <div class="table-content">
        <el-table v-loading="loading" :data="tableData.data">
          <el-table-column label="职业危害因素" prop="hazardFactor" min-width="120" show-overflow-tooltip />
          <el-table-column label="防护用品名称" prop="ppeName" min-width="120" />
          <el-table-column label="型号" prop="version" min-width="100" />
          <el-table-column label="领用数量" prop="receiveNum" width="120" align="center" />
          <el-table-column label="发放人" prop="issuerName" width="100" />
          <el-table-column label="发放时间" prop="issueTime" width="170" />
          <el-table-column label="领用人" prop="receiverName" width="100" />
          <el-table-column label="用品状态" width="120">
            <template #default="{ row }">
              {{
                row.status === 1 ||
                row.status === '1'
                  ? '启用'
                  : row.status === 0 || row.status === '0'
                    ? '禁用'
                    : '-'
              }}
            </template>
          </el-table-column>
          <el-table-column label="领用备注" prop="remark" min-width="120" show-overflow-tooltip />
          <el-table-column fixed="right" label="操作" width="260">
            <template #default="scope">
              <el-button
                type="primary"
                link
                @click="$router.push({ name: 'laborProductsRequisitionManageView', query: { id: scope.row.id } })"
              >
                查看
              </el-button>
              <el-button
                type="primary"
                link
                @click="$router.push({ name: 'laborProductsRequisitionManageEdit', query: { id: scope.row.id } })"
              >
                编辑
              </el-button>
              <el-button type="primary" link @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-container" v-if="tableData.total > 0">
        <el-pagination
          background
          :current-page="queryParams.pageNumber"
          :page-size="queryParams.pageSize"
          :total="tableData.total"
          :page-sizes="[10, 20, 50]"
          layout="total, sizes, prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </main>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, reactive, ref } from 'vue';
  import { ElMessage, ElMessageBox } from 'element-plus';
  import {
    queryPersonalProtectiveEquipmentReceiveList,
    deletePersonalProtectiveEquipmentReceive,
    type QueryPersonalProtectiveEquipmentReceivePageReq,
    type PersonalProtectiveEquipmentReceive,
  } from '@/api/production-safety/personal-protective-equipment-receive';
  import type { QueryPageRequest } from '@/types/basic-query';

  const loading = ref(false);
  const queryParams = reactive<
    QueryPageRequest<QueryPersonalProtectiveEquipmentReceivePageReq>
  >({
    pageNumber: 1,
    pageSize: 10,
    queryParam: {
      name: '',
      status: undefined as number | undefined,
    },
  });

  const tableData = reactive<{
    data: PersonalProtectiveEquipmentReceive[];
    total: number;
  }>({
    data: [],
    total: 0,
  });

  const handleSizeChange = (value: number) => {
    queryParams.pageSize = value;
    queryParams.pageNumber = 1;
    queryTableList();
  };

  const handleCurrentChange = (value: number) => {
    queryParams.pageNumber = value;
    queryTableList();
  };

  const queryTableList = () => {
    loading.value = true;
    queryPersonalProtectiveEquipmentReceiveList(queryParams)
      .then((res: any) => {
        tableData.data = (res?.records ?? res?.list ?? []) as PersonalProtectiveEquipmentReceive[];
        tableData.total = res?.totalRow ?? res?.total ?? 0;
      })
      .finally(() => {
        loading.value = false;
      });
  };

  const handleDelete = (row: PersonalProtectiveEquipmentReceive) => {
    if (row.id == null) return;
    ElMessageBox.confirm('确定要删除该领用记录吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
      .then(() => deletePersonalProtectiveEquipmentReceive(row.id!))
      .then(() => {
        ElMessage.success('删除成功');
        queryTableList();
      })
      .catch(() => {});
  };

  const handleRestParams = () => {
    queryParams.pageNumber = 1;
    queryParams.pageSize = 10;
    queryParams.queryParam = { name: '', status: undefined };
    queryTableList();
  };

  onMounted(() => {
    queryTableList();
  });
</script>

<style lang="scss" scoped>
  @use '@/styles/page-details-layout.scss' as *;
  @use '@/styles/page-main-layout.scss' as *;
  @use '@/styles/basic-table-action.scss' as *;

  :deep(.el-form) {
    flex: 1;
    display: flex;
    row-gap: 15px;
    flex-wrap: wrap;
  }
  :deep(.el-form-item) {
    margin-bottom: 0;
  }
  :deep(main) {
    display: flex;
    flex-direction: column;
  }
  .search-form {
    min-width: 600px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
  }
  .table-content {
    flex: 1;
    overflow: hidden;
    overflow-y: auto;
  }
  .pagination-container {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
  }
</style>
