<template>
  <div style="padding: 5px; flex: 1; position: relative;">
    <!-- 签名容器：仅保留核心签名功能 -->
    <div ref="signatureContainer" class="signature-wrapper">
      <van-signature
        v-if="qmFlag && qmFlags"
        :key="signatureKey"
        v-model="signature"
        :width="signatureWidth"
        :height="signatureHeight"
        pen-color="#000000"
        background-color="#F8F8F8"
        :line-width="3"
        :show-export="true"
        @submit="handleSubmit"
        @clear="handleClear"
        :style="{
          '--van-signature-content-width': '100%',
          '--van-signature-content-height': 'calc(100% - 60px)',
          border: '1px solid #eee'
        }"
      />
    </div>

    <!-- 文件上传区域：固定显示，与签名区区分 -->
    <br />
    <div class="upload-area">
      <van-uploader
        :disabled="readonly"
        v-model="fileListTemp"
        accept=".txt,.pdf,.doc,.docx,.xls,.xlsx,.wps,.et,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/*"
        :after-read="uploadFile"
        upload-icon="plus"
        :show-upload="!readonly"
        :before-delete="onDelete"
        :max-count="5" 
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, watch, onUnmounted } from 'vue';
import { showFailToast, showSuccessToast, showConfirmDialog, showLoadingToast } from 'vant';
import { atob } from 'js-base64';

// 自定义事件：签名提交后通知父组件
const emit = defineEmits(['resetQMFlag']);

// 基础实例与业务Props（仅保留核心参数）
const { proxy } = getCurrentInstance();
const props = defineProps({
  fId: { type: String, default: '' }, // 文件关联ID
  value1: { type: String, default: null }, // 业务参数1
  value2: { type: String, default: null }, // 业务参数2
  value3: { type: String, default: null }, // 业务参数3
  value4: { type: String, default: null }, // 业务参数4
  value5: { type: String, default: null }, // 业务参数5
  readonly: { type: Boolean, default: false }, // 只读模式（隐藏上传/签名操作）
  qmFlag: { type: Boolean, default: true }, // 签名组件显示开关
  qmFlags: { type: Boolean, default: true }, // 签名功能启用开关
  updateFlag: { type: Number, default: 0 }
});

// 核心状态（无任何全屏相关变量）
const signatureContainer = ref(null);
const signature = ref(''); // 签名Base64
const signatureKey = ref(1); // 签名组件重渲染Key
const signatureWidth = ref('100%'); // 签名区宽度（固定100%）
const signatureHeight = ref('400px'); // 签名区高度（固定400px，适配常规屏幕）
const signaturePrefix = 'signature_'; // 签名文件前缀

// 业务变量
const tableData = ref([]); // 历史文件列表
const fileListTemp = ref([]); // 上传组件绑定的文件列表
const bucket = ref(import.meta.env.VITE_BUCKET); // 存储桶（从环境变量获取，确保项目配置正确）

// 签名提交：处理签名旋转、转文件、上传
const handleSubmit = async (data) => {
  emit('resetQMFlag');
  if (!data.image) {
    showFailToast('请先完成签名');
    return;
  }

  const toast = showLoadingToast({ message: '处理签名中...', forbidClick: true });
  try {
    // 签名图片逆时针旋转（解决部分设备签名方向异常问题）
    const rotatedBase64 = await rotateImageCounterClockwise(data.image);
    // Base64转File对象
    const file = dataURLtoFile(rotatedBase64, `${signaturePrefix}${Date.now()}.png`);
    // 调用上传接口
    await uploadFile({ file, fileName: file.name });
    showSuccessToast('签名上传成功');
    // 清空签名画布
    signature.value = '';
    // 重渲染签名组件（避免残留）
    signatureKey.value += 1;
  } catch (error) {
    showFailToast(error.message || '签名上传失败，请重试');
    console.error('签名提交错误：', error);
  } finally {
    toast.close();
  }
};

// 清空签名画布
const handleClear = () => {
  signature.value = '';
};

// 图片逆时针旋转（修复签名方向问题）
const rotateImageCounterClockwise = (base64) => {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.crossOrigin = 'anonymous'; // 解决跨域图片问题
    img.onload = () => {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      // 交换宽高（旋转后宽=原高，高=原宽）
      canvas.width = img.height;
      canvas.height = img.width;
      // 旋转中心点 + 逆时针旋转90度
      ctx.translate(canvas.width / 2, canvas.height / 2);
      ctx.rotate(-Math.PI / 2);
      // 绘制图片（居中显示）
      ctx.drawImage(img, -img.width / 2, -img.height / 2);
      // 转Base64返回（质量1.0）
      resolve(canvas.toDataURL('image/png', 1.0));
    };
    img.onerror = (error) => reject(new Error(`图片加载失败：${error.message}`));
    img.src = base64;
  });
};

