<!--聊天记录-列表-->
<template>
  <view class="main_box">

    <view class="main_section">
      <scroll-view
          class="section_1"
          scroll-y="true"
          :lower-threshold="lowerThreshold"
          @scrolltolower="loadMoreData"
          style="height: 80vh;"
      >
        <view class="ul">
          <view class="time_section">2024-05-15</view>

          <view class="li">
            <view class="item left_item">
              <view class="text_box">你好,aaaaaaaaaaaaaaaaaaaaaaaaa1111111111111111111@@@@@@@@@@@@@@@@@</view>
            </view>
            <view class="item"></view>
          </view>

          <view class="li">
            <view class="item left_item">
              <view class="text_box">你好,是呢么时间可以到课是呢么时间可以到课是呢么时间可以到课</view>
            </view>
            <view class="item"></view>
          </view>

          <view class="li">
            <view class="item"></view>
            <view class="item right_item">
              <view class="text_box">间可以到课</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="input_section">
      <view class="left_box">
        <input class="input" type="text" placeholder="请输入">
      </view>
      <view class="right_box">
        <image class="send_img" src="@/static/images/common/fa_song.png"></image>
      </view>
    </view>
  </view>
</template>

<script>
import memberApi from '@/api/member.js';
import AQUplodeImgMulti from '@/components/AQ/AQUplodeImgMulti';
import AQTabber from "@/components/AQ/AQTabber"


export default {
  components: {
    AQTabber,
    AQUplodeImgMulti,
  },
  data() {
    return {
      loading:false,//加载状态
      lowerThreshold: 100,//距离底部多远触发
      isReachedBottom: false,//防止重复加载|true=不可加载|false=可加载

      //筛选条件
      filteredData:{
        page:1,//当前页码
        limit:10,//每页返回数据条数
        total:10,//数据总条数
        status: '',//1=未提交,2=已提交,3=已批改
      },

      formData: {
        images_arr: [],
        images: '',
        content: '',
        mailbox: '',
      },
    }
  },
  onLoad() {
  },
  //下拉刷新
  async onPullDownRefresh() {
    //加载更多(下一页)
    await this.loadMoreData()
  },
  methods: {

    //初始化
    async init(){
      await this.getList();
    },

    //加载更多(下一页)
    loadMoreData() {
      //判断是否加载
      if (!this.isReachedBottom) {
        this.isReachedBottom = true;//设置为不可请求状态
        this.getList();
      }
    },
    //重置为第一页
    async resetFilteredData() {
      this.isReachedBottom = false; // 重置状态，以便下次触发加载更多

      this.filteredData.page = 1//当前页码
      this.filteredData.limit = 10//每页返回数据条数
      this.filteredData.total = 10//数据总条数
    },

    //获取作业列表
    async getList(){
      this.loading = true

      let data = {...this.filteredData}

      //判断是否还有数据
      if(this.filteredData.page * this.filteredData.limit > this.filteredData.total){
        this.loading = false
        uni.showToast({
          title: '暂无更多',
          icon: 'none'
        })
        return
      }

      if(data.page == 1){
        this.tableList = []
      }

      let res = await memberApi.assignmentsList(data)
      this.loading = false
      this.isReachedBottom = false;
      if (res.code != 1){
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        return
      }

      this.tableList = this.tableList.concat(res.data.data); // 使用 concat 方法 将新数据追加到数组中

      console.log('列表',this.tableList)
      this.filteredData.total = res.data.total
      this.filteredData.page++
    },


    //######AQ上传文件组件相关######
    // 上传文件回调
    AQUploadSuccess(res) {
      console.log('接收AQ上传回调xxx1', res)
      // 使用 split 方法分割字符串
      let _inputValue = []
      if (res.filePathArr.length) {
        _inputValue = res.filePathArr
      }
      this.formData[res.inputName] = _inputValue
      // console.log('接收AQ上传回调xxx1',res)
      // console.log('接收AQ上传回调xxx2',this.formData.member_store_certification_arr)
    },

    async submitForm() {
      let data = {...this.formData}
      data.images = data.images_arr.join(',')
      if (!data.content) {
        //反馈内容为必填项
        uni.showToast({
          title: '反馈内容为必填项',
          icon: 'none'
        })
        return
      }
      let res = await memberApi.setFeedback(data)
      if (res.code != 1) {
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
      } else {
        uni.showToast({
          title: '提交成功',
          icon: 'none'
        })
        //延迟1s执行
        setTimeout(() => {
          this.$util.openHomeView();
        }, 1000);
      }
    },

  }
}
</script>

<style lang="less" scoped>
	.main_box {
		background: #292929;
	}

	//自定义导航栏
	.navbar_section {
		display: flex;
		justify-content: center;
		align-items: center;
		background: #29d3b4;

		.title {
			padding: 20rpx 0;
			font-size: 30rpx;
			color: #315d55;
		}
	}

	.main_section {
		min-height: 100vh;
		background: #292929 100%;
		padding: 0 0rpx;
		padding-top: 32rpx;
		padding-bottom: 150rpx;
		font-size: 28rpx;
		display: flex;
		flex-direction: column;
		gap: 20rpx;

		.section {
			background-color: #434544;
			padding: 40rpx 40rpx;
		}

    .section_1{
      color: #FFFFFF;
      font-size: 28rpx;
      padding: 0 24rpx;
      display: flex;
      flex-direction: column;
      gap: 40rpx;
      .ul{
        .time_section{
          text-align: center;
          font-size: 28rpx;
          color: #989898;
        }
        .li{
          margin: 40rpx 0;
          display: flex;
          justify-content: space-between;
          .item{
            max-width: 70%;
            padding: 32rpx;
            border-radius: 32rpx;
            word-wrap: break-word; /* 允许长单词或 URL 换行 */
            word-break: break-all; /* 强制所有字符换行 */
            .text_box{}
          }
          .left_item{
            background-color: #f4f6f9;
            color: #343434;
          }
          .right_item{
            background-color: #1684fc;
            color: #fff;
          }
        }
      }
    }

	}

  //输入框板块
  .input_section{
    width: 100%;
    position: fixed;
    bottom: 0;

    padding: 50rpx 50rpx;
    display: flex;
    justify-content:space-between;
    align-items: center;
    .left_box{
      width: 70%;
      .input{
        background-color: #f4f6f9;
        height: 88rpx;
        padding: 28rpx;
        font-size: 28rpx;
        border-radius: 32rpx;

        width: 532rpx;
        color: #292929;
        font-size: 28rpx;
      }
    }
    .right_box{
      border-radius: 50%;
      background-color: #a2cefe;
      width: 88rpx;
      height: 88rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      .send_img{
        width: 36rpx;
        height: 36rpx;
      }
    }

  }

	.describe {
		color: #999999;
		padding-left: 30rpx;
	}
</style>