<template>
  <div>
    <xy-dialog ref="dialog" :width="70" :is-show.sync="isShow" :type="'form'" :title="type === 'add' ? '新增课表' : '编辑课表'"
      :form="form" :rules='rules' @submit="submit">
      <template v-slot:date>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;">*</span>日期：
          </div>
          <div class="xy-table-item-content">
            <el-date-picker  style="width: 100%;" v-model="form.date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date" placeholder="选择日期">
            </el-date-picker>
          </div>
        </div>
      </template>
      <template v-slot:period>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>上课时间：
          </div>
          <div class="xy-table-item-content">
            <el-input style="width: 100%;" v-model="form.period" placeholder="请输入上课时间" clearable></el-input>
          </div>
        </div>
      </template>
      <!-- <template v-slot:timeRange>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>上课时间：
          </div>
          <div class="xy-table-item-content">
            <el-time-picker @change="changeTime" style="width: 100%;" format="HH:mm" value-format="HH:mm" is-range
              v-model="form.timeRange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
              placeholder="选择时间范围">
            </el-time-picker>
          </div>
        </div>
      </template> -->
      <template v-slot:teacher_id>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>授课老师：
          </div>
          <div class="xy-table-item-content">
            <el-select v-model="form.teacher_id" @change="changeTeacher" style="width:100%" placeholder="请选择授课老师"
              clearable>
              <el-option v-for="item in teacher_options" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:theme>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>课程主题：
          </div>
          <div class="xy-table-item-content">
            <el-input style="width: 100%;" v-model="form.theme" placeholder="请输入课程主题" clearable></el-input>
          </div>
        </div>
      </template>
      <template v-slot:address>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>上课地点：
          </div>
          <div class="xy-table-item-content">
            <el-input style="width: 100%;" v-model="form.address" placeholder="请输入上课地点" clearable></el-input>
          </div>
        </div>
      </template>
      <template v-slot:address_detail>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>签到地点：
          </div>
          <div class="xy-table-item-content">
            <avue-input-map v-model="mapform" :params="mapparams" style="width:100%" placeholder="请选择地图" />
          </div>
        </div>
      </template>
      <!-- <template v-slot:introduce>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>老师简介：
          </div>
          <div class="xy-table-item-content">
            <el-input style="width: 100%;" v-model="form.introduce" placeholder="请输入老师简介" clearable></el-input>
          </div>
        </div>
      </template> -->
      <template v-slot:files>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>课件管理：
          </div>
          <div class="xy-table-item-content">
            <!-- 现有课件列表 -->
            <div v-if="form.files && form.files.length > 0" class="existing-files">
              <h5>现有课件</h5>
              <div v-for="file in form.files" :key="file.id" class="file-item">
                <el-link type="primary" @click="downloadFile(file)" :underline="false">
                  <i class="el-icon-document"></i>
                  {{ file.original_name }}
                </el-link>
                <el-button type="danger" size="mini" @click="removeFile(file)" style="margin-left: 10px;">
                  <i class="el-icon-delete"></i> 删除
                </el-button>
              </div>
            </div>

            <!-- 上传新课件 -->
            <div class="upload-section">
              <h5>上传新课件</h5>
              <el-upload ref="fileUpload" :action="uploadAction" :headers="uploadHeaders" :file-list="newFileList"
                :on-success="handleFileUploadSuccess" :on-remove="handleFileUploadRemove"
                :on-error="handleFileUploadError" :before-upload="beforeFileUpload" multiple
                accept=".pdf,.doc,.docx,.ppt,.pptx,.xls,.xlsx,.zip,.rar,.txt,.jpg,.jpeg,.png,.gif">
                <el-button size="small" type="primary">
                  <i class="el-icon-upload"></i> 点击上传
                </el-button>
                <div slot="tip" class="el-upload__tip">
                  支持 PDF、Word、PPT、Excel、压缩包、图片等格式，单个文件不超过50MB
                </div>
              </el-upload>
            </div>
          </div>
        </div>
      </template>
    </xy-dialog>
  </div>
</template>

