<script setup lang="ts">
import { computed, defineEmits, defineProps, h,reactive, onMounted,withDefaults, ref, resolveComponent, watch } from 'vue';

import FileListView from './fileListView.vue'; // '/codes/fileListView.vue';

// 主体框架内置的第三方方法通过window对象暴露、供外部组件使用
const axios = (window as any).$axios;
// 获取主题状态
const themeStore = (window as any).$themeStore;
// 获取消息提示
const message = (window as any).$message;
const dialog = (window as any).$dialog;
// 通过计算属性确定当前的主体色
const isDarkMode = computed(() => themeStore?.darkMode || false);
// 根据主题计算文字颜色
const textColor = computed(() => (isDarkMode.value ? 'rgba(255, 255, 255, 0.85)' : 'rgba(0, 0, 0, 0.85)'));
const legendTextColor = computed(() => (isDarkMode.value ? 'rgba(255, 255, 255, 0.65)' : 'rgba(0, 0, 0, 0.65)'));
const borderColor = computed(() => (isDarkMode.value ? '#303030' : '#ffffff'));
// CSS变量
const cssVars = computed(() => ({
  '--text-color': textColor.value,
  '--bg-color': isDarkMode.value ? '#1f1f1f' : '#f5f5f5',
  '--panel-bg': isDarkMode.value ? '#262626' : '#ffffff',
  '--card-bg': isDarkMode.value ? '#303030' : '#ffffff',
  '--border-color': isDarkMode.value ? '#434343' : '#e8e8e8'
}));

// 修改FileItem接口，但保留原有字段
interface FileItem {
  id?: number;
  Kvid: string;
  StandardKvid: string;
  Title?: string;
  Code?: string;
  Unit?: string;
  QualifiedValue?: string;
  Description?: string;
  StatusType?: string;
  ReportKvid?: string;
  [key: string]: any; // 添加索引签名，以支持可能出现的其他字段
}

// 定义Item对象的接口
interface ItemProps {
  Kvid?: string;
  [key: string]: any;
}

// 定义props
const props = withDefaults(
  defineProps<{
    item?: ItemProps;
    active?: boolean; // 新增：是否激活状态，用于按需加载
  }>(),
  {
    item: () => ({}),
    active: false
  }
);
// 状态变量
const titleOptions = ref<any[]>([]);
const selectedStandard = reactive<any>({}); // 存储选中的完整对象
const fileData = ref<FileItem[]>([]); // 改回ref，避免过度响应式
const loading = ref<boolean>(false);

// 存储API返回的详细数据
const detailedData = reactive<ItemProps>({});
// 控制fileListView模态框显示
const showFileListView = ref<boolean>(false);
// 存储当前选中的文件行数据
const currentFileRow = ref<FileItem | null>(null);

// 使用ref来避免计算属性的循环更新问题
const selectedStandardKvid = ref<string>('');

// 计算是否有数据存在，用于控制NSelect状态
const hasExistingData = computed(() => {
  return fileData.value.length > 0;
});

// 根据选择的标题筛选数据 - 优化性能
const filteredData = computed(() => {
  return fileData.value;
});
// 辅助函数：将API的StatusType映射为显示状态
const mapStatusType = (statusType: string) => {
  const statusMap: { [key: string]: string } = {
    Unsupported: '草稿',
    BeforeTest: '待上传',
    Asigning: '已上传',
    Testing: '审核中',
    BeforeReview: '待复核',
    TestFinished: '不通过',
    TestCollected: '已通过'
  };
  return statusMap[statusType] || '草稿';
};

// 辅助函数：根据状态获取颜色
const getStatusColor = (status: string) => {
  const statusColorMap: { [key: string]: string } = {
    BeforeTest: '#f56a00', // 橙色 - 待处理
    Asigning: '#1890ff', // 蓝色 - 进行中
    Testing: '#722ed1', // 紫色 - 重要评审
    BeforeReview: '#eb2f96', // 粉红色 - 测试阶段
    TestFinished: '#13c2c2', // 青色 - 即将完成
    TestCollected: '#52c41a' // 绿色 - 已完成
  };
  return statusColorMap[status] || '#666';
};

// 状态映射函数（为模态框标题使用）
const getStatusInfo = (status: number) => {
  const statusMap = {
    0: { label: '草稿', color: '#909399', type: 'default' },
    100: { label: '待上传', color: '#E6A23C', type: 'warning' },
    150: { label: '已上传', color: '#409EFF', type: 'info' },
    200: { label: '审核中', color: '#F56C6C', type: 'error' },
    250: { label: '待复核', color: '#722ED1', type: 'warning' },
    300: { label: '不通过', color: '#FF7A45', type: 'error' },
    2147483647: { label: '已通过', color: '#67C23A', type: 'success' }
  };

  return statusMap[status as keyof typeof statusMap] || {
    label: `状态${status}`,
    color: '#909399',
    type: 'default'
  };
};

