<!-- src/pages/base/message/detail.vue -->
<template>
  <view class="message-detail-page">
    <view v-if="isLoading" class="loading-indicator">加载中...</view>
    <view v-else class="detail-content">
      <view class="detail-header">
        <view class="title-tag-row">
          <text class="detail-title">{{ rw.rwmc }}</text>
        </view>
        <view class="detail-meta">
          <text>{{ rw.rwkstime }}</text>
          <!--          <text>{{ messageDetail.timeAgo }}</text>-->
        </view>
      </view>
      <view class="detail-body">
        <BasicForm :schema="schema" v-model="formData">
          <!-- 注册自定义组件 -->
          <template #ImageVideoUpload="{ field, label, required, componentProps, onChange }">
            <ImageVideoUpload
              v-model:image-list="formData[`${field}_images`]"
              v-model:video-list="formData[`${field}_videos`]"
              v-model:file-list="formData[`${field}_files`]"
              @image-upload-success="(file, index) => onChange?.(file, field)"
              @video-upload-success="(file, index) => onChange?.(file, field)"
              @file-upload-success="(file, index) => onChange?.(file, field)"
              v-bind="componentProps"
            />
          </template>
        </BasicForm>
      </view>
      <view class="detail-footer">
        <button type="primary" class="action-button" @click="saveRwZx">提交</button>
      </view>
    </view>
    <!--    <view v-else class="empty-state">消息详情未找到</view>-->
  </view>
</template>

<script lang="ts" setup>
import {ref} from 'vue';
import {onLoad} from '@dcloudio/uni-app';
import {rwFindInfoByRwId, rwflFindRwlxsByRwId, rwzxExecutedInfoByRwIdAndJsApi, rwzxSaveApi} from "@/api/base/server";
import {useForm} from "@/components/BasicForm/hooks/useForm";
import {navigateBack, showToast} from "@/utils/uniapp";
import {useUserStore} from "@/store/modules/user";
import { ImageVideoUpload, type FileItem, COMPRESS_PRESETS } from "@/components/ImageVideoUpload";
import { attachmentUpload } from "@/api/system/upload";

interface MessageDetail {
  id: string; // Assuming an ID is passed or can be derived
  title: string;
  desc: string;
  date: string;
  timeAgo: string;
  tagText: string;
  tagType: string;
  // Add other fields as necessary
}

const formData: any = ref({})
const messageId = ref<string>('');
const jsId = ref<string>(''); // 教师ID
const executionId = ref<string>(''); // 执行ID
const messageDetail = ref<MessageDetail | null>({
  id: 'todo1',
  title: '教务通知 (待办)',
  desc: '学校召开期初教学准备会议暨首次教学工作例会. 会议强调了新学期的教学重点和要求，请各位老师认真准备。',
  date: '2025-02-17',
  timeAgo: '8 mins 前',
  tagText: '通知',
  tagType: 'notice',
  likes: 6,
  comments: 12
});
const isLoading = ref(false);
const rwflx: any = ref([])
const rw = ref({})
const schema = reactive<FormsSchema[]>([])
const {getUser} = useUserStore()

async function saveRwZx() {
  const result = [];
  for (let i = 0; i < rwflx.value.length; i++) {
    const fieldId = rwflx.value[i].id;
    let fieldValue = formData.value[fieldId];
    
    // 处理上传类型的任务
    if (rwflx.value[i].rwfl == "sctp" || rwflx.value[i].rwfl == "scsp" || rwflx.value[i].rwfl == "scwd") {
      // 收集上传文件的URL
      const fileUrls = [];
      
      if (rwflx.value[i].rwfl == "sctp") {
        // 图片上传
        const images = formData.value[`${fieldId}_images`] || [];
        fileUrls.push(...images.map((img: any) => img.url).filter(Boolean));
      } else if (rwflx.value[i].rwfl == "scsp") {
        // 视频上传
        const videos = formData.value[`${fieldId}_videos`] || [];
        fileUrls.push(...videos.map((video: any) => video.url).filter(Boolean));
      } else if (rwflx.value[i].rwfl == "scwd") {
        // 文档上传
        const files = formData.value[`${fieldId}_files`] || [];
        fileUrls.push(...files.map((file: any) => file.url).filter(Boolean));
      }
      
      fieldValue = fileUrls.join(',');
    }
    
    console.log(44, fieldId, fieldValue)
    if (rwflx.value[i].rwbs && (!fieldValue || fieldValue == "")) {
      showToast("请填写必填项!")
      return;
    }
    result.push({
      rwlxId: fieldId,
      rwzxqdtx: fieldValue,
    })
  }
  await rwzxSaveApi({
    id: executionId.value, // 执行记录ID，如果有的话就是更新，没有就是新增
    rwId: rw.value.id, // 任务ID
    rwzxfzr: jsId.value || getUser.id, // 执行人（教师ID）
    mobile: getUser.mobile, // 手机号
    rwzxqdDtos: result // 执行清单
  })
  showToast("操作成功!");
  uni.navigateBack({delta: 1})
}