<script>
  import myMixins from "@/mixin/selectMixin.js";
  import {
    show,
    save
  } from '@/api/course/courseContent.js'
  import {
    save as saveTeacher
  } from "@/api/info/teachers.js"
  export default {
    mixins: [myMixins],
    components: {},
    data() {
      return {
        isShow: false,
        type: 'add',
        id: '',
        teacher_options: [],
        mapparams: {
          zoom: 11
        },
        mapform: [],
        form: {
          date: '',
          // timeRange: [],
          period:'',
          teacher_id: "",
          theme: '',
          address: '',
          address_detail: '',
          latitude: '',
          longitude: '',
          // introduce: '',
          files: [], // 现有课件列表
        },
        rules: {
          date: [{
            required: true,
            message: '请选择上课日期'
          }]
        },
        uploadAction: `${process.env.VUE_APP_UPLOAD_API}`, // 上传文件的URL
        uploadHeaders: {
          Authorization: `Bearer ${this.$store.getters.token}`
        }, // 上传文件时的请求头
        newFileList: [], // 新上传的文件列表
        removedFileIds: [], // 已删除的文件ID列表
      }
    },
    created() {},
    methods: {
      setTeachers(e) {
        this.teacher_options = e
      },
      changeTeacher(e) {
        if (e) {
          this.teacher_options.map(item => {
            if (e === item.id) {
              this.form.teacher_id = item.id
              // this.form.introduce = item.introduce
            }
          })
        }
        console.log("e", e)
      },
      changeTime(e) {
        console.log("eeee", e)
        if (e) {
          this.form.start_time = e[0]
          this.form.end_time = e[1]
        } else {
          this.form.start_time = ''
          this.form.end_time = ''
        }
      },
      submit() {
        if (this.id) {
          this.form.id = this.id
        } else {
          this.form.id = ''
        }

        // 处理课件文件ID
        const existingFileIds = this.form.files.map(file => file.id);
        const newFileIds = this.newFileList.map(file => {
          return file.response ? file.response.id : file.id;
        });

        // 合并现有文件ID和新上传的文件ID，排除已删除的文件ID
        const finalFileIds = [...existingFileIds, ...newFileIds].filter(id =>
          !this.removedFileIds.includes(id)
        );

        const submitData = {
          ...this.form,
          file_ids: finalFileIds
        };
        save(submitData).then(res => {
          this.$message({
            type: 'success',
            message: '保存课表成功'
          })
          // saveTeacher({
          //   id: this.form.teacher_id
          // }).then(res => {

          // })
          this.isShow = false
          this.$emit('refresh')
          // this.active = 1
        })

      },
      getDetail() {
        show({
          id: this.id,
          show_relation: ['teacher']
        }).then(res => {
          this.form = this.base.requestToForm(res, this.form)
          this.form.files = res.files ? res.files : []
          // this.form.timeRange = [this.form.start_time ? this.form.start_time : '', this.form.end_time ? this.form
          //   .end_time : ''
          // ]
          // this.form.introduce = res.teacher.introduce
          this.mapform = [res.longitude, res.latitude, res.address_detail]
        })
      },
      // 下载文件
      downloadFile(file) {
        const link = document.createElement('a');
        link.href = file.url;
        link.download = file.original_name;
        link.target = '_blank';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      },
      // 删除现有文件
      removeFile(file) {
        this.$confirm(`确定要删除课件"${file.original_name}"吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 从现有文件列表中移除
          this.form.files = this.form.files.filter(f => f.id !== file.id);
          // 添加到已删除文件ID列表
          this.removedFileIds.push(file.id);
          this.$message.success('课件删除成功');
        }).catch(() => {
          // 用户取消删除
        });
      },
      // 文件上传成功
      handleFileUploadSuccess(response, file, fileList) {
        this.$message.success('课件上传成功');
        this.newFileList = fileList;
      },
      // 文件上传移除
      handleFileUploadRemove(file, fileList) {
        this.newFileList = fileList;
      },
      // 文件上传错误
      handleFileUploadError(err, file, fileList) {
        this.$message.error('课件上传失败: ' + err);
      },
      // 文件上传前验证
      beforeFileUpload(file) {
        const isLt50M = file.size / 1024 / 1024 < 50;
        if (!isLt50M) {
          this.$message.error('上传文件大小不能超过 50MB!');
        }
        return isLt50M;
      },


    },
    watch: {
      isShow(newVal) {
        if (newVal) {
          if (this.type === 'editor') {
            this.getDetail()
          }
        } else {
          this.id = ''
          this.mapform = []
          this.form = {
            date: '',
            // timeRange: [],
            period:'',
            teacher_id: "",
            theme: '',
            address: '',
            address_detail: '',
            latitude: '',
            longitude: '',
            files: [], // 重置课件列表
          }
          this.newFileList = [] // 重置新上传文件列表
          this.removedFileIds = [] // 重置已删除文件ID列表
          this.$refs['dialog'].reset()
        }
      },
      mapform(newVal, oldVal) {
        console.log(newVal)
        this.form.longitude = newVal[0]
        this.form.latitude = newVal[1]
        this.form.address_detail = newVal[2]
      }
    }

  }
</script>

<style scoped lang="scss">
  ::v-deep .files {
    flex-basis: 100%;
  }

  .existing-files {
    margin-bottom: 20px;

    h5 {
      margin: 0 0 10px 0;
      color: #303133;
      font-size: 14px;
    }

    .file-item {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      padding: 8px;
      background: #f5f7fa;
      border-radius: 4px;

      &:last-child {
        margin-bottom: 0;
      }

      .el-link {
        flex: 1;
        font-size: 12px;

        i {
          margin-right: 4px;
        }
      }
    }
  }

  .upload-section {
    h5 {
      margin: 0 0 10px 0;
      color: #303133;
      font-size: 14px;
    }

    .el-upload__tip {
      font-size: 12px;
      color: #909399;
      margin-top: 5px;
    }
  }
</style>