// 计算当前行的只读状态
const isCurrentRowReadonly = computed(() => {
  return currentFileRow.value && currentFileRow.value.Status > 150;
});
// 获取文件类型数据
async function fetchTitleOptions() {
  console.log('🔄 FileReview: 开始加载文件类型数据');
  try {
    loading.value = true;

    // 调用标准实体查询接口
    const response = await axios.post('/Restful/Kivii.Standards.Entities.Standard/Query.json?Type=文件审核');
            // console.log('完整响应数据:', response.data);

    // 添加数据存在性检查
    if (response.data && response.data.Results) {

      // 将API返回的数据转换为NSelect需要的格式
      titleOptions.value = response.data.Results.map((item: any, index: number) => ({
        label: item.Title,
        value: item.Kvid,
        // 可以选择以下任一方式存储完整对象信息：

        // 方式1：直接将完整对象作为额外属性
        fullObject: item
      }));
    } else {
              // console.error('无效的数据格式:', response.data);
      message.error('数据格式不正确');
    }
  } catch (error) {
    message.error('获取文件类型失败');
          // console.error('获取文件类型失败:', error);
  } finally {
    loading.value = false;
  }
}

// 获取文件详情数据
async function fetchFileDetails() {
  if (!selectedStandardKvid.value) return;

  // 如果数据已存在，直接返回（UI已有提示）
  if(fileData.value.length > 0) {
    return;
  }

  try {
    loading.value = true;

          const queryParams: any = {
        StandardKvid: selectedStandardKvid.value,
        OrderBy:'SortId'
      };

    const response = await axios.post('/Restful/Kivii.Standards.Entities.DetectionEx/DetectionWithPriceQuery.json', queryParams);

    if (response.data && response.data.Results) {
      const data :any={
        Detections:response.data.Results,
        ReportKvid:detailedData.Kvid
      }

             const resp=await axios.post('/Restful/Kivii.Lims.Entities.ReportItem/Detection.json', data);
       if(resp.data&&resp.data.Results){
         fileData.value = resp.data.Results.map((item: any) => ({
        // 直接使用API字段名
        ...item,

        // 保留转换后的自定义字段
        Status: mapStatusType(item.StatusType),
        StatusColor: getStatusColor(item.StatusType)
      }));
       }else{
         message.error('创建文件审核数据失败');
       }
    } else {
      message.error('获取文件数据失败');
    }
  } catch (error) {
    message.error('获取文件详情失败');
          // console.error(error);
  } finally {
    loading.value = false;
  }
}

// 使用报告Kvid获取数据
async function fetchDataByReportKvid(reportKvid: string) {
  if (!reportKvid) return;

  if (reportKvid === detailedData.Kvid && fileData.value.length > 0) {
    console.log('🔄 FileReview: 跳过重复请求，使用已缓存的数据');
    return;
  }

  console.log('🔄 FileReview: 开始获取文件审核数据，ReportKvid:', reportKvid);
  try {
    loading.value = true;

    const response = await axios.post('/Restful/Kivii.Lims.Entities.ReportItem/QueryEx.json', {
      ReportKvid: reportKvid,
      OrderBy:'SortId,SortIdEx,Kvid',
      WorkGroupName:'文件审核'
    });

    if (response.data && response.data.Results&&response.data.Results.length>0) {
      // 直接使用API返回的数据
      // fileData.value = response.data.Results;
      // fileData.value.forEach((item: any) => {
      //   item.StatusType = mapStatusType(item.StatusType);
      // });
      fileData.value = response.data.Results.map((item: any) => ({
        // 直接使用API字段名
        ...item,

        // 保留转换后的自定义字段
        Status: mapStatusType(item.StatusType),
        StatusColor: getStatusColor(item.StatusType)
      }));
      message.success('文件审核数据加载成功');
    } else {
      message.info('暂无文件审核数据');
    }
  } catch (error) {
    // console.error('获取文件审核数据失败:', error);
    message.error('获取文件审核数据失败，请稍后重试');
  } finally {
    loading.value = false;
  }
}