// Base64转File对象（用于上传）
const dataURLtoFile = (dataurl, filename) => {
  const arr = dataurl.split(',');
  const mime = arr[0].match(/:(.*?);/)[1]; // 提取MIME类型
  const bstr = atob(arr[1]); // Base64解码
  let n = bstr.length;
  const u8arr = new Uint8Array(n);
  // 转换为Uint8Array
  while (n--) u8arr[n] = bstr.charCodeAt(n);
  // 返回File对象
  return new File([u8arr], filename, { type: mime });
};

// 查询历史文件列表（组件挂载/Props变化时调用）
const getTableData = () => {
  console.log('单纯展示图片数据===========================================');
  const url = 'framework/Common/queryFileWithValues';
  const param = {
    fId: props.fId,
    value1: props.value1,
    value2: props.value2,
    value3: props.value3,
    value4: props.value4,
    value5: props.value5
  };
console.log('参数：', param.fId);
  proxy.$axios.get(url, { params: param }) // 注意：get请求参数需用params包裹（原代码可能漏写）
    .then(response => {
      if (response.data.code === 0) {
        tableData.value = response.data.data;
        fileListTemp.value = tableData.value.map(item => ({
          id: item.id,
          url: `${import.meta.env.VITE_BASE_API}framework/Common/downloadFileS3?bucket=${bucket.value}&id=${item.id}&fullfilename=${Date.now()}${item.fileName}`,
          name: item.fileName // 显示文件名（优化上传组件显示）
        }));
      } else {
        showFailToast(`文件查询失败：${response.data.msg}`);
      }
    })
    .catch(error => {
      showFailToast('文件查询接口异常');
      console.error('查询文件错误：', error);
    });
};

// 文件上传（签名/本地文件通用）
const uploadFile = (fileObj) => {
  return new Promise((resolve, reject) => {
    const formData = new FormData();
    // 拼接上传参数（与后端接口对应）
    formData.append('fId', props.fId);
    formData.append('bucket', bucket.value);
    formData.append('value1', props.value1 || '');
    formData.append('value2', props.value2 || '');
    formData.append('value3', props.value3 || '');
    formData.append('value4', props.value4 || '');
    formData.append('value5', props.value5 || '');
    formData.append('file', fileObj.file);
    formData.append('fileName', fileObj.fileName || fileObj.file.name);

    proxy.$axios.post('framework/Common/uploadFileS3', formData, {
      headers: { 'Content-Type': 'multipart/form-data' } // 显式指定表单类型（避免接口报错）
    })
      .then(res => {
        if (res.data.code === 0) {
          showSuccessToast('文件上传成功');
          getTableData(); // 上传成功后刷新文件列表
          resolve();
        } else {
          reject(new Error(`上传失败：${res.data.msg}`));
        }
      })
      .catch(err => {
        reject(new Error(`接口请求异常：${err.message}`));
      });
  });
};

// 文件删除确认
const onDelete = (file) => {
  return showConfirmDialog({
    title: '确认删除',
    message: '此操作将永久删除该文件，是否继续？'
  })
    .then(() => {
      return proxy.$axios.post('framework/Common/removeFile', { id: file.id })
        .then(res => {
          if (res.data.code === 0) {
            showSuccessToast('文件删除成功');
            getTableData(); // 删除后刷新列表
            return true;
          } else {
            showFailToast(`删除失败：${res.data.msg}`);
            return false;
          }
        })
        .catch(() => {
          showFailToast('删除接口异常');
          return false;
        });
    })
    .catch(() => false); // 取消删除返回false
};

// 生命周期：组件挂载时查询文件列表
onMounted(() => {
  getTableData();
});

// 组件卸载：清理无（无全屏相关事件需移除）
onUnmounted(() => {});

// Props变化时刷新文件列表（业务参数变化时同步文件）
watch(props, (newVal, oldVal) => {
  // 当fId或任意业务参数变化时，重新查询文件
  const paramsChanged = Object.keys(newVal).some(key => newVal[key] !== oldVal[key]);
  if (paramsChanged) {
    getTableData();
  }
}, { deep: true }); // 深度监听对象类型Props

defineExpose({ getTableData });
</script>

<style scoped>
/* 签名容器样式：固定布局，与上传区分 */
.signature-wrapper {
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* 上传区域样式：增加内边距，优化显示 */
.upload-area {
  padding: 8px 0;
}

/* 修复签名组件内部布局：确保按钮水平显示 */
:deep(.van-signature) {
  width: 100% !important;
  height: 100% !important;
  display: flex;
  flex-direction: column;
}

/* 签名画布样式：填充容器，避免留白 */
:deep(.van-signature__content) {
  flex: 1;
  width: 100% !important;
  min-height: 0 !important;
}

/* 签名按钮栏样式：水平排列，固定底部 */
:deep(.van-signature__footer) {
  display: flex !important;
  justify-content: center;
  gap: 20px;
  padding: 10px 0;
  border-top: 1px solid #eee;
  background-color: #fff;
}

/* 统一按钮样式：适配业务风格 */
:deep(.van-signature__footer .van-button) {
  min-width: 120px;
}
</style>