<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="会议主题" prop="search">
        <el-input
            v-model="queryParams.search"
            placeholder="会议主题/会议室/发起人"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="会议日期" prop="timeRange">
        <el-date-picker
            v-model="queryParams.timeRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="会议状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择状态" style="width: 180px;">
          <el-option label="全部" value="100" />
          <el-option label="审批中" value="0" />
          <el-option label="待进行" value="3" />
          <el-option label="进行中" value="4" />
          <el-option label="已完成" value="5" />
          <el-option label="已取消" value="2" />
          <el-option label="审核拒绝" value="6" />
        </el-select>
      </el-form-item>
      <el-form-item label="会议类型" prop="is_external">
        <el-select v-model="queryParams.is_external" placeholder="请选择状态" style="width: 180px;">
          <el-option label="全部" value="2" />
          <el-option label="内部会议" value="0" />
          <el-option label="外部会议" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="meetingList" @selection-change="handleSelectionChange">
      <el-table-column label="序号" type="index" align="center" width="50" />
      <el-table-column label="会议主题" align="center" prop="subject" />
      <el-table-column label="会议地点" align="center" prop="detail.room.name" />
      <el-table-column label="会议时间" align="center">
        <template #default="scope">
          {{ formatTimeRange(scope.row.start_time, scope.row.end_time) }}
        </template>
      </el-table-column>
      <el-table-column label="发起人" align="center" prop="creator_name" />
      <el-table-column label="会议状态" align="center" width="100">
        <template #default="scope">
          <el-tag :type="getStatusType(scope.row.status)">
            {{ getStatusText(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="会议类型" align="center" prop="template_name" />
<!--      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="text" size="small" @click="handleView(scope.row)">查看</el-button>
          &lt;!&ndash; Add more buttons as needed &ndash;&gt;
        </template>
      </el-table-column>-->
    </el-table>

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

<script setup name="Waring">
import { listMeetingHistory } from "@/api/meeting/meeting";
import { ref, reactive } from "vue";
import dayjs from 'dayjs'; // 引入 dayjs 库用于日期格式化

const queryRef = ref(null);

const meetingList = ref([]);
const loading = ref(true);
const showSearch = ref(true);
const total = ref(0);

// 获取当前月份的第一天和最后一天（仅日期）
const currentMonthStart = dayjs().startOf('month').format('YYYY-MM-DD');
const currentMonthEnd = dayjs().endOf('month').format('YYYY-MM-DD');


const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  status: '100',
  timeRange: [currentMonthStart, currentMonthEnd], // 默认时间范围为当前月份
  search: '',
  interfaceName: "会议记录",
  type: 0,
  record: true,
  is_external: '2'
});

/** 查询设备告警列表 */
const getList = async () => {
  try {
    loading.value = true;
    const params = { ...queryParams };
    if (queryParams.timeRange && queryParams.timeRange.length === 2) {
      params.date = `${queryParams.timeRange[0]}~${queryParams.timeRange[1]}`;
      delete params.timeRange; // 删除原始的 timeRange 参数
    }
    listMeetingHistory(params).then(response => {
      meetingList.value = response.data.list;
      total.value = response.data.total;
      loading.value = false;
    });
  } catch (error) {
    console.error('获取数据失败:', error);
  } finally {
    loading.value = false;
  }
};

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

/** 重置按钮操作 */
function resetQuery() {
  queryRef.value.resetFields();
  handleQuery();
}

/** 获取会议状态类型 */
function getStatusType(status) {
  switch (status) {
    case 0:
      return 'warning'; // 审批中
    case 3:
      return 'info'; // 待进行
    case 4:
      return 'success'; // 进行中
    case 5:
      return 'success'; // 已完成
    case 2:
      return 'danger'; // 已取消
    case 6:
      return 'danger'; // 审核拒绝
    default:
      return '';
  }
}

/** 获取会议状态文本 */
function getStatusText(status) {
  switch (status) {
    case 0:
      return '审批中';
    case 3:
      return '待进行';
    case 4:
      return '进行中';
    case 5:
      return '已完成';
    case 2:
      return '已取消';
    case 6:
      return '审核拒绝';
    default:
      return '未知';
  }
}

/** 格式化会议时间范围 */
function formatTimeRange(startTime, endTime) {
  if (!startTime || !endTime) return '';
  const startFormatted = dayjs(startTime).format('YYYY-MM-DD HH:mm');
  const endFormatted = dayjs(endTime).format('HH:mm');
  return `${startFormatted}~${endFormatted}`;
}

getList();
</script>

<style scoped>
.el-table .cell {
  white-space: nowrap;
}
</style>