// 处理标题选择变化
function handleTitleChange(value: string) {
  selectedStandardKvid.value = value; // 同步选中值

  // 获取选中项的完整对象信息
  const selectedOption = titleOptions.value.find(option => option.value === value);
  if (selectedOption) {
    // 清空现有属性
    Object.keys(selectedStandard).forEach(key => {
      delete selectedStandard[key];
    });
    // 添加新属性
    Object.keys(selectedOption.fullObject).forEach(key => {
      selectedStandard[key] = selectedOption.fullObject[key];
    });
  }

  fetchFileDetails();
}

// 监听props.item变化，同步到detailedData
watch(
  () => props.item,
  newItem => {
    if (newItem && newItem.Kvid && newItem.Kvid !== detailedData.Kvid) {
      fetchDataByReportKvid(newItem.Kvid);
    }
    // 保持detailedData为props.item的响应式副本
    Object.assign(detailedData, newItem || {});
  },
  { immediate: true, deep: true }
);


// 页面加载时按需获取数据
onMounted(() => {
  // 只有在激活状态下才加载数据
  if (props.active) {
    fetchTitleOptions();

    // 如果有kvid，获取数据
    if (props.item && props.item.Kvid && props.item.Kvid !== detailedData.Kvid) {
      fetchDataByReportKvid(props.item.Kvid);
    }
  }
});

// 监听active属性变化，实现按需加载
watch(
  () => props.active,
  (newActive) => {
    if (newActive && titleOptions.value.length === 0) {
      // 第一次激活且数据未加载时，加载数据
      fetchTitleOptions();

      if (props.item && props.item.Kvid && props.item.Kvid !== detailedData.Kvid) {
        fetchDataByReportKvid(props.item.Kvid);
      }
    }
  },
  { immediate: true }
);

// 存储最新的文件列表数据
const latestFileListData = ref<any[]>([]);

// 监听FileListView模态框的显示状态
watch(
  () => showFileListView.value,
  (newValue, oldValue) => {
    // 当模态框从显示变为隐藏时
    if (oldValue === true && newValue === false) {
      console.log('FileListView模态框已关闭，最新文件数据:', latestFileListData.value);

      // 这里可以添加您需要的其他处理逻辑
        // 例如：调用API保存数据、更新其他组件状态等
        handleFileListClosed(latestFileListData.value);
    }
  }
);

// 表格列定义
const columns = ref<any[]>([
  {
    title: '序号',
    key: 'index',
    width: '45px',
    align: 'center',
    render(row: any, index: number) {
      return h('span', { style: 'font-weight: 500; color: #666; font-size: 12px;' }, index + 1);
    }
  },
  {
    title: '文件名称',
    key: 'Title',
    width: '30%'
  },
  {
    title: '备注',
    key: 'Description',
    width: '20%'
  },
  {
    title: '文件状态',
    key: 'Status',
    width: '15%',
    align: 'center',
    render(row: any) {
      const statusColor = row.StatusColor || '#666';
      return h(
        resolveComponent('n-tag'),
        {
          style: {
            backgroundColor: statusColor,
            color: '#fff',
            border: 'none',
            fontWeight: '500',
            borderRadius: '6px',
            padding: '4px 8px',
            fontSize: '12px',
            boxShadow: `0 2px 4px ${statusColor}30`
          },
          size: 'small'
        },
        { default: () => row.Status || '未知' }
      );
    }
  },
    {
    title: '操作',
    key: 'actions',
    width: 200,
    align: 'center',
    render(row: any) {
      return h('div', { style: 'display: flex; gap: 8px; justify-content: center;' }, [
        h(
          resolveComponent('n-button'),
          {
            size: 'small',
            style: {
              backgroundColor: '#1890ff',
              color: '#fff',
              border: 'none',
              borderRadius: '4px',
              padding: '4px 12px',
              fontSize: '12px',
              fontWeight: '500'
            },
            onClick: () => viewFile(row)
          },
          { default: () => '附件' }
        ),
        h(
          resolveComponent('n-button'),
          {
            size: 'small',
            style: {
              backgroundColor: '#ff4d4f',
              color: '#fff',
              border: 'none',
              borderRadius: '4px',
              padding: '4px 12px',
              fontSize: '12px',
              fontWeight: '500'
            },
            onClick: () => {
              dialog.warning({
                title: '确认删除',
                content: `确定要删除文件"${row.Title}"吗？此操作不可撤销。`,
                positiveText: '确定删除',
                negativeText: '取消',
                onPositiveClick: () => deleteFileRecord(row)
              });
            }
          },
          { default: () => '删除' }
        )
      ]);
    }
  }
]);

// 查看文件
function viewFile(row: FileItem) {
  // 将整个row数据存储到currentFileRow中
  currentFileRow.value = row;
  console.log('传递给FileListView的数据:', row);

  // 清空之前的文件列表数据
  latestFileListData.value = [];

  // 显示模态框
  showFileListView.value = true;
}

