MessageList.vue

<template>
  <view class="message-list">
    <!-- 消息列表 -->
    <view
      v-for="(item, index) in messageList"
      :key="index"
      class="message-item"
    >
      <!-- 复选框 - 仅在编辑模式下显示 -->
      <view
        v-if="isEditMode"
        class="checkbox-container"
        @click.stop="toggleSelect(item)"
      >
        <view
          class="checkbox"
          :class="{
            checked: selectedItems.includes(item.taskId),
            disabled: item.status === 'CLOSED'
          }"
        >
          <uv-icon
            v-if="selectedItems.includes(item.taskId)"
            name="checkmark"
            size="24rpx"
            color="#FFFFFF"
          ></uv-icon>
        </view>
      </view>

      <!-- 消息图标 -->
      <view class="message-icon" @click="handleItemClick(item)">
        <image
          class="icon-image"
          :src="getIconByType(item.isRead)"
          mode="aspectFit"
        ></image>
      </view>

      <!-- 消息内容 -->
      <view class="message-content" @click="handleItemClick(item)">
        <view class="message-header">
          <text class="message-time">{{ item.countTime }}</text>
          <view class="message-status">
            <image
              v-if="item.childStatusValue === 'False alarm'"
              class="status-icon"
              src="/static/message/question.png"
              mode="aspectFit"
            ></image>
            <image
              v-else-if="item.childStatusValue === 'Confirm'"
              class="status-icon"
              src="/static/message/checkRight.png"
              mode="aspectFit"
            ></image>
            <image
              v-else
              class="status-icon"
              src="/static/message/gantan.png"
              mode="aspectFit"
            ></image>
          </view>
        </view>
        <text class="message-title">{{ item.mallName }}</text>
      </view>
    </view>

    <!-- 底部悬浮按钮 - 仅在编辑模式下显示 -->
    <view v-if="isEditMode" class="floating-buttons">
      <view class="floating-button" @click="handleAll">
        <view class="checkbox-container">
          <view class="checkbox" :class="{ checked: allSelect }">
            <uv-icon
              v-if="allSelect"
              name="checkmark"
              size="24rpx"
              color="#FFFFFF"
            ></uv-icon>
          </view>
        </view>
        <text class="button-text">{{ t('maintenance.monitor.project.indexStatus.all') }}</text>
      </view>
      <view class="floating-button" @click="handleFalseAlarm">
        <text class="button-text text-red">{{ t('TaskNotice.falseAlarm') }}</text>
      </view>
      <view class="floating-button" @click="handleConfirm">
        <text class="button-text text-blue">{{ t('dialog.confirm') }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, watchEffect,watch } from "vue";
import {
  t
} from '@/plugins/index.js'

const props = defineProps({
  messages: {
    type: Array,
    default: () => [],
  },
});
const selectedItems = ref([]);

const emit = defineEmits([
  "itemClick",
  "selectionChange",
  "editModeChange",
  "falseAlarm",
  "confirm",
]);
// 全选标记
const allSelect = ref(false);

const messageList = computed(() => {
  return props.messages || [];
});

const isEditMode = ref(false);

// watch(messageList, (newList) => {
//   if (allSelect.value) {
//     // 自动把新加载的数据加入 selectedItems
//     const selectable = newList.filter(item => item.status !== 'CLOSED');
//     selectedItems.value = selectable.map(item => item.taskId);
//   }
// });
// 监听选择项 - 来改变allSelect 的状态
watchEffect(() => {

  // 计算可选择的消息数量（排除CLOSED状态的消息）
  const selectableMessages = messageList.value.filter(item => item.status !== 'CLOSED');
  if (selectedItems.value.length === selectableMessages.length && selectableMessages.length > 0) {
    allSelect.value = true;
  } else {
    allSelect.value = false;
  }
});

// 根据消息类型获取对应图标 -
// 未读 已读 已处理 -- 目前确认仅两种状态
const getIconByType = (type) => {
  const iconMap = {
    // unread: "/static/message/notice_open.png",
    // read: "/static/message/notice_open.png",
    // processed: "/static/message/notice_open.png",
    // default: "/static/message/notice_now.png",
    true: "/static/message/notice_open.png",
    false: "/static/message/notice_now.png",
  };

  return iconMap[type] || iconMap.default;
};

// 处理消息点击事件
const handleItemClick = (item) => {
  // 在编辑模式下，点击消息项切换选择状态
  if (isEditMode.value) {
    toggleSelect(item);
  } else {
    emit("itemClick", item);
  }
};

