<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="top-heder">
      <view class="t-left" @click="getback()">
        <uni-icons type="left" size="18"></uni-icons>
      </view>
      <view class="t-title">
        <text>汇报列表</text>
      </view>
      <view class="t-you" @click="showFilterPopup">
        <text>筛选</text>
      </view>
    </view>

    <!-- 搜索栏 -->
    <view class="searchContent">
      <view class="t-input">
        <uni-icons type="search" color="#BCBCBC" size="22"></uni-icons>
        <input type="text" v-model="queryParams.topicOrUserName" placeholder="请输入汇报主题或汇报人">
      </view>
      <view class="sou" @click="search()">搜索</view>
    </view>


    <!-- 汇报列表 -->
    <view class="report-list">
      <view class="report-item" v-for="(item, index) in reportList" :key="index" @click="goToEditWriteReport(item.id)">
        <image class="avatar" :src="baseImageUrl + '/' + item.avatar"></image>
        <view class="content">
          <view class="top">
            <view class="name">{{ item.userName }}</view>
            <u-tag :text="item.reportTopic" type="primary" size="mini" class="tag"></u-tag>
          </view>
          <view class="report-time">汇报时间：{{ formatDateTimeToMinute(item.reportTime) }}</view>
        </view>
      </view>
    </view>

    <!-- 筛选弹窗 -->
    <u-popup :show="showPopup" @close="closeFilterPopup" mode="right"  closeable="true">
      <view class="filter-popup">
        <view class="popup-header">
          <text>时间筛选</text>
        </view>
        <view class="time-picker">
          <view class="picker-item" @click="showStarTime = true">
            <text class="label">开始时间</text>
            <text :class="['time-text', !queryParams.reportTime[0] && 'placeholder']">
              {{ reportTimeStr[0] || '选择时间' }}
            </text>
            <uni-icons type="calendar" size="16" color="#666"></uni-icons>
          </view>
          <view class="picker-item" @click="showEndTime = true">
            <text class="label">结束时间</text>
            <text :class="['time-text', !queryParams.reportTime[1] && 'placeholder']">
              {{ reportTimeStr[1] || '选择时间' }}
            </text>
            <uni-icons type="calendar" size="16" color="#666"></uni-icons>
          </view>
        </view>
        <view class="popup-footer">
          <u-button type="primary" @click="applyFilter">应用筛选</u-button>
          <u-button type="default" @click="clearTime">清除时间</u-button>
        </view>
      </view>
    </u-popup>

    <u-datetime-picker
        :show="showStarTime"
        v-model="queryParams.reportTime[0]"
        mode="date"
        @cancel="showStarTime = false"
        @confirm="selectStartTime"
    ></u-datetime-picker>

    <u-datetime-picker
        :show="showEndTime"
        v-model="queryParams.reportTime[1]"
        mode="date"
        @cancel="showEndTime = false"
        @confirm="selectEndTime"
    ></u-datetime-picker>

    <!-- 底部按钮 -->
    <view class="bottom-btn">
      <u-button type="primary" shape="circle" class="report-btn" @click="goToWriteReport">填写汇报</u-button>
    </view>
  </view>
</template>

<script>
import request from "@/utils/request";
import {formatDate, formatDateTimeToMinute} from "@/utils/utils";
import config from "@/config";

