<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-table-container">
        <header>
          <div style="position: relative">
            <el-button type="primary" :icon="Plus" class="search-table-container--button" @click="handleCreate">
              新增
            </el-button>
            <!-- <el-button plain class="search-table-container--button" @click="handleImport">
              导入
            </el-button>
            <el-button plain class="search-table-container--button" @click="handleDownload">
              导出
            </el-button> -->
          </div>

          <div class="act-search">
            <section class="select-box">
              <div class="select-box--item">
                <span>文件名称：</span>
                <el-input v-model="queryParams.keyword" placeholder="搜索文件名称" class="act-search-input" />
              </div>
              <div class="select-box--item">
                <span>状态：</span>
                <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
                  <el-option label="启用" :value="1" />
                  <el-option label="禁用" :value="0" />
                </el-select>
              </div>
              <div class="select-box--item">
                <span>分类：</span>
                <el-select v-model="queryParams.classifyName" placeholder="请选择分类" clearable>
                  <el-option label="外部院级文件" value="外部院级文件" />
                  <el-option label="内部院级文件" value="内部院级文件" />
                </el-select>
              </div>
              <div class="select-box--item">
                <span>上传日期范围：</span>
                <el-date-picker v-model="uploadDateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
                  end-placeholder="结束日期" value-format="YYYY-MM-DD" format="YYYY-MM-DD" />
              </div>
            </section>
            <section class="search-btn">
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <el-button @click="handleReset">重置</el-button>
            </section>
          </div>
        </header>

        <div class="batch-table">
          <BasicTable ref="basicTableRef" :tableData="tableData" :tableConfig="tableConfig"
            @update:pageSize="handleSizeChange" @update:pageNumber="handleCurrentChange">
            <template #status="scope">
              <span>
                {{ scope.row.status === 1 ? '启用' : scope.row.status === 0 ? '禁用' : '-' }}
              </span>
            </template>
            <template #action="scope">
              <div class="action-container--div" style="justify-content: left">
                <ActionButton text="编辑" @click="handleEdit(scope.row.id)" />
                <ActionButton text="删除" :popconfirm="{
                  title: '确定要删除?',
                }" @confirm="handleDelete(scope.row.id)" />
                <ActionButton text="查看" @click="handleView(scope.row.id)" />
                <ActionButton text="下载" @click="handleDownloadFile(scope.row)" />
              </div>
            </template>
          </BasicTable>
        </div>
      </div>
    </main>
    <BatchImport v-if="batchImportVisible" :visible="batchImportVisible" :import-api-url="importApiUrl"
      :template-url="templateUrl" template-name="下载模板" :show-template="false" @close="batchImportVisible = false"
      @update="handleUpdate" />
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { Plus } from '@element-plus/icons-vue';
import BasicTable from '@/components/BasicTable.vue';
import useTableConfig from '@/hooks/useTableConfigHook';
import ActionButton from '@/components/ActionButton.vue';
import { TABLE_OPTIONS, INVENTORY_TABLE_COLUMNS } from './configs/tables';
import { useRouter } from 'vue-router';
import {
  querySafetyPublicityBoardPage,
  deleteSafetyPublicityBoardPage,
  type safetyCultureFilePageQuery,
  type safetyCultureFileQuery,
} from '@/api/safety-culture';
import { downloadByData } from '@/utils/file/download';
import BatchImport from '@/components/batch-import/BatchImport.vue';
import { useGlobSetting } from '@/hooks/setting';
import urlJoin from 'url-join';
import { http } from '@/utils/http/axios';


const router = useRouter();

// 表格
const basicTableRef = ref<InstanceType<typeof BasicTable>>();

const { tableConfig, pagination } = useTableConfig(INVENTORY_TABLE_COLUMNS, TABLE_OPTIONS);

const tableData = ref<any[]>([]);

const queryParams = reactive<safetyCultureFileQuery>({
  keyword: '', // 文件名称/编号（模糊查询）
  status: undefined, // 状态：1-启用，0-禁用
  classifyName: '', // 分类名称：外部院级文件/内部院级文件
  startTime: '', // 上传日期范围-开始日期
  endTime: '', // 上传日期范围-结束日期
});

// 上传日期范围（用于日期选择器）
const uploadDateRange = ref<[string, string] | null>(null);

const handleSizeChange = (value: number) => {
  pagination.pageSize = value;
  getTableData();
};

const handleCurrentChange = (value: number) => {
  pagination.pageNumber = value;
  getTableData();
};


