<!-- 默认复制 -->

<template>
  <view class="content">
    <u-loading-page style="z-index: 999" bg-color="#e8e8e8" loading-mode="semicircle" :loading="isLoading"></u-loading-page>
    <view class="top-heder">
      <view class="t-left" @click="getback()">
        <uni-icons type="left" size="18" color="white"></uni-icons>
      </view>
      <view class="t-title">
        <text>资料管理</text>
      </view>
      <view class="t-you"></view>
    </view>
    <!--    <headersVue titles="资料管理" style="position: static !important;">-->
    <!--      <u-icon name="arrow-left" color="#fff" size="18"></u-icon>-->
    <!--    </headersVue>-->

    <view class="searchContent">
      <view class="t-input">
        <uni-icons type="search" color="#BCBCBC" size="22"></uni-icons>
        <input type="text" v-model="fileName" placeholder="请输入文件名称.....">
      </view>
      <view class="sou" @click="getlist()">搜索</view>
    </view>

    <view class="cont">
      <view class="c-box" @click="addwenjian()">
        <!-- <view class="">
          <image src="../../static/imgs/wenjianjia.png" mode=""></image>
        </view> -->
        <view style="width: 100%; display: flex;justify-content: center;">
          <text> + 新增文件</text>
        </view>
      </view>
      <view class="bjimg" v-if="arrlist == ''">
        <image src="http://www.nuoyunr.com/lananRsc/detection/qs.png" mode=""></image>
      </view>
      <view class="wrap-box">

        <view class="w-box" v-for="(item,index) in arrlist" :key="index">
          <view class=" wimg" v-if="item.type=='1'" @click="enrtryFile(item.id)">
            <image src="../../static/imgs/wenjianjia.png" mode=""></image>
          </view>
          <view class="wimg" v-else>
            <image src="../../static/imgs/wenjian.png" mode="" v-if="!item.isImage"></image>
            <image :src="imageUrl + item.filePath" style="width: 100px;height: 100px;" v-else></image>
          </view>
          <view class="file-name">{{ item.fileName }}</view>
          <view class="" v-if="item.warnTime">{{ item.warnTime }}</view>
          <view class="" v-if="!item.warnTime" style=" visibility: hidden;">{{ '1' }}</view>
<!--          <view class="" v-if="item.count">文件数:{{ item.count }}</view>-->
          <view class="" v-if="!item.count" style=" visibility: hidden;">{{ '1' }}</view>
          <view class="bsd-dis">
            <view class="bianji" v-if="item.type == '2'" @click="viewFile(item.filePath)">预览</view>
            <view class="bianji" @click="editFile(item.id)">编辑</view>
            <view class="bianji" @click="showHistory(item.id)">历史</view>
            <view class="sanchu" @click="delFile(item.id)">删除</view>
          </view>
        </view>

      </view>


    </view>


    <u-popup :show="isShow" mode="bottom" @close="isShow = false">
      <view>
        <!-- 弹出层 -->
        <view v-if="isShow" class="popup">
          <view class="popup-content">
            <view class="popup-title">修改记录</view>

            <!-- 步骤条 -->
            <view class="steps" v-if="drawerData.length > 0">
              <view v-for="(item, index) in drawerData" :key="index" class="step">
                <view class="step-index">{{ index + 1 }}</view>
                <view class="step-content">
                  <text class="step-file-name">📄 文件名称：{{ item.fileName }}</text>
                  <text class="step-time">🕒 修改时间：{{ formatDate(item.createTime) }}</text>
                  <text class="step-time">🕒 提醒时间：{{ item.warnTime != null ? formatDate(item.warnTime) : '' }}</text>
                  <text class="step-download" @click="viewFile(item.filePath)" v-if="item.type == '2'">📂 预览文件</text>
                </view>
              </view>
            </view>
            <view v-else>
              暂无历史记录
            </view>

            <!--            <button class="close-btn" @click="isShow = false">关闭</button>-->
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import config from '@/config'
import request from '../../utils/request';
import {formatDate} from "@/utils/utils";
import headersVue from "@/components/header/headers.vue";