export default {
  data() {
    return {
      reportList: [],
      showPopup: false, // 控制筛选弹窗显示
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        reportTopic: null,
        reportTime: [],
        createTime: [],
        userName: null,
        servicePackageId: "jiance",
        dictType: 'ins_high_rise',
        topicOrUserName: '',
      },
      showStarTime: false,
      showEndTime: false,
      baseImageUrl: config.baseImageUrl,
      totalPages: 0,
      reportTimeStr: [],
    };
  },
  onLoad() {
    this.getReportList();
  },
  onReachBottom() {
    if (this.queryParams.pageNo >= this.totalPages) {
      uni.showToast({
        title: '没有下一页数据',
        icon: 'none'
      });
    } else {
      this.queryParams.pageNo++;
      this.getReportList();
    }
  },
  methods: {
    // 打开筛选弹窗
    showFilterPopup() {
      this.showPopup = true;
    },
    // 关闭筛选弹窗
    closeFilterPopup() {
      this.showPopup = false;
    },
    // 应用筛选
    applyFilter() {
      if (!this.queryParams.reportTime[0] || !this.queryParams.reportTime[1]) {
        uni.showToast({
          title: '请选择时间',
          icon: 'none'
        });
        return;
      }
      if (this.queryParams.reportTime[0] > this.queryParams.reportTime[1]) {
        uni.showToast({
          title: '开始时间不能大于结束时间',
          icon: 'none'
        });
        return;
      }
      this.closeFilterPopup();
      this.search();
    },
    // 清除时间
    clearTime() {
      this.showPopup = false;
      this.queryParams.reportTime = ['', ''];
      this.reportTimeStr = [];
      this.search();
    },
    formatDateTimeToMinute,
    formatDate,
    // 搜索
    search() {
      this.reportList = [];
      this.queryParams.pageNo = 1;
      this.getReportList();
    },
    // 获取汇报列表
    getReportList() {
      request({
        url: "/work/report/page",
        method: "GET",
        params: this.queryParams,
      }).then((res) => {
        if (this.queryParams.pageNo != 1) {
          this.reportList = this.reportList.concat(res.data.records);
        } else {
          this.reportList = res.data.records;
        }
        let total = res.total;
        this.totalPages = Math.ceil(total / this.queryParams.pageSize);
      });
    },
    // 返回上一页
    getback() {
      uni.navigateBack({delta: 1});
    },
    // 跳转到填写汇报页面
    goToWriteReport() {
      uni.navigateTo({url: "/pages/manage/workReport/workReportAdd?type=add"});
    },
    // 跳转到编辑汇报页面
    goToEditWriteReport(id) {
      uni.navigateTo({url: "/pages/manage/workReport/workReportAdd?type=edit&id=" + id});
    },
    selectStartTime() {
      //加延时器
      this.$nextTick(() => {
        this.queryParams.reportTime[0] = formatDate(this.queryParams.reportTime[0]);
        this.reportTimeStr[0] = this.queryParams.reportTime[0]
        this.showStarTime = false;
      });

    },
    selectEndTime() {
      this.$nextTick(() => {
        this.queryParams.reportTime[1] = formatDate(this.queryParams.reportTime[1]);
        this.reportTimeStr[1] = this.queryParams.reportTime[1]
        this.showEndTime = false;
      });
    },
  },
};
</script>

<style scoped>
.container {
  background-color: #f5f6fa;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

/* 筛选弹窗样式 */
.filter-popup {
  padding: 20rpx;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #eee;
}

.popup-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
}

/* 列表样式 */
.report-list {
  padding: 20rpx;
}

.report-item {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 10rpx; /* 减少上、下内边距 */
  margin-bottom: 16rpx;
  height: 180rpx; /* 调整高度，使整体紧凑 */
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
  border: 1px solid #eaeaea;
}

/* 头像 */
.avatar {
  width: 90rpx;
  height: 90rpx;
//border-radius: 50%; margin-right: 20rpx; border: 2rpx solid #ddd;
}

/* 内容区 */
.content {
  flex: 1;
  display: flex;
  flex-direction: column; /* 改为垂直排列 */
  justify-content: space-between; /* 保证内容上下分布 */
  margin-left: 20rpx;
}

/* 姓名 + 主题 */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0; /* 调整顶部间距为0 */
}

.name {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

/* 主题标签 */
.tag {
  padding: 4rpx 12rpx;
  font-size: 24rpx;
}

/* 汇报时间 */
.report-time {
  font-size: 26rpx;
  color: #999;
  margin-top: 8rpx; /* 保证汇报时间在下面 */
}

/* 底部按钮 */
.bottom-btn {
  position: fixed;
  bottom: 30rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
}

.report-btn {
  font-size: 32rpx;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
}


.top-heder {
  width: 100%;
  height: 68px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 5px 15px;
  margin-top: 2rem;
}

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

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

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

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


.time-picker {
  display: flex;
  flex-direction: column; /* 添加：使子元素垂直排列 */
  align-items: center;
  padding: 20rpx;
  background: #fff;
  margin: 20rpx 0;
}

.picker-item {
  flex: 1;
  display: block; /* 修改：改为块级元素 */
  padding: 20rpx;
  background: #f8f8f8;
  border-radius: 12rpx;
  margin: 10rpx 0; /* 添加：增加上下间距 */
}

.split-line {
  padding: 0 10rpx;
  color: #999;
}

.label {
  font-size: 26rpx;
  color: #666;
  margin-right: 15rpx;
}

.time-text {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}

.placeholder {
  color: #999;
}

uni-icons {
  margin-left: 10rpx;
}


/* 添加清除按钮样式 */
.clear-btn {
  color: #007AFF;
  font-size: 26rpx;
  margin-left: 20rpx;
  padding: 10rpx 20rpx;
  border: 1rpx solid #007AFF;
  border-radius: 8rpx;
}
</style>
