<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>

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

<script setup name="Meeting_jl">
import { ref, reactive } from "vue";
import dayjs from 'dayjs';
import axios from 'axios';

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: '',
  is_external: '2'
});

/** 查询设备告警列表 */
const getList = async () => {
  try {
    loading.value = true;

    // 构建请求参数
    const params = {
      page: queryParams.pageNum,
      pageSize: queryParams.pageSize,
      status: queryParams.status,
      search: queryParams.search,
      is_external: queryParams.is_external,
      locationId: '',
      capacity: '',
      deviceType: '',
      roomType: '-1'
    };

    // 处理时间范围
    if (queryParams.timeRange && queryParams.timeRange.length === 2) {
      params.date = `${queryParams.timeRange[0]}~${queryParams.timeRange[1]}`;
    }

    // 发送请求
    const response = await axios.get(`${__LOCAL_API__}/Conference/meeting`, {
      params: params
    });

    // 处理响应数据
    if (response.data && response.data.code === 200) {
      meetingList.value = response.data.data.list;
      total.value = response.data.data.total;
    } else {
      console.error('获取数据失败:', response.data.message);
      meetingList.value = [];
      total.value = 0;
    }
  } catch (error) {
    console.error('获取数据失败:', error);
    meetingList.value = [];
    total.value = 0;
  } finally {
    loading.value = false;
  }
};

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

/** 重置按钮操作 */
function resetQuery() {
  queryParams.pageNum = 1;
  queryParams.pageSize = 10;
  queryParams.status = '100';
  queryParams.timeRange = [currentMonthStart, currentMonthEnd];
  queryParams.search = '';
  queryParams.is_external = '2';
  handleQuery();
}

/** 多选框选中数据 */
function handleSelectionChange(selection) {
  // 处理选中的数据
}

/** 获取会议状态类型 */
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>
