<!--作业列表-->
<template>
  <view class="main_section">

    <scroll-view
        class="section_3"
        scroll-y="true"
        :lower-threshold="lowerThreshold"
        @scrolltolower="loadMoreData"
        style="height: 80vh;"
    >
      <view class="ul">
        <view class="li" v-for="(v,k) in tableList" :key="k" @click="openViewWorkDetails(v)">
          <view class="left_box">
            <view class="date_box">
              <text>{{v.wc_count}}</text>
              <text>/</text>
              <text>{{v.student_count}}</text>
            </view>
            <view class="ratio">
              完成率：{{v.rate}}%
            </view>
          </view>
          <view class="center_box">
            <view>班级：{{v.class_name}}</view>
            <view>时间：{{v.send_time}}</view>
            <view>课程：{{v.courses_name}}
            </view>
          </view>
          <view class="right_box">
            <!--            <view class="tag" style="background:#fad24e;">上课中</view>-->
            <view class="tag" v-if="v.dpg_count == 0" style="background:#1cd188;">待批改</view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 底部发布作业按钮 -->
    <view class="publish-btn" @click="openPublishPopup">
      <text class="btn-text">发布作业</text>
    </view>

    <!-- 底部导航-->
    <AQTabber/>

    <!-- 发布作业弹窗 -->
    <uni-popup ref="publishPopup" type="center">
      <view class="popup-content">
        <view class="popup-title">发布作业</view>
        
        <view class="form-item">
          <text class="form-label">类型</text>
          <input class="form-input" type="number" v-model="formData.type" placeholder="请输入类型" />
        </view>
        
        <view class="form-item">
          <text class="form-label">班级ID</text>
          <input class="form-input" type="number" v-model="formData.class_id" placeholder="请输入班级ID" />
        </view>
        
        <view class="form-item">
          <text class="form-label">课程ID</text>
          <input class="form-input" type="number" v-model="formData.course_id" placeholder="请输入课程ID" />
        </view>
        
        <view class="form-item">
          <text class="form-label">教师ID</text>
          <input class="form-input" type="number" v-model="formData.personnel_id" placeholder="请输入教师ID" />
        </view>
        
        <view class="form-item">
          <text class="form-label">学生ID</text>
          <input class="form-input" type="number" v-model="formData.student_id" placeholder="请输入学生ID" />
        </view>
        
        <view class="form-item">
          <text class="form-label">作业描述</text>
          <textarea class="form-textarea" v-model="formData.description" placeholder="请输入作业描述" />
        </view>
        
        <view class="form-item">
          <text class="form-label">内容类型</text>
          <picker class="form-picker" :value="contentTypeIndex" :range="contentTypes" @change="contentTypeChange">
            <view class="picker-text">{{contentTypes[contentTypeIndex]}}</view>
          </picker>
        </view>
        
        <!-- 根据内容类型显示不同的上传控件 -->
        <!-- 图片类型 -->
        <view class="form-item" v-if="formData.content_type === '1'">
          <text class="form-label">上传图片</text>
          <view class="upload-container">
            <!-- 已上传图片预览 -->
            <view class="image-preview" v-if="uploadedFiles.image">
              <image class="preview-image" :src="uploadedFiles.image" mode="aspectFill"></image>
              <view class="delete-btn" @click="deleteFile('image')">
                <text class="delete-icon">×</text>
              </view>
            </view>
            <!-- 上传按钮 -->
            <view class="upload-btn" v-if="!uploadedFiles.image" @click="chooseFile('image')">
              <text class="upload-icon">+</text>
              <text class="upload-text">上传图片</text>
            </view>
          </view>
        </view>
        
        <!-- 视频类型 -->
        <view class="form-item" v-if="formData.content_type === '2'">
          <text class="form-label">上传视频</text>
          <view class="upload-container">
            <!-- 已上传视频预览 -->
            <view class="video-preview" v-if="uploadedFiles.video">
              <video class="preview-video" :src="uploadedFiles.video" controls></video>
              <view class="delete-btn" @click="deleteFile('video')">
                <text class="delete-icon">×</text>
              </view>
            </view>
            <!-- 上传按钮 -->
            <view class="upload-btn" v-if="!uploadedFiles.video" @click="chooseFile('video')">
              <text class="upload-icon">+</text>
              <text class="upload-text">上传视频</text>
            </view>
          </view>
        </view>
        
        <!-- 文本类型 -->
        <view class="form-item" v-if="formData.content_type === '3'">
          <text class="form-label">内容文本</text>
          <textarea class="form-textarea" v-model="formData.content_text" placeholder="请输入内容文本" />
        </view>
        
        <view class="form-buttons">
          <button class="btn-cancel" @click="closePublishPopup">取消</button>
          <button class="btn-submit" @click="submitForm">提交</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

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


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

      //筛选条件
      filteredData:{
        page:1,//当前页码
        limit:10,//每页返回数据条数
        total:10,//数据总条数
      },
      tableList:[],//数据列表
      
      // 发布作业表单数据
      formData: {
        type: '',
        class_id: '',
        course_id: '',
        personnel_id: '',
        student_id: '',
        description: '',
        content_type: '1',
        content_text: '',
        status: '1'
      },
      // 内容类型选择器
      contentTypes: ['图片', '视频', '文本'],
      contentTypeIndex: 0,
      
      // 上传的文件
      uploadedFiles: {
        image: '',
        video: ''
      },
      
      // 模拟数据
      mockData: [
        {
          id: 1,
          wc_count: 15,
          student_count: 20,
          rate: 75,
          class_name: '高三一班',
          send_time: '2023-05-12',
          courses_name: '高等数学',
          dpg_count: 0
        },
        {
          id: 2,
          wc_count: 18,
          student_count: 22,
          rate: 82,
          class_name: '高三二班',
          send_time: '2023-05-13',
          courses_name: '物理',
          dpg_count: 5
        },
        {
          id: 3,
          wc_count: 10,
          student_count: 25,
          rate: 40,
          class_name: '高三三班',
          send_time: '2023-05-14',
          courses_name: '化学',
          dpg_count: 0
        },
        {
          id: 4,
          wc_count: 22,
          student_count: 24,
          rate: 92,
          class_name: '高三四班',
          send_time: '2023-05-15',
          courses_name: '英语',
          dpg_count: 3
        },
        {
          id: 5,
          wc_count: 16,
          student_count: 20,
          rate: 80,
          class_name: '高三五班',
          send_time: '2023-05-16',
          courses_name: '语文',
          dpg_count: 0
        }
      ]
    }
  },
  onLoad() {},
  onShow() {
    this.init()
  },
  methods: {
    async init(){
      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 - 1) * this.filteredData.limit >= this.filteredData.total) {
        this.loading = false
        uni.showToast({
          title: '暂无更多',
          icon: 'none'
        })
        return
      }

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

      // 使用模拟数据
      setTimeout(() => {
        this.loading = false
        this.isReachedBottom = false
        
        // 模拟分页
        const startIndex = (this.filteredData.page - 1) * this.filteredData.limit
        const endIndex = startIndex + this.filteredData.limit
        const pageData = this.mockData.slice(startIndex, endIndex)
        
        this.tableList = this.tableList.concat(pageData)
        this.filteredData.total = this.mockData.length
        this.filteredData.page++
      }, 500)
      
      // 注释掉原接口调用
      /*
      let res = await memberApi.jsGetAssignmentsList(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++
      */
    },

    //跳转页面-作业详情
    openViewWorkDetails(item){
      let id = item.id
      this.$navigateTo({
        url: `/pages/coach/student/work_details?id=${id}`
      })
    },
    
    // 打开发布作业弹窗
    openPublishPopup() {
      this.$refs.publishPopup.open()
    },
    
    // 关闭发布作业弹窗
    closePublishPopup() {
      this.$refs.publishPopup.close()
    },
    
    // 内容类型选择器变化
    contentTypeChange(e) {
      this.contentTypeIndex = e.detail.value
      this.formData.content_type = String(parseInt(e.detail.value) + 1)
    },
    
    // 选择文件（图片或视频）
    chooseFile(type) {
      if (type === 'image') {
        // 选择图片
        uni.chooseImage({
          count: 1,
          sizeType: ['compressed'],
          sourceType: ['album', 'camera'],
          success: (res) => {
            // 模拟上传
            uni.showLoading({
              title: '上传中...'
            })
            
            setTimeout(() => {
              uni.hideLoading()
              this.uploadedFiles.image = res.tempFilePaths[0]
              
              // 模拟上传成功
              uni.showToast({
                title: '图片上传成功',
                icon: 'success'
              })
              
              // 设置内容文本为图片路径
              this.formData.content_text = res.tempFilePaths[0]
            }, 1000)
          }
        })
      } else if (type === 'video') {
        // 选择视频
        uni.chooseVideo({
          count: 1,
          sourceType: ['album', 'camera'],
          maxDuration: 60,
          camera: 'back',
          success: (res) => {
            // 模拟上传
            uni.showLoading({
              title: '上传中...'
            })
            
            setTimeout(() => {
              uni.hideLoading()
              this.uploadedFiles.video = res.tempFilePath
              
              // 模拟上传成功
              uni.showToast({
                title: '视频上传成功',
                icon: 'success'
              })
              
              // 设置内容文本为视频路径
              this.formData.content_text = res.tempFilePath
            }, 1500)
          }
        })
      }
    },
    
    // 删除已上传的文件
    deleteFile(type) {
      if (type === 'image') {
        this.uploadedFiles.image = ''
        this.formData.content_text = ''
      } else if (type === 'video') {
        this.uploadedFiles.video = ''
        this.formData.content_text = ''
      }
    },
    
    // 预览文件
    previewFile(type) {
      if (type === 'image' && this.uploadedFiles.image) {
        uni.previewImage({
          urls: [this.uploadedFiles.image]
        })
      }
      // 视频不需要额外预览，因为已经有视频播放器
    },
    
    // 提交表单
    submitForm() {
      // 检查必填项
      if (!this.formData.class_id) {
        uni.showToast({
          title: '请输入班级ID',
          icon: 'none'
        })
        return
      }
      
      if (!this.formData.course_id) {
        uni.showToast({
          title: '请输入课程ID',
          icon: 'none'
        })
        return
      }
      
      if (!this.formData.description) {
        uni.showToast({
          title: '请输入作业描述',
          icon: 'none'
        })
        return
      }
      
      // 检查内容
      if (this.formData.content_type === '1' && !this.uploadedFiles.image) {
        uni.showToast({
          title: '请上传图片',
          icon: 'none'
        })
        return
      }
      
      if (this.formData.content_type === '2' && !this.uploadedFiles.video) {
        uni.showToast({
          title: '请上传视频',
          icon: 'none'
        })
        return
      }
      
      if (this.formData.content_type === '3' && !this.formData.content_text) {
        uni.showToast({
          title: '请输入内容文本',
          icon: 'none'
        })
        return
      }
      
      console.log('提交表单数据:', this.formData)
      
      // 模拟提交成功
      uni.showToast({
        title: '发布成功',
        icon: 'success'
      })
      
      // 关闭弹窗
      this.closePublishPopup()
      
      // 重置表单
      this.formData = {
        type: '',
        class_id: '',
        course_id: '',
        personnel_id: '',
        student_id: '',
        description: '',
        content_type: '1',
        content_text: '',
        status: '1'
      }
      this.contentTypeIndex = 0
      this.uploadedFiles = {
        image: '',
        video: ''
      }
    }
  }
}
</script>

