<template>
  <div class="common-box" style="margin-top: 20px">
    <TopTitle :messageType="messageType" :title="title" 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 style="width: 100%; height: 100%">
        <!--        <div>-->
        <!--          <div class="line">-->
        <!--            <div style="width: 100%" class="title">-->
        <!--              <h4>文件标题</h4></div>-->
        <!--            <div style="width: 100%" class="title"><h4>文件名称</h4></div>-->
        <!--            <div style="width: 20%" class="title"><h4>操作</h4></div>-->
        <!--          </div>-->
        <!--        </div>-->

        <!--          <el-descriptions v-for="item in dataList">-->
        <!--            <el-descriptions-item label="Username">{{item.fileTitle}}</el-descriptions-item>-->
        <!--            <el-descriptions-item label="Telephone">{{item.fileTitle}}</el-descriptions-item>-->
        <!--            <el-descriptions-item label="Place">Suzhou</el-descriptions-item>-->
        <!--          </el-descriptions>-->

        <el-table :data="dataList" style="width: 100%">
          <el-table-column prop="fileName" label="文件名称"/>
          <el-table-column prop="fileTitle" label="文件标题"/>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button
                @click="downloadFile(scope.row)"
                :loading="scope.row.downloadBtnLoading"
                type="primary"
                size="small"
              >下载
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--        <div v-for="(item, index) in dataList" :key="index" class="line">-->
        <!--          <div class="text-ellipsis" :content="item.fileTitle">-->
        <!--            {{ item.fileTitle }}-->
        <!--          </div>-->
        <!--          <div class="text-ellipsis">{{ item.fileName }}</div>-->
        <!--          <div-->
        <!--            v-show="item.fileUrl != null && item.fileUrl != ''"-->
        <!--            class="message-time download-btn"-->
        <!--          >-->
        <!--
              </div>-->
      </el-scrollbar>
    </div>
    <!--    <MessageDetail ref="messageDetailRef" />-->
  </div>
</template>

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

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

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

onMounted(() => {
  getDataList();
});
const downloadBtnLoading = ref(false);
const downloadFile = async (row: any) => {
  console.log(row)
  row.downloadBtnLoading = true;
  let url = import.meta.env.VITE_APP_UPLOAD_URL + row.fileUrl;
  // 1. 获取资源并转为Blob
  const response = await fetch(url);
  const blob = await response.blob();

  // 2. 创建临时对象URL
  const tempUrl = URL.createObjectURL(blob);

  // 3. 创建隐藏a标签触发下载
  const link = document.createElement("a");
  link.href = tempUrl;
  link.download = row.fileName;
  link.style.display = "none";
  document.body.appendChild(link);
  link.click();

  // 4. 清理内存
  URL.revokeObjectURL(tempUrl);
  document.body.removeChild(link);
  row.downloadBtnLoading.value = false;
};
// const messageDetailRef = ref<InstanceType<typeof MessageDetail>>();
// const showDetail = (item: any) => {
//   messageDetailRef.value?.handleOpenDrawer(item.id);
// };

const getDataList = () => {
  getFileShareNoPageList(searchText.value).then((res) => {
    console.log(res.data);
    dataList.value = res.data ?? [];
    dataList.value.forEach((item) => {
      item.downloadBtnLoading = false
    });
  });
};
</script>

<style lang="scss" scoped>
.text-ellipsis {
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出显示省略号 */
  max-width: 30%; /* 可选：限制最大宽度 */
}

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