<script setup lang="ts">
import type { LeaveVO } from '../leave/api/model';

import dayjs from 'dayjs';
import { ref, watchEffect } from 'vue';
import { ElImage, ElImageViewer } from 'element-plus';

defineOptions({
  name: 'LeaveDescription',
  inheritAttrs: false,
});

const props = defineProps<{ workOrderDetail: LeaveVO }>();

// 附件数组，使用ref存储以保持引用稳定
const attachmentsArray = ref<string[]>([]);

// 图片预览相关
const previewVisible = ref(false);
const previewIndex = ref(0);

// 监听附件URL变化，更新附件数组
watchEffect(() => {
  if (!props.workOrderDetail?.attachmentsUrl) {
    attachmentsArray.value = [];
    return;
  }
  
  let urls: string[] = [];
  
  // 如果已经是数组，确保每个元素都是字符串
  if (Array.isArray(props.workOrderDetail.attachmentsUrl)) {
    urls = props.workOrderDetail.attachmentsUrl.map(item => String(item));
  } else {
    try {
      // 尝试解析JSON字符串
      const parsed = JSON.parse(String(props.workOrderDetail.attachmentsUrl));
      if (Array.isArray(parsed)) {
        urls = parsed.map(item => String(item));
      } else {
        urls = [String(parsed)];
      }
    } catch (e) {
      // 解析失败，将整个字符串作为单个URL
      urls = [String(props.workOrderDetail.attachmentsUrl)];
    }
  }
  
  // 过滤掉空字符串
  attachmentsArray.value = urls.filter(url => url.trim() !== '');
});

// 图片预览函数
function handlePreview(index: number) {
  previewIndex.value = index;
  previewVisible.value = true;
}

// 关闭预览
function closePreview() {
  previewVisible.value = false;
}
</script>

<template>
  <div class="rounded-[6px] border p-2">
    <ElDescriptions v-if="props.workOrderDetail" :column="4" class="mb-2">
      <ElDescriptionsItem label="工单类型：">
        {{ props.workOrderDetail.ticketTypeName }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="场站：">
        {{ props.workOrderDetail.stationName || '无' }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="联系人：">
        {{ props.workOrderDetail.contact || '无' }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="联系电话：">
        {{ props.workOrderDetail.phone || '无' }}
      </ElDescriptionsItem>
    </ElDescriptions>
    <ElDescriptions v-if="props.workOrderDetail" :column="1">
      <ElDescriptionsItem label="提报内容：">
        {{ props.workOrderDetail.content || '无' }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="附件：">
        <div v-if="attachmentsArray.length > 0" class="flex flex-wrap gap-2">
          <div
            v-for="(url, index) in attachmentsArray"
            :key="index"
            class="w-20 h-20 cursor-pointer rounded overflow-hidden"
            @click="handlePreview(index)"
          >
            <ElImage
              :src="url"
              fit="cover"
              class="w-full h-full"
            />
          </div>
        </div>
        <span v-else>无</span>
      </ElDescriptionsItem>
    </ElDescriptions>

    <ElSkeleton active v-else :rows="4" />
    <!-- 图片预览组件 -->
  <ElImageViewer
    v-if="previewVisible"
    :url-list="attachmentsArray"
    :initial-index="previewIndex"
    @close="closePreview"
  />
  </div>
</template>