// 切换选择状态
const toggleSelect = (item) => {
  if (!isEditMode.value) return;

  // 检查消息状态是否为CLOSED
  if (item.status === 'CLOSED') {
    uni.showToast({
      title: t('TaskNotice.msgHasBeenProcessed'),
      icon: "none",
      duration: 2000
    });
    return;
  }

  const index = selectedItems.value.indexOf(item.taskId);
  if (index === -1) {
    selectedItems.value.push(item.taskId);
  } else {
    selectedItems.value.splice(index, 1);
  }
  emit("selectionChange", selectedItems.value);
};

// 切换编辑模式 兼容强制退出编辑模式
const toggleEditMode = (type) => {
  if (type === "force") {
    isEditMode.value = false;
    selectedItems.value = [];
    return;
  }
  isEditMode.value = !isEditMode.value;

  // 退出编辑模式时清空选择
  if (!isEditMode.value) {
    selectedItems.value = [];
  }

  emit("editModeChange", isEditMode.value);
};

// 处理编辑- 不需要处理全选了 进入编辑模式
const handleAll = () => {
  allSelect.value = !allSelect.value;
  if (allSelect.value) {
    // 只选择状态不是CLOSED的消息
    selectedItems.value = messageList.value
      .filter(item => item.status !== 'CLOSED')
      .map((item) => item.taskId);
  } else {
    selectedItems.value = [];
  }
  if (selectedItems.value.length > 0) {
    emit("selectionChange", selectedItems.value);
  } else {
    allSelect.value && uni.showToast({
      title: t('TaskNotice.plzSelectMsg'),
      icon: "none",
    });
  }
};

// 处理误报操作
const handleFalseAlarm = () => {
  if (selectedItems.value.length > 0) {
    emit("falseAlarm", selectedItems.value);
  } else {
    uni.showToast({
      title: t('TaskNotice.plzSelectMsg'),
      icon: "none",
    });
  }
};

const handleEdit = () => {
  toggleEditMode();
};
// 处理确认操作
const handleConfirm = () => {
  if (selectedItems.value.length > 0) {
    emit("confirm", selectedItems.value);
  } else {
    uni.showToast({
      title: t('TaskNotice.plzSelectMsg'),
      icon: "none",
    });
  }
};

// 暴露方法给父组件
defineExpose({
  handleEdit,
  handleAll,
  handleFalseAlarm,
  handleConfirm,
  toggleEditMode,
  selectedItems,
  isEditMode,
});
</script>

<style lang="scss" scoped>
.message-list {
  width: 100%;
  padding: 0 0rpx;
  position: relative;
}

/* 消息项样式 */
.message-item {
  display: flex;
  padding: 32rpx 0;
  border-bottom: 2rpx solid #eef0f3;
  align-items: center;
  gap: 26rpx;
  &:last-child {
    border-bottom: none;
  }
}

/* 复选框样式 */
.checkbox-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkbox {
  width: 33rpx;
  height: 33rpx;
  border-radius: 50%;
  border: 2rpx solid #cccccc;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkbox.checked {
  background-color: #387cf5;
  border-color: #387cf5;
}

.checkbox.disabled {
  background-color: #f5f5f5;
  border-color: #e0e0e0;
  opacity: 0.5;
  cursor: not-allowed;
}

.checkbox.disabled.checked {
  background-color: #d0d0d0;
  border-color: #d0d0d0;
}

.message-icon {
  width: 96rpx;
  height: 96rpx;
  background: rgba(215, 229, 254, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  .icon-image {
    // width: 43rpx;
    // height: 33rpx;
  }
}

.unread-badge {
  position: absolute;
  top: -6rpx;
  right: -6rpx;
  width: 16rpx;
  height: 16rpx;
  background-color: #ff5151;
  border-radius: 50%;
}

.message-content {
  flex: 1;
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18rpx;
}

.message-time {
  font-weight: 500;
  font-size: 28rpx;
  color: #262626;
}

.status-icon {
  width: 32rpx;
  height: 32rpx;
}

.message-title {
  font-weight: 400;
  font-size: 26rpx;
  color: #90949d;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-desc {
  font-size: 28rpx;
  color: #666666;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* 底部悬浮按钮样式 */
.floating-buttons {
  position: fixed;
  // bottom: calc(var(--window-bottom) + 1rpx);
   bottom: calc(var(--window-bottom) + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  width: 100%;
  height: 82rpx;
  background: #ffffff;
  box-shadow: 0rpx -2rpx 0rpx 0rpx #eef0f3;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  z-index: 100;
  padding: 32rpx 26rpx;
  justify-content: space-between;
  border-top: 1rpx solid #eef0f3;
}

.floating-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
}

.button-text {
  font-size: 28rpx;
  font-weight: 400;
  font-size: 28rpx;
  color: #4e515e;
}
.text-red {
  color: #ff5730;
}
.text-blue {
  color: #387cf5;
}
</style>