const rwzxqds = ref([])
onLoad(async (options) => {
  console.log('页面加载参数:', options);
  
  let taskId = '';
  
  // 处理参数接收，兼容多种传参方式
  if (options && options.params) {
    try {
      const params = JSON.parse(decodeURIComponent(options.params));
      taskId = params.id;
      jsId.value = params.jsId || '';
      executionId.value = params.executionId || '';
      console.log('解析参数成功:', { taskId, jsId: jsId.value, executionId: executionId.value });
    } catch (error) {
      console.error('解析参数失败:', error);
      taskId = options.id || '';
    }
  } else if (options && options.id) {
    taskId = options.id;
  }
  
  if (taskId) {
    const {result} = await rwFindInfoByRwId({
      rwId: taskId
    });
    rwflx.value = result.rwlxes;
    rw.value = result;
    for (let i = 0; i < rwflx.value.length; i++) {
      // 处理上传类型的任务
      if (rwflx.value[i].rwfl == "sctp" || rwflx.value[i].rwfl == "scsp" || rwflx.value[i].rwfl == "scwd") {
        // 初始化表单数据
        const fieldId = rwflx.value[i].id;
        if (rwflx.value[i].rwfl == "sctp") {
          formData.value[`${fieldId}_images`] = [];
        } else if (rwflx.value[i].rwfl == "scsp") {
          formData.value[`${fieldId}_videos`] = [];
        } else if (rwflx.value[i].rwfl == "scwd") {
          formData.value[`${fieldId}_files`] = [];
        }
        // 根据任务类型配置上传组件
        let componentConfig = {};
        
        if (rwflx.value[i].rwfl == "sctp") {
          // 上传图片
          componentConfig = {
            component: "ImageVideoUpload",
            componentProps: {
              enableImage: true,
              enableVideo: false,
              enableFile: false,
              maxImageCount: 5,
              uploadApi: attachmentUpload,
              compressConfig: COMPRESS_PRESETS.medium
            }
          };
        } else if (rwflx.value[i].rwfl == "scsp") {
          // 上传视频
          componentConfig = {
            component: "ImageVideoUpload",
            componentProps: {
              enableImage: false,
              enableVideo: true,
              enableFile: false,
              maxVideoCount: 3,
              uploadApi: attachmentUpload,
              compressConfig: COMPRESS_PRESETS.medium
            }
          };
        } else if (rwflx.value[i].rwfl == "scwd") {
          // 上传文档
          componentConfig = {
            component: "ImageVideoUpload",
            componentProps: {
              enableImage: false,
              enableVideo: false,
              enableFile: true,
              maxFileCount: 5,
              allowedFileTypes: ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'mp3', 'wav', 'zip', 'rar'],
              uploadApi: attachmentUpload,
              compressConfig: COMPRESS_PRESETS.medium
            }
          };
        }
        
        schema.push({
          field: `${rwflx.value[i].id}`,
          label: `${rwflx.value[i].rwbt}`,
          required: rwflx.value[i].rwbs,
          itemProps: {
            labelPosition: "top",
          },
          ...componentConfig
        })
      } else if (rwflx.value[i].rwfl == "text") {
        schema.push({
          field: `${rwflx.value[i].id}`,
          label: `${rwflx.value[i].rwbt}`,
          component: "BasicInput",
          required: rwflx.value[i].rwbs,
          itemProps: {
            labelPosition: "top",
          },
          componentProps: {
            type: "textarea",
            placeholder: "请输入内容"
          },
        })
      } else if (rwflx.value[i].rwfl == "dxsx" || rwflx.value[i].rwfl == "dxxz") {
        let options = rwflx.value[i].remark.split("；");
        let range = [];
        for (let i = 0; i < options.length; i++) {
          range.push({
            name: options[i]
          });
        }
        schema.push({
          field: `${rwflx.value[i].id}`,
          label: `${rwflx.value[i].rwbt}`,
          component: "BasicPicker",
          required: rwflx.value[i].rwbs,
          itemProps: {
            labelPosition: "top",
          },
          componentProps: {
            range: range,
            rangeKey: "name",
            savaKey: "name",
          },
        })
      }
    }
    const res = await rwzxExecutedInfoByRwIdAndJsApi({
      rwId: taskId,
      jsId: jsId.value || getUser.id // 使用传入的jsId，如果没有则使用当前用户ID
    });
    if (res && res.result && res.result.length) {
      rwzxqds.value = res.result;
      const showData = {};
      for (let i = 0; i < rwzxqds.value.length; i++) {
        showData[rwzxqds.value[i].rwlxId] = rwzxqds.value[i].rwzxqdtx;
      }
      formData.value = showData;
    }
  } else {
    console.error('Message ID/Data is missing!');
    uni.showToast({title: '加载失败，缺少信息', icon: 'none'});
  }
});
</script>