// 封装删除实体的方法
async function deleteEntities(kvids: string[]) {
  if (!kvids || kvids.length === 0) {
    message.error('请选择要删除的项目');
    return false;
  }

  try {
    loading.value = true;

    const response = await axios.post('/Restful/Kivii.Lims.Entities.ReportItem/Delete.json', {
      Kvids: kvids
    });

    if (response.data && response.data.Results && response.data.Results.length>0) {
      message.success(`成功删除 ${kvids.length} 个文件`);
      return true;
    } else {
      message.error(response.data?.Message || '删除失败');
      return false;
    }
  } catch (error) {
    console.error('删除文件失败:', error);
    message.error('删除文件失败，请稍后重试');
    return false;
  } finally {
    loading.value = false;
  }
}

// 删除文件记录
async function deleteFileRecord(row: FileItem) {
  if (!row.Kvid) {
    message.error('无效的文件ID');
    return;
  }

  // 调用删除接口
  const success = await deleteEntities([row.Kvid]);

  if (success) {
    // 从列表中移除
    fileData.value = fileData.value.filter(item => item.Kvid !== row.Kvid);
  }
}

// 清空所有文件数据
function clearAllFileData() {
  dialog.warning({
    title: '确认删除',
    content: '确定要删除所有文件审核数据吗？此操作不可撤销。',
    positiveText: '确定删除',
    negativeText: '取消',
    onPositiveClick: async () => {
      if (fileData.value.length === 0) {
        message.info('没有数据需要删除');
        return;
      }

      // 收集所有Kvid
      const kvids = fileData.value.map(item => item.Kvid).filter(kvid => kvid);

      if (kvids.length === 0) {
        message.error('没有有效的数据ID');
        return;
      }

      // 调用删除接口
      const success = await deleteEntities(kvids);

      if (success) {
        fileData.value = [];
        selectedStandardKvid.value = '';
        // 清空selectedStandard对象
        Object.keys(selectedStandard).forEach(key => {
          delete selectedStandard[key];
        });
      }
    }
  });
}

// 处理模态框关闭
function handleModalClose() {
  currentFileRow.value = null;
}

// 处理FileListView实时文件列表更新（实时同步数据）
function handleFileListUpdate(files: any[]) {
  console.log('FileReview: 接收到文件列表实时更新', files);

  // 存储最新的文件列表数据，用于界面关闭时处理
  latestFileListData.value = [...files]; // 深拷贝确保数据独立性

  console.log(`📁 实时数据同步: ${files.length} 个文件`);
}

// 处理FileListView界面关闭后的数据处理
async function handleFileListClosed(files: any[]) {
  console.log('🔒 FileListView界面已关闭，开始处理文件数据集合');

  // 检查当前行状态，如果超过150则直接返回
  if (!currentFileRow.value || currentFileRow.value.Status > 150) {
    console.log('⚠️ 当前状态不允许更新，Status:', currentFileRow.value?.Status);
    return;
  }

  const fileCount = files.length;

  try {
    // 根据文件数量确定状态值
    const newStatus = fileCount <= 0 ? 100 : 150;
    if(currentFileRow.value.Status===newStatus){
      // message.info('文件状态未发生变化，无需更新');
      return;
    }
    console.log(`📋 准备更新状态: 文件数量=${fileCount}, 新状态=${newStatus}`);

    // 调用更新接口
    const response = await axios.post('/Restful/Kivii.Lims.Entities.ReportItem/Update.json', {
      Item: {
        Kvid: currentFileRow.value.Kvid,
        Status: newStatus
      }
    });

    if (response.data && response.data.Results && response.data.Results.length > 0) {
      // 更新成功，同步本地状态
      currentFileRow.value.Status = newStatus;

      // 同时更新状态显示文本和颜色
      const statusText = newStatus === 100 ? '待上传' : '已上传';
      const statusColor = newStatus === 100 ? '#E6A23C' : '#409EFF';

      currentFileRow.value.Status = statusText;
      currentFileRow.value.StatusColor = statusColor;

      // 在fileData数组中找到对应项并更新
      const itemIndex = fileData.value.findIndex(item => item.Kvid === currentFileRow.value?.Kvid);
      if (itemIndex !== -1) {
        fileData.value[itemIndex].Status = statusText;
        fileData.value[itemIndex].StatusColor = statusColor;
      }

      message.success(`状态更新成功：${statusText} (${fileCount}个文件)`);

      console.log('✅ 状态更新成功:', {
        记录ID: currentFileRow.value.Kvid,
        文件数量: fileCount,
        新状态: newStatus,
        状态描述: statusText
      });
    } else {
      message.error('状态更新失败：' + (response.data?.Message || '未知错误'));
      console.error('❌ 状态更新失败:', response.data);
    }

  } catch (error) {
    message.error('状态更新失败，请稍后重试');
    console.error('❌ 状态更新异常:', error);
  }
}
</script>