export default {
  components: {headersVue},
  data() {
    return {
      arrlist: [],
      fileId: null,
      pageNum: 1,//第几页
      pageSize: 20,//一页多少张
      totalPages: 0,//总数
      nowFile: {},
      fileName: null,
      isShow: false,
      drawerData: [],
      isLoading: false,
      imageUrl: config.baseImageUrl + '/',
    }
  },

  onLoad(data) {
    console.log('传递进来的数据', data)
    if (data.folderId) {
      this.fileId = data.folderId
    }
    this.getlist()
  },
  onShow() {
    this.getlist()

  },
  onBackPress(options) {
    // 点击虚拟键或者侧滑的时候触发（不允许返回）
    if (options.from === 'backbutton') {
      this.getback()
      return true
    }
    // 否则则允许返回
    return false;
  },

  onReachBottom() {
    // if (this.pageNum >= this.totalPages) {
    //   uni.showToast({
    //     title: '没有下一页数据',
    //     icon: 'none'
    //   })
    //
    // } else {
    //   this.pageNum++
    //   this.getlist()
    // }
  },
  methods: {
    formatDate,
    async getlist(flag) {
      this.isLoading = true
      let data = {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        fatherId: this.fileId,
        fileName: this.fileName,
      }
      if (flag) {
        data.fileName = null
      }
      let res = await request({
        url: '/inspectionFile/inspectionFile/listByPermission',
        method: 'get',
        data: data
      })
      if (this.pageNum != 1) {
        this.arrlist = this.arrlist.concat(res.data)
      } else {
        this.arrlist = res.data
      }
      let total = res.total
      this.totalPages = Math.ceil(total / this.pageSize);
      this.isLoading = false
      // this.getCountByDirectory()
    },
    showHistory(id) {
      this.isShow = true
      this.isShow = true
      request({
        url: '/system/fileRecord/get/' + id,
        method: 'get',
      }).then(res => {
        if (res && res.data) {
          this.drawerData = res.data
        }
      })
    },
    getCountByDirectory() {
      if (this.arrlist && this.arrlist.length > 0) {
        const ids = this.arrlist.filter(item => (item.type === '1' && !item.count)).map(item => item.id)
        if (ids && ids.length > 0) {
          request({
            url: '/inspectionFile/inspectionFile/getCountByIds?ids=' + ids,
            method: 'get',
          }).then(res => {
            if (res && res.data) {
              const map = new Map(Object.entries(res.data))
              this.arrlist.filter(item => (item.type === '1' && !item.count)).forEach(item => {
                this.$set(item, 'count', map.get(item.id + ''))
              })
            }
          })
        }
      }
    },
    async getback() {
      if (!this.fileId) {
        uni.navigateBack()
      } else {
        let res = await request({
          url: '/inspectionFile/inspectionFile/' + this.fileId,
          method: 'get',
        })
        this.nowFile = res.data
        this.arrlist = []
        this.pageNum = 1
        this.fileId = this.nowFile.fatherId
        this.getlist()


      }

    },
    addwenjian() {
      uni.navigateTo({
        url: '/pages/manage/deviceAdd?fileId=' + this.fileId + '&type=add'
      })
    },
    enrtryFile(fileId) {
      this.fileId = fileId
      this.arrlist = []
      this.pageNum = 1
      this.getlist(true)
    },
    viewFile(filePath) {
      this.isLoading = true;

      uni.downloadFile({
        url: this.$baseImageUrl + '/' + filePath,
        success: (res) => {  // 使用箭头函数
          var filePath = res.tempFilePath;
          this.isLoading = false;

          uni.openDocument({
            filePath: filePath,
            showMenu: true,
            success: (res) => {
              console.log("文件打开成功");
            },
            fail: (err) => {
              console.error("文件打开失败", err);
              uni.showToast({
                title: '文件打开失败',
                icon: 'none'
              });
            }
          });
        },
        fail: (err) => {
          console.error("文件下载失败", err);
        }
      });
    },
    editFile(fileId) {
      uni.navigateTo({
        url: '/pages/manage/deviceAdd?fileId=' + fileId + '&type=edit'
      })
    },
    delFile(fileId) {
      let that = this
      uni.showModal({
        title: '确认',
        content: '是否确认删除',
        success: function (res) {
          if (res.confirm) {
            request({
              url: '/inspectionFile/inspectionFile/del/' + fileId,
              method: 'post'
            }).then(res => {
              that.getlist()
            })
          }
        }
      });

    },
    gostaff() {
      uni.navigateTo({
        url: '/pages/manage/staffManage'
      })
    },
    goinformation() {
      uni.navigateTo({
        url: '/pages/manage/informationManage'
      })
    },
    godevice() {
      uni.navigateTo({
        url: '/pages/manage/deviceManage'
      })
    },


  },


}
</script>

<style scoped lang="scss">
.content {
  width: 100%;
  height: calc(100vh);
  background-color: white;
  box-sizing: border-box;
  // padding-top: 45px;
}

.top-icon {
  margin-bottom: 45px;
}

.q-fab {
  position: fixed;
  bottom: 50px;
  right: 15px;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  overflow: hidden;

  image {
    width: 100%;
    height: 100%;
  }
}

.fab-z1 {
  position: fixed;
  bottom: 115px;
  right: 15px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;

  image {
    width: 100%;
    height: 100%;
  }
}

.fab-z2 {
  position: fixed;
  bottom: 50px;
  right: 80px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;

  image {
    width: 100%;
    height: 100%;
  }
}

.c-tap {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  padding: 15px;
  display: flex;
  background-color: white;
  align-items: center;
}