<style lang="less" scoped>

.main_section{
  min-height: 100vh;
  background: #292929 100%;
  padding: 0 24rpx;
  padding-top: 40rpx;
  padding-bottom: 150rpx;
  font-size: 28rpx;

  .section_3{
    margin-top: 36rpx;
    color: #fff;
    font-size: 24rpx;
    .title_box{
      display: flex;
      flex-direction: column;
      .top_box{
        display: flex;
        justify-content: space-between;
        align-items: center;
        text{
          font-size: 30rpx;
        }
      }
      .line{
        width: 90rpx;
        height: 2px;
        background: #29D3B4;
      }
    }
    .ul{
      margin-top: 30rpx;
      display: flex;
      flex-direction: column;
      gap: 20rpx;
      .li{
        position: relative;
        border-radius: 22rpx;
        background: #434544 100%;
        padding: 14rpx 0;
        display: flex;
        align-items: center;
        .left_box{
          margin-left: 28rpx;
          width: 146rpx;
          display: flex;
          flex-direction: column;
          gap: 10rpx;
          .date_box{
            display: flex;
            font-size: 48rpx;
            text:nth-child(1){
              color: #29D3B4;
            }
          }
          .ratio{
            color: #AAAAAA;
          }
        }
        .center_box{
          margin-left: 52rpx;
          display: flex;
          flex-direction: column;
          gap: 10rpx;
        }
        .right_box{
          .tag{
            position:absolute;
            top: 0rpx;
            right: 0rpx;
            padding: 10rpx;
            width: 102rpx;
            text-align: center;
            font-size: 24rpx;
            border-bottom-left-radius: 20rpx;
            border-top-right-radius: 20rpx;
          }
        }
      }
    }
  }
  
  // 发布作业按钮样式
  .publish-btn {
    position: fixed;
    bottom: 220rpx;
    right: 40rpx;
    width: 120rpx;
    height: 120rpx;
    background: #29D3B4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4rpx 20rpx rgba(41, 211, 180, 0.4);
    z-index: 99;
    
    .btn-text {
      color: #fff;
      font-size: 26rpx;
      text-align: center;
    }
  }
  
  // 弹窗内容样式
  .popup-content {
    width: 650rpx;
    background: #333;
    border-radius: 20rpx;
    padding: 30rpx;
    max-height: 80vh;
    overflow-y: auto;
    
    .popup-title {
      font-size: 36rpx;
      color: #fff;
      text-align: center;
      margin-bottom: 30rpx;
      font-weight: bold;
    }
    
    .form-item {
      margin-bottom: 20rpx;
      
      .form-label {
        display: block;
        color: #fff;
        font-size: 28rpx;
        margin-bottom: 10rpx;
      }
      
      .form-input, .form-textarea, .form-picker {
        width: 100%;
        background: #444;
        border-radius: 10rpx;
        padding: 16rpx;
        color: #fff;
        font-size: 28rpx;
        box-sizing: border-box;
      }
      
      .form-textarea {
        height: 150rpx;
      }
      
      .picker-text {
        height: 60rpx;
        line-height: 60rpx;
      }
      
      // 上传控件样式
      .upload-container {
        margin-top: 10rpx;
      }
      
      .upload-btn {
        width: 200rpx;
        height: 200rpx;
        background: #444;
        border-radius: 10rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: 1px dashed #666;
        
        .upload-icon {
          font-size: 60rpx;
          color: #29D3B4;
          line-height: 60rpx;
        }
        
        .upload-text {
          font-size: 24rpx;
          color: #aaa;
          margin-top: 10rpx;
        }
      }
      
      // 图片预览
      .image-preview {
        position: relative;
        width: 200rpx;
        height: 200rpx;
        border-radius: 10rpx;
        overflow: hidden;
        
        .preview-image {
          width: 100%;
          height: 100%;
        }
        
        .delete-btn {
          position: absolute;
          top: 0;
          right: 0;
          width: 40rpx;
          height: 40rpx;
          background: rgba(0, 0, 0, 0.6);
          display: flex;
          align-items: center;
          justify-content: center;
          
          .delete-icon {
            color: #fff;
            font-size: 28rpx;
          }
        }
      }
      
      // 视频预览
      .video-preview {
        position: relative;
        width: 100%;
        height: 300rpx;
        border-radius: 10rpx;
        overflow: hidden;
        
        .preview-video {
          width: 100%;
          height: 100%;
        }
        
        .delete-btn {
          position: absolute;
          top: 0;
          right: 0;
          width: 40rpx;
          height: 40rpx;
          background: rgba(0, 0, 0, 0.6);
          display: flex;
          align-items: center;
          justify-content: center;
          
          .delete-icon {
            color: #fff;
            font-size: 28rpx;
          }
        }
      }
    }
    
    .form-buttons {
      display: flex;
      justify-content: space-between;
      margin-top: 40rpx;
      
      button {
        width: 45%;
        height: 80rpx;
        line-height: 80rpx;
        border-radius: 40rpx;
        font-size: 30rpx;
      }
      
      .btn-cancel {
        background: #555;
        color: #fff;
      }
      
      .btn-submit {
        background: #29D3B4;
        color: #fff;
      }
    }
  }
}
</style>