<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="150px">
      <el-form-item :label="$t('meetatt.meeting_id')" prop="meetingId">
        <el-input v-model="queryParams.meetingId" :placeholder="$t('meetatt.meeting_id_P')" clearable
                  @keyup.enter.native="handleQuery" maxlength="20" />
      </el-form-item>
      <el-form-item :label="$t('meetatt.attendee_id')" prop="attendeeId">
        <el-input v-model="queryParams.attendeeId" :placeholder="$t('meetatt.attendee_id_P')" clearable
                  @keyup.enter.native="handleQuery" maxlength="20" />
      </el-form-item>
      <el-form-item :label="$t('meetatt.attend_sts')" align="center" prop="attendSts" width="150">
        <el-select v-model="queryParams.attendSts" @keyup.enter.native="handleQuery" clearable>
          <el-option v-for="item in dataOptions1" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('meetatt.pay_sts')" align="center" prop="paySts" width="150">
        <el-select v-model="queryParams.paySts" @keyup.enter.native="handleQuery" clearable>
          <el-option v-for="item in dataOptions2" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t('meetatt.query')
          }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('meetatt.reset') }}</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                   v-hasPermi="['xvisit:meetingattendance:add']">{{ $t('meetatt.add') }}</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
                   v-hasPermi="['xvisit:meetingattendance:export']">{{ $t('meetatt.export') }}</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-tickets" size="mini" @click="handleGenerateBadge"
                   :disabled="multiple" v-hasPermi="['xvisit:meetingattendance:generate']">{{ $t('meetatt.generate_badge') }}</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="info" plain icon="el-icon-download" size="mini" @click="handleBatchDownload"
                   :disabled="multiple" v-hasPermi="['xvisit:meetingattendance:downloadZip']">{{ $t('meetatt.batch_download') }}</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-user" size="mini" @click="openAddAttendeeDialog"
                   v-hasPermi="['xvisit:meetingattendance:add']">{{ $t('meetatt.add_attendees') }}</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="meetingattendanceList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column :label="$t('meetatt.meeting_id')" align="center" prop="meetingId" />
      <el-table-column :label="$t('meetatt.meeting_name')" align="center" prop="meetingName" />
      <el-table-column :label="$t('meetatt.attendee_id')" align="center" prop="attendeeId" />
      <el-table-column :label="$t('meetatt.attendee_name')" align="center" prop="attendeeName" />
      <el-table-column :label="$t('meetatt.seat_info')" align="center" prop="seatInfo" />
      <el-table-column :label="$t('meetatt.attend_sts')" align="center" prop="attendSts">
        <template #default="scope">
          <el-tag v-if="scope.row.attendSts == '0'">{{ $t('meetatt.sign_sts_0') }}</el-tag>
          <el-tag v-else-if="scope.row.attendSts == '1'">{{ $t('meetatt.sign_sts_1') }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column :label="$t('meetatt.pay_sts')" align="center" prop="paySts">
        <template #default="scope">
          <el-tag v-if="scope.row.paySts == '0'">{{ $t('meetatt.pay_sts_0') }}</el-tag>
          <el-tag v-else-if="scope.row.paySts == '1'">{{ $t('meetatt.pay_sts_1') }}</el-tag>
          <el-tag v-else>{{ $t('meetatt.pay_sts_0') }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column :label="$t('meetatt.code')" align="center" prop="attendeeCode" />

      <el-table-column :label="$t('meetatt.pay_image')" align="center" prop="payImage" width="100">
        <template slot-scope="scope">
          <image-preview :src="scope.row.payImage" :width="50" :height="50" />
        </template>
      </el-table-column>


      <el-table-column :label="$t('meetatt.zh_pass')" align="center" width="120">
        <template slot-scope="scope">
          <div v-if="scope.row.conferencePassZhBase64" class="image-cell">
            <el-image
              :src="scope.row.conferencePassZhBase64"
              :preview-src-list="getPreviewList(scope.row, 'Zh')"
              fit="contain"
              class="table-image"
              :z-index="9999"
              @click.stop
            >
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </div>
          <span v-else class="no-image">无</span>
        </template>
      </el-table-column>

      <el-table-column :label="$t('meetatt.ja_pass')" align="center" width="120">
        <template slot-scope="scope">
          <div v-if="scope.row.conferencePassJaBase64" class="image-cell">
            <el-image
              :src="scope.row.conferencePassJaBase64"
              :preview-src-list="getPreviewList(scope.row, 'Ja')"
              fit="contain"
              class="table-image"
              :z-index="9999"
              @click.stop
            >
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </div>
          <span v-else class="no-image">无</span>
        </template>
      </el-table-column>

      <el-table-column :label="$t('meetatt.act')" align="center" class-name="small-padding fixed-width" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                     v-hasPermi="['xvisit:meetingattendance:edit']">{{ $t('meetatt.edit') }}</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                     v-hasPermi="['xvisit:meetingattendance:remove']">{{ $t('meetatt.del') }}</el-button>
          <el-button
            v-if="scope.row.conferencePassZhBase64 || scope.row.conferencePassJaBase64"
            size="mini" type="text" icon="el-icon-download" @click="handleDownload(scope.row)"
                     v-hasPermi="['xvisit:meetingattendance:download']">{{ $t('meetatt.download') }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                @pagination="getList" />

    <!-- 添加参会人员对话框 -->
    <el-dialog :title="$t('meetatt.add_attendees')" :visible.sync="addAttendeeDialogVisible" width="800px">
      <el-form :model="form" label-width="100px">
        <el-form-item :label="$t('meetatt.select_meeting')" prop="meetingId">
          <el-select
            v-model="selectedMeeting"
            :placeholder="$t('meetatt.select_meeting')"
            @change="handleMeetingChange"
            style="width: 100%"
          >
            <el-option
              v-for="item in meetingOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item :label="$t('meetatt.participants')">
          <el-transfer
            v-model="selectedAttendees"
            :data="transferData"
            :titles="$t('meetatt.participants_title')"
            :props="{
              key: 'attendeeId',
              label: 'name'
            }"
            filterable
            :filter-placeholder="$t('meetatt.name')"
            @change="handleTransferChange"
          />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAddAttendees">{{ $t('meetatt.submit') }}</el-button>
        <el-button @click="addAttendeeDialogVisible = false">{{ $t('meetatt.cancel') }}</el-button>
      </div>
    </el-dialog>

    <!-- 添加会议状态对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="400px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item :label="$t('meetatt.attendee_id')" prop="attendeeId">
          <el-select v-model="form.attendeeId" :placeholder="$t('meetatt.attendee_id')" @change="onAttendeeChange"
                     :disabled="sts === 0 ? false : true">
            <el-option v-for="item in postOptions" :key="item.attendeeId" :label="item.attendeeId"
                       :value="item.attendeeId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('meetatt.attendee_name')" label-width="80px">
          <el-input v-model="form.name" :placeholder="$t('meetatt.attendee_name')" style="width: 220px"
                    disabled></el-input>
        </el-form-item>
        <el-form-item :label="$t('meetatt.meeting_id')" prop="meetingId">
          <el-select v-model="form.meetingId" :placeholder="$t('meetatt.meeting_id')" @change="onMeetingChange"
                     :disabled="sts === 0 ? false : true">
            <el-option v-for="item in postOptions2" :key="item.meetingId" :label="item.meetingId"
                       :value="item.meetingId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('meetatt.meeting_name')" label-width="80px">
          <el-input v-model="form.meetingName" :placeholder="$t('meetatt.meeting_name')" style="width: 220px"
                    disabled></el-input>
        </el-form-item>
        <el-form-item :label="$t('meetatt.seat_info')" prop="seatInfo">
          <el-input v-model="form.seatInfo" :placeholder="$t('meetatt.seat_info')" style="width: 220px" maxlength="20" />
        </el-form-item>
        <el-form-item :label="$t('meetatt.attend_sts')">
          <el-select v-model="form.attendSts" clearable >
            <el-option v-for="item in dataOptions1" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('meetatt.pay_sts')">
          <el-select v-model="form.paySts" clearable >
            <el-option v-for="item in dataOptions2" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('meetatt.pay_image')" prop="payImage">
          <image-upload v-model="form.payImage" />
        </el-form-item>
        <el-form-item :label="$t('meetatt.code')" prop="attendeeCode">
          <el-input v-model="form.attendeeCode" :placeholder="$t('meetatt.code_P')" maxlength="4"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">{{ $t('meetatt.submit') }}</el-button>
        <el-button @click="cancel">{{ $t('meetatt.cancel') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listMeetingattendance,
  getMeetingattendance,
  delMeetingattendance,
  addMeetingattendance,
  updateMeetingattendance,
  checkDataExists,
  generateBadges,
  downloadBadge,
  downloadBadgeBatch,
  getAttendeesForMeeting,
  batchAddAttendees,
  getAttendeesStatus,
  batchUpdateAttendees
} from "@/api/xvisit/meetingattendance";

import { listMeeting } from "@/api/xvisit/meeting";
import { listVisit } from "@/api/xvisit/visit";

export default {
  name: "Meetingattendance",
  data() {
    return {
      addAttendeeDialogVisible: false,
      selectedMeeting: null,
      meetingOptions: [],
      // 穿梭框数据
      selectedAttendees: [], // 选中的参会人员ID数组
      attendingAttendees: [], // 已参会人员
      nonAttendingAttendees: [], // 未参会人员
      transferData: [] ,

      leftAttendees: [],  // 左侧：已参会人员（attending）
      rightAttendees: [], // 右侧：未参会人员（nonAttending）
      allAttendees: [],    // 所有人员数据（供穿梭框内部使用）
      transferProps: {
        key: 'attendeeId',
        label: 'name',
        disabled: 'disabled'
      },
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      attendIds: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 签到状态表格数据
      meetingattendanceList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 人员id
      postOptions: [],
      // 会议id
      postOptions2: [],
      //签到状态
      dataOptions1: [
        {
          value: "1",
          label: this.$t('meetatt.sign_sts_1'),
        },
        {
          value: "0",
          label: this.$t('meetatt.sign_sts_0'),
        },
      ],
      //缴费状态
      dataOptions2: [
        {
          value: "1",
          label: this.$t('meetatt.pay_sts_1'),
        },
        {
          value: "0",
          label: this.$t('meetatt.pay_sts_0'),
        },
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        attendeeId: null,
        meetingId: null,
        attendSts: null,
        paySts: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        meetingId: [
          { required: true, message: this.$t('meetatt.attendee_id_R'), trigger: "blur" },
        ],
        attendeeId: [
          { required: true, message: this.$t('meetatt.meeting_id_R'), trigger: "blur" },
        ],
      },
      //add 0 upd 1
      sts: 0,
      toAdd:[],
      toRemove:[]
    };
  },

  created() {
    if (this.$route.query.attendeeId) {
      this.queryParams.attendeeId = this.$route.query.attendeeId
    }
    this.getList();
  },

  methods: {

    // 打开添加参会人员对话框
    openAddAttendeeDialog() {
      this.toAdd = [];
      this.toRemove = [];
      this.addAttendeeDialogVisible = true;
      this.selectedMeeting = null;
      this.selectedAttendees = [];
      this.attendingAttendees = [];
      this.nonAttendingAttendees = [];
      this.transferData = [];

      // 加载会议列表
      listMeeting({ pageNum: 1, pageSize: 1000 }).then(response => {
        this.meetingOptions = response.rows.map(item => ({
          value: item.meetingId,
          label: item.meetingName
        }));
      });
    },

    // 会议选择变化时触发
    handleMeetingChange(meetingId) {
      if (!meetingId) {
        this.attendingAttendees = [];
        this.nonAttendingAttendees = [];
        this.transferData = [];
        this.selectedAttendees = [];
        return;
      }

      // 获取参会人员状态
      getAttendeesStatus(meetingId).then(response => {
        if (response.code === 200) {
          // 已参会人员
          this.attendingAttendees = response.data.attending || [];
          // 未参会人员
          this.nonAttendingAttendees = response.data.nonAttending || [];

          // 更新穿梭框数据：未参会人员在前，已参会人员在后
          this.transferData = [
            ...this.nonAttendingAttendees,
            ...this.attendingAttendees
          ];

          // 默认选中未参会人员
          this.selectedAttendees = this.nonAttendingAttendees.map(item => item.attendeeId);
        }
      });
    },
    // 穿梭框数据变化时触发
    handleTransferChange(newSelectedAttendees, direction, movedKeys) {
      //新增
      if (direction === 'left'){
        if (this.toRemove.includes(movedKeys)) {
          const index = this.toRemove.indexOf(movedKeys);
          if (index !== -1) {
            this.toRemove.splice(index, 1); // 删除该元素
          }
        }
        this.toAdd.push(movedKeys)
      }
      //删除
      if (direction === 'right'){
        if (this.toAdd.includes(movedKeys)) {
          const index = this.toAdd.indexOf(movedKeys);
          if (index !== -1) {
            this.toAdd.splice(index, 1); // 删除该元素
          }
        }
        this.toRemove.push(movedKeys)
      }


      // 不需要额外处理，selectedAttendees会自动更新
    },

    // 提交添加参会人员
    submitAddAttendees() {
      if (!this.selectedMeeting) {
        this.$modal.msgError('请选择会议');
        return;
      }

      console.log(" this.toAdd", this.toAdd)
      console.log(" this.toRemove", this.toRemove)


      // 将数组转换为字符串
      const toAddString = this.toAdd.join(',');
      const toRemoveString = this.toRemove.join(',');

      if (!toAddString && !toRemoveString) {
        this.$modal.msgWarning('没有变更的参会人员');
        return;
      }
      console.log("toRemoveString",toRemoveString)
      // 调用API批量更新
      batchUpdateAttendees({
        meetingId: this.selectedMeeting,
        addAttendeeIds: toAddString,
        removeAttendeeIds: toRemoveString
      }).then(response => {
        if (response.code === 200) {
          this.$modal.msgSuccess('参会人员更新成功');
          this.addAttendeeDialogVisible = false;
          this.getList(); // 刷新列表
        }
      });
    },
    /** 批量下载参会证按钮操作 */
    handleBatchDownload() {
      if (this.ids.length === 0) {
        this.$modal.msgWarning("请至少选择一条数据");
        return;
      }

      // 检查选中的记录是否都有参会证
      const hasNoBadge = this.meetingattendanceList
        .filter(item => this.ids.includes(item.meetingId) && this.attendIds.includes(item.attendeeId))
        .some(item => !item.conferencePassZhBase64 && !item.conferencePassJaBase64);

      if (hasNoBadge) {
        this.$modal.confirm('选中的记录中存在未生成参会证的数据，是否继续下载已生成的参会证？').then(() => {
          this.downloadSelectedBadges();
        }).catch(() => {});
      } else {
        this.downloadSelectedBadges();
      }
    },

    /** 执行批量下载 */
    downloadSelectedBadges() {
      const params = this.meetingattendanceList
        .filter(item => this.ids.includes(item.meetingId) && this.attendIds.includes(item.attendeeId))
        .map(item => ({
          meetingId: item.meetingId,
          attendeeId: item.attendeeId
        }));

      this.$modal.loading("正在准备批量下载...");

      downloadBadgeBatch(params).then(response => {
        const url = window.URL.createObjectURL(new Blob([response]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', '参会证批量下载.zip');
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        window.URL.revokeObjectURL(url);
        this.$modal.closeLoading();
      }).catch(error => {
        this.$modal.closeLoading();
        this.$modal.msgError("批量下载失败: " + (error.message || error));
        console.error('批量下载失败:', error);
      });
    },


    /** 下载参会证按钮操作 */
    handleDownload(row) {
      const params = {
        meetingId: row.meetingId,
        attendeeId: row.attendeeId,
        langType: 'zh' // 默认中文，可根据需要修改
      };

      this.$modal.loading("正在准备下载...");

      downloadBadge(params).then(response => {
        console.log("response.data",response)
        // 创建一个URL对象
        const url = window.URL.createObjectURL(new Blob([response]));

        // 创建a标签并触发下载
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', '参会证.zip');
        document.body.appendChild(link);
        link.click();

        // 清理
        document.body.removeChild(link);
        window.URL.revokeObjectURL(url);

        this.$modal.closeLoading();
      }).catch(error => {
        this.$modal.closeLoading();
        this.$modal.msgError("下载失败: " + (error.message || error));
        console.error('下载失败:', error);
      });
    },

    getPreviewList(row, type) {
      const image = type === 'Zh' ? row.conferencePassZhBase64 : row.conferencePassJaBase64;
      return image ? [image] : [];
    },
    /** 查询签到状态列表 */
    getList() {
      this.loading = true;
      listMeetingattendance(this.queryParams).then((response) => {
        this.meetingattendanceList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.meetingId);
      this.attendIds = selection.map(item => item.attendeeId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },

    // 表单重置
    reset() {
      this.form = {
        attendeeId: null,
        meetingId: null,
        attendSts: null,
        paySts: null,
        seatInfo: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        memo: null,
        delFlag: null,
        payImage: null,
        attendeeCode: null
      };
      this.resetForm("form");
      this.sts = 0;
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.resetForm("form");

      this.queryParams = {
        meetingId: null,
        attendeeId: null,
        attendSts: null,
        paySts: null,
        payImage: null,
        delFlag: null,
        pageSize: 10,
        pageNum: 1
      };
      this.sts = 0;
      this.handleQuery();
    },

    /** 新增会议按钮操作 */
    handleAdd() {
      this.reset();
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 1000;

      listVisit(this.queryParams).then((response) => {
        this.postOptions = response.rows.map((row) => ({
          attendeeId: row.attendeeId,
          name: row.name,
        }));
        this.open = true;
        this.title = this.$t('meetatt.add_title');
      });

      listMeeting(this.queryParams).then((response) => {
        this.postOptions2 = response.rows.map((row) => ({
          meetingId: row.meetingId,
          meetingName: row.meetingName,
        }));
      });
    },

    onAttendeeChange() {
      const selectedAttendee = this.postOptions.find(
        (item) => item.attendeeId === this.form.attendeeId
      );
      if (selectedAttendee) {
        this.form.name = selectedAttendee.name;
      } else {
        this.form.name = "";
      }
    },

    onMeetingChange() {
      const selectedMeeting = this.postOptions2.find(
        (item) => item.meetingId === this.form.meetingId
      );
      if (selectedMeeting) {
        this.form.meetingName = selectedMeeting.meetingName;
      } else {
        this.form.meetingName = "";
      }
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.sts = 1;
      const meetingId = row.meetingId || this.ids;
      const attendeeId = row.attendeeId;
      getMeetingattendance(meetingId, attendeeId).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = this.$t('meetatt.add_title');
      });
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.sts == 1) {
            updateMeetingattendance(this.form).then((response) => {
              this.$modal.msgSuccess(this.$t('meetatt.edit_msg'));
              this.open = false;
              this.getList();
            });
          } else {
            checkDataExists(this.form)
              .then((response) => {
                if (response) {
                  this.$modal.msgError(this.$t('meetatt.add_msg_NG'));
                } else {
                  addMeetingattendance(this.form).then((response) => {
                    this.$modal.msgSuccess(this.$t('meetatt.add_msg'));
                    this.open = false;
                    this.getList();
                  });
                }
              })
              .catch((error) => {
                console.error("请求失败:", error);
              });
          }
        }
      });
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const meetingIds = row.meetingId || this.ids;
      const attendeeIds = row.attendeeId || this.attendIds;
      this.$modal
        .confirm(this.$t('meetatt.del_msgInfo'))
        .then(function () {
          return delMeetingattendance(meetingIds, attendeeIds);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess(this.$t('meetatt.del_msg'));
        })
        .catch(() => { });
    },

    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "xvisit/meetingattendance/export",
        {
          ...this.queryParams,
        },
        `meetingattendance_${new Date().getTime()}.xlsx`
      );
    },

    /** 生成参会证按钮操作 */
    handleGenerateBadge() {
      if (this.ids.length === 0) {
        this.$modal.msgWarning("请至少选择一条数据");
        return;
      }

      // 构建参数数组，每个元素包含 meetingId 和 attendeeId
      const params = this.meetingattendanceList
        .filter(item => this.ids.includes(item.meetingId) && this.attendIds.includes(item.attendeeId))
        .map(item => ({
          meetingId: item.meetingId,
          attendeeId: item.attendeeId
        }));

      this.$modal.confirm('确认要为选中的' + params.length + '条数据生成参会证吗？').then(() => {
        generateBadges(params).then(res => {
          if (res.code === 200) {
            this.$modal.msgSuccess("参会证生成成功");
            this.getList();
          } else {
            this.$modal.msgError(res.msg);
          }
        }).catch(error => {
          this.$modal.msgError("生成参会证失败：" + error.message);
        });
      }).catch(() => {

      });
    }
  },
};
</script>
<style>
.image-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  cursor: pointer;
}

.table-image {
  width: 50px;
  height: 50px;
  transition: transform 0.3s;
}

.table-image:hover {
  transform: scale(1.1);
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
}

.no-image {
  color: #999;
}

.transfer-footer {
  padding: 6px 12px;
  text-align: center;
  color: #666;
  border-top: 1px solid #ebeef5;
}


.transfer-panel__header {
  padding: 10px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
  font-weight: bold;
}



.transfer-item {
  padding: 8px 10px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
}

.transfer-item:hover {
  background-color: #f5f7fa;
}



.transfer-panel__header {
  padding: 10px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
  font-weight: bold;
}



.transfer-item {
  padding: 8px 10px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
}

.transfer-item:hover {
  background-color: #f5f7fa;
}
.transfer-panel {
  height: 400px;
  display: flex;
  flex-direction: column;
}

.transfer-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

.transfer-panel {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow: hidden;
  height: 400px;
  display: flex;
  flex-direction: column;
}

.transfer-panel__header {
  padding: 10px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
  font-weight: bold;
}

.transfer-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

.transfer-item {
  padding: 8px 10px;
  border-bottom: 1px solid #f0f0f0;
}
</style>