.c-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.c-title {
  font-size: 18px;
  font-weight: bold
}

.cont {
  width: 100%;
  padding: 15px;
  padding-top: 0px;
  box-sizing: border-box;
  background-color: white;

}

.hongdian {
  width: 15px;
  height: 15px;
  background-color: crimson;
  border-radius: 50%;
  overflow: hidden;
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 9999;
}

.c-box {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  background-color: #327DFB;
  margin-top: 10px;
  border-radius: 10px;
  display: flex;
  color: white;
  align-items: flex-start;

  font-size: 18px;
  font-weight: bold;

  image {
    width: 30px;
    height: 30px;
    margin-right: 10px;
  }
}

.c-b-top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.t-left {
  width: 40%;
  height: 100px;
  border-radius: 7px;
  margin-right: 10px;
  overflow: hidden;

  image {
    width: 100%;
    height: 100%;
  }

}

.t-right {
  width: 60%;
}

.t-tilte {
  font-size: 20px;
  font-weight: bold;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

}

.tw-tilte {
  width: 100%;
  text-align: right;
  font-size: 16px;
  font-weight: bold;
  color: #5e5e5e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

}

.t-zi {
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;

}

.bjimg {
  width: 255px;
  height: 236px;
  margin: 0px auto;
  margin-top: 100px;

  image {
    width: 100%;
    height: 100%;
  }
}

.c-b-bom {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 5px;
}

.b-left {
  color: #0D2E8D;
  font-size: 14px;
}

.b-right {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.z-lv {
  display: flex;
  align-items: center;
  color: #0D2E8D;
  font-size: 15px;
  margin-right: 10px;
}

.y-hong {
  display: flex;
  align-items: center;
  color: #fa3534;
  font-size: 15px;
  margin-right: 15px;
}

.z-img {
  width: 20px;
  height: 15px;

  image {
    width: 100%;
    height: 100%;
  }

  margin-right: 2px;
}

.tap-box {
  width: 30%;
  text-align: center;
}

.gang {
  height: 4px;
  background: #0D2E8D;
  width: 80%;
  margin: 0px auto;
}

.lan {
  color: #0D2E8D;
}

.top-heder {
  width: 100%;
  height: 98px;
  //background: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 5px 15px;
  color: white;
  //margin-top: 2rem;
  background: linear-gradient(180deg, #054DF3 0%, #55A3FF 100%);
}

.t-title {
  font-size: 17px;
  font-weight: bold;
  color: white;
}

.t-left {
  width: 20%;
  height: 20px;
}

.t-you {
  width: 20%;
  height: 20px;
}

.wrap-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  flex-wrap: wrap;
}

.w-box {
  width: 48%;
  background-color: #F7F8FC;
  margin-top: 10px;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 10px;
  text-align: center;

}

.wimg {
  width: 100%;
  height: 120px;

  image {
    width: 100%;
    height: 100%;
  }
}

.bsd-dis {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-around;
  margin-top: 10px;
}

.bianji {
  width: 50px;
  height: 24px;
  color: #0D2E8D;

  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.sanchu {
  width: 50px;
  height: 24px;
  color: #FF571A;

  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.t-input {
  width: 75%;
  height: 36px;
  background: #F0F0F0;
  border-radius: 50px;
  box-sizing: border-box;
  padding: 0 15px;
  display: flex;
  align-items: center;
}

.sou {
  width: 10%;
  margin-left: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.searchContent {
  display: flex;
  justify-content: center;
  margin-top: 20rpx;
}

/* 弹出层背景 */
.popup {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

/* 弹出层内容 */
.popup-content {
  width: 90%;
  background: #fff;
  border-radius: 10px 10px 0 0;
  padding: 20px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

/* 标题 */
.popup-title {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 15px;
}

/* 步骤条 */
.steps {
  padding: 10px;
}

/* 单个步骤 */
.step {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15px;
}

/* 序号样式 */
.step-index {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  background: #007aff;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  margin-right: 10px;
}

/* 步骤内容 */
.step-content {
  flex: 1;
  background: #f8f8f8;
  padding: 10px;
  border-radius: 5px;
}

/* 文字样式 */
.step-file-name {
  font-size: 16px;
  font-weight: bold;
  display: block;
}

.step-time {
  font-size: 14px;
  color: #666;
  display: block;
  margin: 5px 0;
}

.step-download {
  font-size: 14px;
  color: #007aff;
  text-decoration: underline;
  cursor: pointer;
}

/* 关闭按钮 */
.close-btn {
  width: 100%;
  padding: 10px;
  background: #007aff;
  color: white;
  text-align: center;
  border-radius: 5px;
  margin-top: 10px;
}

.file-name {
  width: 100%; /* 重要：需要固定宽度 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 5px; /* 根据实际布局调整 */
}
</style>