<template>
  <div>
    <div class="section-title">
      <svg class="section-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
        <path
          fill="currentColor"
          d="M13,9H18.5L13,3.5V9M6,2H14L20,8V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V4C4,2.89 4.89,2 6,2M14,20V19C14,17.67 11.33,17 10,17C8.67,17 6,17.67 6,19V20H14M10,12A2,2 0 0,0 8,14A2,2 0 0,0 10,16A2,2 0 0,0 12,14A2,2 0 0,0 10,12Z"
        ></path>
      </svg>
      <span>审核文件提交</span>
    </div>

        <NFormItem label="选择文件类型">
      <div class="file-type-selector">
        <div class="selector-row">
          <NSelect
            v-model:value="selectedStandardKvid"
            :options="titleOptions"
            :placeholder="hasExistingData ? '已有数据，请先删除' : '选择文件类型'"
            :disabled="hasExistingData"
            label-field="label"
            value-field="value"
            @update:value="handleTitleChange"
            class="selector-input"
          ></NSelect>

          <!-- 有数据时显示删除按钮 -->
          <NButton
            v-if="hasExistingData"
            type="error"
            size="small"
            @click="clearAllFileData"
            class="clear-button"
          >
            <template #icon>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16">
                <path fill="currentColor" d="M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M7,6H17V19H7V6M9,8V17H11V8H9M13,8V17H15V8H13Z" />
              </svg>
            </template>
            清空数据
          </NButton>
        </div>

        <!-- 简洁的状态提示 -->
        <div v-if="hasExistingData" class="status-tip">
          <NIcon size="14" color="#f0a020">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path fill="currentColor" d="M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z" />
            </svg>
          </NIcon>
          <span>已有 {{ fileData.length }} 条文件审核数据</span>
        </div>
      </div>
    </NFormItem>

        <NDataTable
      :columns="columns"
      :data="filteredData"
      :bordered="false"
      max-height="300px"
      :loading="loading"
    ></NDataTable>

    <!-- fileListView模态框 -->
    <NModal
      v-model:show="showFileListView"
      preset="card"
      style="width: 60%"
      :mask-closable="true"
      @after-leave="handleModalClose"
    >
      <template #header>
        <div class="modal-header-compact" v-if="currentFileRow">
          <n-space align="center" :size="12">
            <span class="modal-title-compact">文件详情 - {{ currentFileRow?.Title || '文件列表' }}</span>
            <n-tag
              :type="getStatusInfo(currentFileRow?.Status || 0).type as any"
              :color="{ color: getStatusInfo(currentFileRow?.Status || 0).color }"
              size="small"
            >
              {{ getStatusInfo(currentFileRow?.Status || 0).label }}
            </n-tag>
            <span v-if="isCurrentRowReadonly" class="readonly-hint-modal">
              （当前状态不允许上传/删除操作）
            </span>
          </n-space>
        </div>
      </template>

      <FileListView
        v-if="currentFileRow"
        :owner-item="currentFileRow"
        @close="showFileListView = false"
        @update-files="handleFileListUpdate"
      ></FileListView>
    </NModal>
  </div>
</template>

<style scoped>
.section-title {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 16px;
  color: #333;
}

.section-icon {
  margin-right: 8px;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-hint {
  color: #999;
  font-size: 13px;
  margin-top: 8px;
}

.mt-4 {
  margin-top: 16px;
}

.file-type-selector {
  width: 100%;
}

.selector-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.selector-input {
  flex: 1;
}

.clear-button {
  flex-shrink: 0;
  border-radius: 6px;
  height: 34px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-tip {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12px;
  color: #f0a020;
  padding: 4px 0;
}

.status-tip span {
  line-height: 1;
}

/* 禁用状态下的选择器样式 */
:deep(.n-base-selection--disabled) {
  background-color: #fef2f2;
  border-color: #fecaca;
}

:deep(.n-base-selection--disabled .n-base-selection-placeholder) {
  color: #dc2626 !important;
  font-weight: 500;
}

/* 模态框标题样式 */
.modal-header-compact {
  padding: 4px 0;
}

.modal-title-compact {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
  line-height: 1.4;
}

.readonly-hint-modal {
  font-size: 12px;
  color: #E6A23C;
  font-style: italic;
}
</style>
