<template>
  <div class="common-box" style="margin-top: 20px">

    <TopTitle :messageType="messageType" :title="title" v-if="messageType === '2'"
              :canCreateMessage="userStore.user.canCreateMessage1" icon="laba"/>
    <TopTitle :messageType="messageType" :title="title" v-else-if="messageType === '0'"
              :canCreateMessage="userStore.user.canCreateMessage2" icon="laba"/>
    <div>
      <el-input
        v-model="searchText"
        class="input-with-select"
        clearable
        placeholder="输入标题可以搜索..."
        @clear="getDataList"
      >
        <template #append>
          <el-button :icon="Search" @click="getDataList" />
        </template>
      </el-input>
    </div>
    <div class="list-box">
      <el-scrollbar>
        <div
          v-for="(item, index) in dataList"
          :key="index"
          class="line"
          @click="showDetail(item)"
        >
          <div class="title">{{ item.title }}</div>
          <div class="date">{{ item.created }}</div>
        </div>
      </el-scrollbar>
    </div>
    <MessageDetail ref="messageDetailRef" />
  </div>
</template>

<script lang="ts" setup>
import { getUserMessageNoPageList } from "@/api/message";
import MessageDetail from "@/views/messages/MessageDetail.vue";
import { Search } from "@element-plus/icons-vue";
import {useUserStore} from "@/store";

const userStore = useUserStore();
const props = defineProps({
  // 消息类型 0 系统公告 1 工位消息 2-具体某些人员消息
  messageType: {
    type: String,
    default: "0",
  },
  canCreateMessage: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "个人消息",
  },
});

const searchText = ref("");
const dataList = ref<any[]>();

onMounted(() => {
  getDataList();
});

const messageDetailRef = ref<InstanceType<typeof MessageDetail>>();
const showDetail = (item: any) => {
  messageDetailRef.value?.handleOpenDrawer(item.id);
};

const getDataList = () => {
  getUserMessageNoPageList(props.messageType, searchText.value).then((res) => {
    dataList.value = res.data ?? [];
  });
};
</script>

<style lang="scss" scoped>
.list-box {
  margin-top: 5px;
  height: calc(100vh - 780px);
  padding: 0 20px;

  .line {
    border-bottom: 1px solid #eee;
    line-height: 40px;
    display: flex;
    justify-content: space-between;

    .title {
      font-size: 16px;
      color: #1a1a1a;
      text-align: left;
      white-space: nowrap;
      width: 73%;
      overflow: hidden; /*超出宽度部分隐藏*/
      text-overflow: ellipsis; /*超出部分以点号代替*/
    }

    .date {
      font-size: 14px;
      color: #888888;
      text-align: right;
      width: 35%;
      flex-shrink: 0;
    }
  }
}
</style>