<style scoped lang="scss">
.message-detail-page {
  background-color: #f4f5f7;
  min-height: 100vh;
  padding: 15px;
  box-sizing: border-box;
}

.loading-indicator,
.empty-state {
  text-align: center;
  color: #999;
  padding: 40px 15px;
  font-size: 14px;
}

.detail-content {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.detail-header {
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 15px;
  margin-bottom: 20px;

  .title-tag-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; // Align items to the top
    margin-bottom: 10px;
  }

  .detail-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    flex: 1; // Allow title to take available space
    margin-right: 10px; // Space between title and tag
    line-height: 1.4;
    text-align: center; // 居中显示
  }

  .tag { // Reuse tag styles from index page if possible, or define here
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    color: #ffffff;
    white-space: nowrap;
    flex-shrink: 0; // Prevent tag from shrinking

    &.notice {
      background-color: #447ade;
    }

    &.task {
      background-color: #19be6b;
    }

    &.approval {
      background-color: #ff9f0a;
    }

    &.submit {
      background-color: #8e8e93;
    }
  }


  .detail-meta {
    font-size: 12px;
    color: #999;

    text {
      margin-right: 15px;
    }
  }
}

.detail-body {
  margin-bottom: 40px;

  .detail-desc {
    font-size: 15px;
    color: #555;
    line-height: 1.7;
    word-break: break-word;
  }
}

.detail-footer {
  // text-align: center; // Removed center alignment
  // Add margin if needed, e.g., margin-top: 20px;
}

// Style for the action button
.action-button {
  width: 100%; // Make button full width
  height: 44px; // Standard button height
  line-height: 44px; // Match height for vertical centering
  font-size: 16px; // Slightly larger font
  font-weight: 500; // Medium weight
  border-radius: 8px; // Consistent border radius
  margin-top: 20px; // Add space above the button
  // Ensure primary color is applied correctly (uni-app default should work)
  // background-color: #447ade;
  // color: #ffffff;
}

// 为输入框添加基本边框（参考原生 textFiled 样式）
:deep(.uni-input),
:deep(.uni-textarea) {
  width: 100% !important;
  min-height: 35px !important;
  font-size: 13px !important;
  border: 1px #CCCCCC solid !important;
  border-radius: 3px !important;
  padding: 8px 12px !important;
  box-sizing: border-box !important;
}

// 为 BasicForm 组件内的输入框添加边框
:deep(.basic-form) {
  .uni-input,
  .uni-textarea {
    width: 100% !important;
    min-height: 35px !important;
    font-size: 13px !important;
    border: 1px #CCCCCC solid !important;
    border-radius: 3px !important;
    padding: 8px 12px !important;
    box-sizing: border-box !important;
  }
}

// 尝试直接选择 input 和 textarea 标签
:deep(input),
:deep(textarea) {
  width: 100% !important;
  min-height: 35px !important;
  font-size: 13px !important;
  border: 1px #CCCCCC solid !important;
  border-radius: 3px !important;
  padding: 8px 12px !important;
  box-sizing: border-box !important;
}

</style>
