<template>
  <div>
    <el-descriptions v-loading="loading" :column="2">
      <el-descriptions-item :span="2" label="宣讲人">{{ teamMeetingDetail?.compere?.name }}</el-descriptions-item>
      <el-descriptions-item :span="2" label="参与人">
        <span :key="item.id" v-for="item in teamMeetingDetail?.participantList">{{ item.name }}，</span>
      </el-descriptions-item>
      <el-descriptions-item label="班组名称">{{ teamMeetingDetail?.team.name }}</el-descriptions-item>
      <el-descriptions-item label="施工单位">{{ teamMeetingDetail?.contractor.name }}</el-descriptions-item>
      <el-descriptions-item label="开会时间">{{ dayjs(teamMeetingDetail?.meetingDate).format('YYYY 年 MM 月 DD 日') }}</el-descriptions-item>
      <el-descriptions-item label="上传时间">{{ teamMeetingDetail?.createTime }}</el-descriptions-item>
      <el-descriptions-item :span="2" label="班会内容">{{ teamMeetingDetail?.content }}</el-descriptions-item>
      <el-descriptions-item :span="2" label="班会图片">
        <el-space wrap>
          <span :key="item.id" v-for="item in teamMeetingDetail?.pictureUrl">
            <image-preview :src="item.name" width="200px" />
          </span>
        </el-space>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script setup lang="ts">
import { getTeamMeeting } from '@/api/safety/teamMeeting';
import { TeamMeetingVO } from '@/api/safety/teamMeeting/types';
import dayjs from 'dayjs';

interface Props {
  teamMeetingId?: string | number;
}

const props = defineProps<Props>();
const loading = ref<boolean>(false);
const teamMeetingDetail = ref<TeamMeetingVO>();
const get = async () => {
  loading.value = true;
  const res = await getTeamMeeting(props.teamMeetingId);
  if (res.data && res.code === 200) {
    teamMeetingDetail.value = res.data;
  }
  loading.value = false;
};

onMounted(() => {
  get();
});

watch(
  () => props.teamMeetingId,
  (newId, oldId) => {
    if (newId !== oldId) {
      get();
    }
  }
);
</script>
