<template>
  <div class="sos-alert-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2 class="page-title">
        <Icon icon="ep:warning" class="mr-2" />
        预警通知
      </h2>
      <p class="page-description">查看和管理SOS预警及分析预警信息</p>
    </div>

    <!-- 搜索工作栏 -->
    <ContentWrap>
      <el-form
        ref="queryFormRef"
        :model="queryParams"
        :inline="true"
        label-width="80px"
        class="search-form"
      >
        <el-form-item label="预警类型" prop="alerttype">
          <el-select
            v-model="queryParams.alerttype"
            placeholder="请选择预警类型"
            clearable
            class="!w-200px"
          >
            <el-option label="SOS" value="1" />
            <el-option label="分析预警" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select
            v-model="queryParams.status"
            placeholder="请选择状态"
            clearable
            class="!w-200px"
          >
            <el-option label="未读" value="0" />
            <el-option label="已读" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">
            <Icon icon="ep:search" class="mr-1" />
            搜索
          </el-button>
          <el-button @click="resetQuery">
            <Icon icon="ep:refresh" class="mr-1" />
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </ContentWrap>

    <!-- 列表 -->
    <ContentWrap>
      <div class="table-header">
        <div class="table-title">
          <Icon icon="ep:document" class="mr-2" />
          预警列表
        </div>
        <div class="table-actions">
          <el-button type="primary" @click="refreshList">
            <Icon icon="ep:refresh" class="mr-1" />
            刷新
          </el-button>
        </div>
      </div>

      <el-table 
        v-loading="loading" 
        :data="list" 
        :stripe="true" 
        :show-overflow-tooltip="true"
        row-key="id"
        class="alert-table"
      >
        <el-table-column label="序号" align="center" prop="id" width="100" />
        <el-table-column label="预警类型" align="center" prop="alerttype" width="140">
          <template #default="{ row }">
            <el-tag
              :type="row.alerttype === '1' ? 'danger' : 'warning'"
              size="small"
            >
              {{ row.alerttype === '1' ? 'SOS' : '分析预警' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="用户ID" align="center" prop="userid" width="120" />
        <el-table-column label="用户名称" align="center" prop="username" min-width="150" />
        <el-table-column label="状态" align="center" prop="status" width="120">
          <template #default="{ row }">
            <el-tag
              :type="row.status === 0 ? 'danger' : 'success'"
              size="small"
            >
              {{ row.status === 0 ? '未读' : '已读' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="设备ID" align="center" prop="devicecode" min-width="150" />
        <el-table-column label="操作" align="center" width="140" fixed="right">
          <template #default="{ row }">
            <el-button
              type="primary"
              link
              size="small"
              @click="openForm('update', row.id)"
              class="view-btn"
            >
              <Icon icon="ep:view" class="mr-1" />
              查看内容
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页 -->
      <Pagination
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </ContentWrap>

    <!-- 表单弹窗：添加/修改 -->
    <content ref="contentRef" @refresh="getList"></content>
  </div>
</template>

<script setup lang="ts">
import { getUserProfile } from '@/api/system/user/profile'
import { AlertMessageApi, AlertMessageVO } from '@/api/alertmessage'
import content from './content.vue'
/** 预警信息 列表 */
defineOptions({ name: 'AlertMessage' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const loading = ref(true) // 列表的加载中
const list = ref<AlertMessageVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  alerttype: undefined,
  content: undefined,
  userid: undefined,
  username: undefined,
  status: undefined,
  createtime: [],
  updatetime: [],
  devicecode: undefined,
  devicetype: undefined,
  orgid: undefined,
  orgname: undefined,
})
const queryFormRef = ref() // 搜索的表单
const contentRef = ref() // 表单弹窗
const userProfile = ref()

// 预警类型格式化函数
const alertTypeFormatter = (row: any, column: any, cellValue: any) => {
  const typeMap: Record<string, string> = {
    '1': 'SOS',
    '2': '分析预警'
  }
  return typeMap[cellValue] || cellValue
}

// 状态格式化函数
const statusFormatter = (row: any, column: any, cellValue: any) => {
  const statusMap: Record<string, string> = {
    '0': '未读',
    '1': '已读'
  }
  return statusMap[cellValue] || cellValue
}

/** 查询列表 */
const getList = async () => {
  //首先获取用户信息
  userProfile.value = await getUserProfile()
  if(userProfile.value.dept.orgid!=0){
    queryParams.orgid = userProfile.value.dept.orgid
  }
  loading.value = true
  try {
    const data = await AlertMessageApi.getAlertMessagePage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

/**
 * 刷新列表
 */
const refreshList = () => {
  getList()
}

const openForm = (type: string, id?: number) => {
  if (id) {
    contentRef.value.open(id)
  }
}

/** 初始化 **/
onMounted(() => {
  getList()
})
</script>

<style lang="scss" scoped>
.sos-alert-container {
  padding: 20px;
  background-color: #f5f7fa;
  height: 100%;
  overflow-y: auto;
}

.page-header {
  margin-bottom: 20px;
  padding: 20px;
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
  border-radius: 12px;
  color: white;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

  .page-title {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 600;
    display: flex;
    align-items: center;
  }

  .page-description {
    margin: 0;
    opacity: 0.9;
    font-size: 14px;
  }
}

.search-form {
  .el-form-item {
    margin-bottom: 16px;
  }
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #ebeef5;

  .table-title {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
    display: flex;
    align-items: center;
  }

  .table-actions {
    display: flex;
    gap: 8px;
    align-items: center;
  }
}

.alert-table {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

  :deep(.el-table__header) {
    background-color: #fafafa;
  }

  :deep(.el-table__row) {
    transition: all 0.3s ease;

    &:hover {
      background-color: #f5f7fa !important;
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
  }
}

.view-btn {
  color: #409eff;
  font-weight: 600;
  transition: all 0.3s ease;
  border-radius: 4px;
  padding: 2px 10px;
  background: #ecf5ff;
  border: 1px solid #b3d8ff;
  
  &:hover {
    color: #fff;
    background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
    border: 1px solid #409eff;
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);
    transform: scale(1.08);
  }
}

// 响应式设计
@media (max-width: 768px) {
  .sos-alert-container {
    padding: 10px;
  }

  .page-header {
    padding: 16px;
    
    .page-title {
      font-size: 20px;
    }
  }

  .table-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;

    .table-actions {
      width: 100%;
      justify-content: flex-end;
    }
  }

  .search-form {
    .el-form-item {
      margin-bottom: 12px;
    }
  }
}

// 动画效果
.alert-table {
  :deep(.el-table__row) {
    animation: fadeInUp 0.3s ease-out;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 加载状态优化
:deep(.el-loading-mask) {
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(2px);
}

// 标签样式优化
:deep(.el-tag) {
  border-radius: 4px;
  font-weight: 500;
}

// 按钮样式优化
:deep(.el-button) {
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
}

// 分页样式优化
:deep(.el-pagination) {
  margin-top: 20px;
  justify-content: center;
  padding: 16px 0;
  border-top: 1px solid #ebeef5;
}
</style>