async function getTableData() {
  tableConfig.loading = true;
  try {
    const pageQuery: safetyCultureFilePageQuery = {
      pageNumber: pagination.pageNumber,
      pageSize: pagination.pageSize,
      queryParam: {
        keyword: queryParams.keyword || undefined,
        status: queryParams.status,
        classifyName: queryParams.classifyName || undefined,
        startTime: queryParams.startTime || undefined,
        endTime: queryParams.endTime || undefined,
      },
    };
    const res = await querySafetyPublicityBoardPage(pageQuery);
    if (res) {
      tableData.value = res.records.map((item) => ({
        id: item.id,
        fileName: item.materialName || item.fileName,
        status: item.status,
        categoryName: item.categoryName || item.classifyName,
        fileCode: item.description || '-',
        fileVersion: item.createdAt,
        attachmentUrl: item.attachmentUrl,
        fileUrl: item.fileUrl,
      }));
      pagination.total = res.totalRow || 0;
    }
  } catch (e) {
    console.error('获取院级文件列表失败:', e);
    tableData.value = [];
    pagination.total = 0;
  } finally {
    tableConfig.loading = false;
  }
}

const handleSearch = () => {
  // 处理日期范围
  if (uploadDateRange.value && uploadDateRange.value.length === 2) {
    queryParams.startTime = uploadDateRange.value[0];
    queryParams.endTime = uploadDateRange.value[1];
  } else {
    queryParams.startTime = '';
    queryParams.endTime = '';
  }

  pagination.pageNumber = 1;
  getTableData();
};

const handleReset = () => {
  queryParams.keyword = '';
  queryParams.status = undefined;
  queryParams.classifyName = '';
  queryParams.startTime = '';
  queryParams.endTime = '';
  uploadDateRange.value = null;
  handleSearch();
};

// 批量导入
const batchImportVisible = ref(false);
const { urlPrefix } = useGlobSetting();
const importApiUrl = ref(urlJoin(urlPrefix, '/productionSafety/SafetyCultureMaterials/import'));
const templateUrl = ref('./skyeye-file-upload/sfysecurity/TEMPLATE/import-academy-file-template.xlsx');

const handleImport = () => {
  batchImportVisible.value = true;
};

const handleUpdate = () => {
  batchImportVisible.value = false;
  getTableData();
};

const handleDownload = async () => {
  try {
    const exportParams: safetyCultureFileQuery = {
      keyword: queryParams.keyword || undefined,
      status: queryParams.status,
      classifyName: queryParams.classifyName || undefined,
      startTime: queryParams.startTime || undefined,
      endTime: queryParams.endTime || undefined,
    };
    // const response = await exportSafetyCultureMaterials(exportParams, queryParams.classifyName || undefined);
    // if (response) {
    //   const fileName = `院级文件管理_${new Date().toISOString().split('T')[0]}.xlsx`;
    //   downloadByData(response, fileName);
    //   ElMessage.success('导出成功');
    // }
  } catch (e) {
    console.error('导出院级文件失败:', e);
    ElMessage.error('导出失败，请重试');
  }
};

// 文件下载
const handleDownloadFile = (row: any) => {
  const parseAttachmentUrls = (attachmentUrl?: string): string[] => {
    if (!attachmentUrl || !attachmentUrl.trim()) {
      return [];
    }

    const normalized = attachmentUrl.trim();
    if (normalized.startsWith('[') && normalized.endsWith(']')) {
      try {
        const parsed = JSON.parse(normalized);
        if (Array.isArray(parsed)) {
          return parsed.map((item) => String(item).trim()).filter((item) => item);
        }
      } catch (error) {
        console.error('解析 attachmentUrl 失败:', error);
      }
    }

    return normalized.split(',').map((url) => url.trim()).filter((url) => url);
  };

  const attachmentUrls = parseAttachmentUrls(row?.attachmentUrl);
  const url = attachmentUrls[0] || row?.fileUrl;
  if (!url) {
    ElMessage.warning('暂无文件可下载');
    return;
  }
  window.open(url, '_blank');
};

const handleCreate = () => {
  router.push({
    name: 'safetyPublicityBoardManagementItem',
    query: {
      operate: 'safety-publicity-board-create',
    },
  });
};

const handleEdit = (id: number) => {
  router.push({
    name: 'safetyPublicityBoardManagementItem',
    query: {
      id,
      operate: 'safety-publicity-board-edit',
    },
  });
};

const handleDelete = async (id: number) => {
  try {
    await deleteSafetyPublicityBoardPage(id);
    ElMessage.success('删除成功');
    getTableData();
  } catch (e) {
    console.error('删除院级文件失败:', e);
    ElMessage.error('删除失败，请重试');
  }
};

const handleView = (id: number) => {
  router.push({
    name: 'safetyPublicityBoardManagementItem',
    query: {
      id,
      operate: 'safety-publicity-board-view',
    },
  });
};

const loginSw = async () => {
  http.request<number>({
    url: '/api/login/auth',
    method: 'post',
    data: {
      "username": "admin",
      "password": "e14874aaefbf1666a9ad3d11f2a77892",
      "captchaVerification": ""
    },
  });
};

onMounted(() => {
  getTableData();
  // loginSw();
});
</script>

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