<template>
  <div>
    <layout-card>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="会议标题">
          {{ detailItems.MEETING_TITLE }}
        </el-descriptions-item>
        <el-descriptions-item label="运输企业">
          {{ detailItems.CORP_NAME }}
        </el-descriptions-item>
        <el-descriptions-item label="主持人">
          {{ detailItems.HOST_PERSON }}
        </el-descriptions-item>
        <el-descriptions-item label="记录人">
          {{ detailItems.RECORDER }}
        </el-descriptions-item>
        <el-descriptions-item label="会议时间">
          {{ detailItems.MEETING_DATE_START }}
        </el-descriptions-item>
        <el-descriptions-item label="截止时间">
          {{ detailItems.MEETING_DATE_END }}
        </el-descriptions-item>
        <el-descriptions-item label="会议类型">
          <template v-if="detailItems.MEETING_TYPE === '1'">
            安全生产例会
          </template>
          <template v-else-if="detailItems.MEETING_TYPE === '2'">
            安全生产委员会会议
          </template>
        </el-descriptions-item>
        <el-descriptions-item label="会议内容">
          <div v-html="detailItems.MEETING_CONTENT"></div>
        </el-descriptions-item>
        <!--        <el-descriptions-item label="备注">-->
        <!--        {{ detailItems.NOTES }}-->
        <!--      </el-descriptions-item>-->
        <el-descriptions-item label="远程参会人员">
          应参会{{ detailItems.totalPersonNum }}/人，实参人数{{
            detailItems.realPersonNum
          }}/人
        </el-descriptions-item>
      </el-descriptions>
      <el-table
        :border="true"
        :data="detailItems.recipientsList"
        :show-header="true"
      >
        <el-table-column label="头像" align="center">
          <template #default="{ row }">
            <img :src="VITE_FILE_URL + row.USERAVATARURL" alt="Avatar" />
          </template>
        </el-table-column>
        <el-table-column label="姓名" align="center">
          <template #default="{ row }"> {{ row.NAME }}<br /> </template>
        </el-table-column>
        <el-table-column label="参会时间" align="center">
          <template #default="{ row }"> {{ row.OPERATTIME }}<br /> </template>
        </el-table-column>
        <el-table-column label="参会地址" align="center">
          <template #default="{ row }">
            {{ row.LOCATIONADDRESS }}<br />
          </template>
        </el-table-column>
        <el-table-column label="参会证明" align="center">
          <template #default="{ row }">
            <img
              :src="VITE_FILE_URL + row.SIGNATUREPICTURE"
              alt="Signature"
              style="
                max-width: 100px;
                max-height: 100px;
                display: block;
                margin: auto;
              "
            />
            <img
              :src="VITE_FILE_URL + row.LIVEPHOTOS"
              alt="LivePhoto"
              style="
                max-width: 100px;
                max-height: 100px;
                display: block;
                margin: auto;
              "
            />
          </template>
        </el-table-column>
      </el-table>
    </layout-card>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { getSafetyMeetingView } from "@/request/traffic_safety_meeting.js";
import { useRoute } from "vue-router";
const route = useRoute();
const VITE_FILE_URL = import.meta.env.VITE_FILE_URL;
const { SAFETY_MEETING_ID } = route.query;
const detailItems = ref({
  MEETING_TITLE: "",
  TRANSPORTATIONCOMPANY: "",
  HOST_PERSON: "",
  RECORDER: "",
  MEETING_DATE_START: "",
  MEETING_DATE_END: "",
  MEETING_TYPE: "",
  LIVEPHOTOS: "",
  SIGNATUREPICTURE: "",
  MEETING_CONTENT: "",
  recipientsInfo: "",
  totalPersonNum: "",
  realPersonNum: "",
});

const fnGetData = async () => {
  const response = await getSafetyMeetingView({ SAFETY_MEETING_ID });
  detailItems.value = response.pd;
};
fnGetData();
</script>

<style scoped></style>
