<template>
  <div class="detail_content">
    <!-- <div class="search_box">
            <a-steps :current="currentStep">
                <a-step
                    v-for="(item,index) in steps"
                    :key="index"
                    :title="item.title"
                ></a-step>
            </a-steps>
        </div> -->

    <!-- 第一步 -->
    <div
      v-if="currentStep == 0"
      class="steps-content"
    >
      <a-form-model
        :model="step1FormModel"
        :label-col="{span: 8}"
        :wrapper-col="{span: 14}"
        :rules="step1FormRules"
        ref="step1FormModelRef"
        style="padding-top: 10px;padding-bottom: 10px"
      >

        <a-form-model-item
          label="课程类型"
          prop="type"
        >
          <a-radio-group
            name="courseType"
            default-value="SINGLE"
            v-model="step1FormModel.type"
          >
            <a-radio value="SINGLE">
              单集
            </a-radio>
            <a-radio value="SERIES">
              系列
            </a-radio>

          </a-radio-group>
        </a-form-model-item>

        <a-form-model-item
          v-if="step1FormModel.type == 'SINGLE'"
          label="课程名称"
          prop="name"
        >
          <a-input v-model="step1FormModel.name" />
        </a-form-model-item>
        <a-form-model-item
          label="系列名称"
          prop="name"
          v-else
        >
          <a-input v-model="step1FormModel.name" />
        </a-form-model-item>

        <a-form-model-item
          label="上传封面"
          prop="logoUrl"
        >
          <a-upload
            name="file"
            list-type="picture-card"
            class="avatar-uploader"
            :show-upload-list="false"
            :customRequest="uploadLogo"
            :before-upload="beforeUpload"
            @change="handleChange"
          >
            <img
              v-if="step1FormModel.logoUrl"
              width="200"
              height="200"
              :src="step1FormModel.logoUrl"
              alt="logo"
            />
            <div v-else>
              <a-icon :type="loading ? 'loading' : 'plus'" />
              <div class="ant-upload-text">
                上传
              </div>
            </div>
          </a-upload>
        </a-form-model-item>

        <a-form-model-item label="上传视频">
          <div
            v-for="(video,index) in step1FormModel.videos"
            :label="video.title"
            :key="video.id"
            class="video-series"
          >
            <a-row
              type="flex"
              justify="start"
              align="middle"
            >
              <a-col :span="6">
                <img
                  :src="video.img"
                  width="100%"
                />
              </a-col>
              <a-col :span="12">
                <div class="video-desc">第{{index+1}}级</div>
                <div class="video-desc">{{video.title}}</div>
              </a-col>
            </a-row>
          </div>
          <a-button @click="showVideoUploadModal">上传视频</a-button>
        </a-form-model-item>

        <a-form-model-item
          label="课程简介"
          prop="introduce"
        >
          <a-textarea
            row="2"
            v-model="step1FormModel.introduce"
          />
        </a-form-model-item>
        <a-form-model-item
          label="课程介绍"
          prop="detail"
        >
          <a-textarea
            row="4"
            v-model="step1FormModel.detail"
          />
        </a-form-model-item>

        <a-form-model-item
          label="系列名称"
          prop="seriesId"
          v-if="step1FormModel.type == 'SERIES'"
        >
          <a-tag v-if="step1FormModel.seriesName">{{step1FormModel.seriesName}}</a-tag>
          <a-button @click="openSeriesModal">选择</a-button>
        </a-form-model-item>

        <a-form-model-item
          label="收费模式"
          prop="chargeModel"
        >
          <a-radio-group
            name="chargeModel"
            default-value="FREE"
            v-model="step1FormModel.chargeModel"
          >
            <a-radio value="FREE">
              免费
            </a-radio>
            <a-radio value="VIP_FREE">
              会员免费
            </a-radio>
            <a-radio value="PAY">
              付费点播
            </a-radio>

          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item
          v-if="step1FormModel.chargeModel == 'PAY'"
          label="非会员价格"
          prop="price"
        >
          <a-input
            prefix="¥"
            v-model="step1FormModel.price"
          />
        </a-form-model-item>
        <a-form-model-item
          v-if="step1FormModel.chargeModel == 'PAY'"
          label="有效时间"
          prop="validPeriod"
        >
          <a-input
            suffix="小时"
            v-model="step1FormModel.validPeriod"
          />
        </a-form-model-item>
        <a-form-model-item
          v-if="step1FormModel.chargeModel == 'PAY'"
          label="会员价格"
          prop="vipPrice"
        >
          <a-input
            prefix="¥"
            v-model="step1FormModel.vipPrice"
          />
        </a-form-model-item>
        <a-form-model-item label="所属讲师">
          <a-tag v-if="step1FormModel.teacherName">{{step1FormModel.teacherName}}</a-tag>
          <a-button @click="showTeacherModal">选择讲师</a-button>
        </a-form-model-item>
        <a-form-model-item label="课程标签">
          <a-tag
            v-for="(item,index) in step1FormModel.tagsName"
            :key="index"
          >{{item}}</a-tag>
          <a-button>添加标签</a-button>
        </a-form-model-item>
        <a-form-model-item
          label="可见范围"
          prop="allow"
        >
          <a-radio-group
            name="allow"
            default-value="ALL"
            v-model="step1FormModel.allow"
          >
            <a-radio value="ALL">
              全部
            </a-radio>
            <a-radio value="SPECIFY">
              指定企业
            </a-radio>

          </a-radio-group>
        </a-form-model-item>
      </a-form-model>
    </div>
    <!-- 第二步 -->
    <div
      v-if="currentStep == 1"
      class="steps-content"
    >
      <!-- 表格操作 -->
      <div class="table_top">
        <a-button
          icon="plus"
          type="primary"
          class="btn_right_margin"
          @click="showVideoModal"
        >添加</a-button>
      </div>
      <!-- 视频列表 -->
      <a-table
        :columns="chaperColumns"
        :dataSource="chaperData"
        :loading="chaperTblLoading"
        bordered
        size="small"
        rowKey="id"
      >
      </a-table>
    </div>
    <!-- 完成 -->
    <div
      v-if="currentStep == 2"
      class="steps-content"
    >
      <div>已完成课程添加，点击完成按扭返回列表</div>
    </div>

    <div class="steps-action">
      <a-space size="large">
        <a-button
          v-if="currentStep < steps.length - 1"
          type="primary"
          @click="nextStep"
        >
          下一步
        </a-button>
        <a-button
          v-if="currentStep == steps.length - 1"
          type="primary"
          @click="completeStep"
        >
          完成
        </a-button>
        <a-button
          v-if="currentStep > 0"
          style="margin-left: 8px"
          @click="prevStep"
        >
          上一步
        </a-button>
        <a-button @click="onCancel">返回</a-button>
      </a-space>
    </div>

    <template>
      <a-modal
        :visible="videoUploadModalVisible"
        title="视频上传"
        @ok="videoUpload"
        @cancel="closeVideoUploadModal"
      >
        <a-form>
          <a-form-item>
            <a-input
              v-model="video.title"
              placeholder="输入视频标题"
              allowClear
            ></a-input>
          </a-form-item>
          <a-form-item>
            <a-upload
              ref="videoUploaderRef"
              name="file"
              :multiple="false"
              :show-upload-list="true"
              :loading="loading"
              :customRequest="uploadVideo"
              :before-upload="beforeVideoUpload"
            >
              <a-button>
                <a-icon type="upload" />选择视频文件</a-button>
            </a-upload>
          </a-form-item>

          <div class="container">
            <div class="upload">
              <div class="upload-type">
                <a-button
                  type="primary"
                  @click="authUpload"
                >
                  开始上传</a-button>
                <span class="progress">上传进度: <i id="auth-progress">{{authProgress}}</i> %</span>
              </div>
            </div>
          </div>

        </a-form>
      </a-modal>
    </template>

    <!-- 选择系列窗口 -->
    <template>
      <a-modal
        :visible="seriesModalVisible"
        title="选择系列"
        @ok="seriesSelected"
        @cancel="seriesModalClose"
      >

        <a-table
          :columns="seriesColumns"
          :dataSource="seriesData"
          :loading="seriesLoading"
          :pagination="seriesPagination"
          bordered
          size="small"
          @change="seriesHandleTableChange"
          rowKey="id"
          :row-selection="{selectedRowKeys: seriesSelectedRowKeys,onChange: seriesSelectChange}"
        >

        </a-table>
      </a-modal>
    </template>

    <!-- 选择讲师窗口 -->
    <template>
      <a-modal
        :visible="teacherModalVisible"
        centered
        title="选择讲师"
        @ok="teacherSelected"
        @cancel="teacherModalClose"
      >
        <!-- 搜索 -->
        <div class="search_box">
          <a-form layout="inline">
            <a-form-item label="讲师名称">
              <a-input
                v-model="teacherSearchPage.name"
                placeholder="请输入讲师名称"
                allowClear
              ></a-input>
            </a-form-item>
            <a-form-item>
              <a-button
                type="primary"
                icon="search"
                @click="teacherHandlSearch"
              >查询</a-button>
            </a-form-item>
          </a-form>
        </div>
        <a-table
          :columns="teacherColumns"
          :dataSource="teacherData"
          :loading="teacherLoading"
          :pagination="teacherPagination"
          bordered
          size="small"
          @change="teacherHandleTableChange"
          rowKey="id"
          :row-selection="{selectedRowKeys: teacherSelectedRowKeys,onChange: teacherSelectChange, type: 'radio'}"
        >

        </a-table>
      </a-modal>
    </template>
  </div>
</template>
<script>
import { uploadFile } from "@/api/biz/resource";
import { disposereq } from "@/utils/util";
import { fetchList as teacherFetchList } from "@/api/biz/teacher";
import {
  saveStep1,
  saveStep2,
  getDetail,
  fetchAliyunAuth,
  fetchAliyunPolicy,
  refreshAliyunPolicy,
} from "@/api/biz/course";

//test
import demo from "./demo.jpg";

//系列待选列表表格列定义
let seriesColumns = [
  {
    title: "系列名称",
    dataIndex: "name",
    align: "center",
  },
];
//讲师待选列表表格列定义
let teacherColumns = [
  {
    title: "讲师名称",
    dataIndex: "name",
    align: "center",
  },
  {
    title: "培训机构",
    dataIndex: "orgName",
    align: "center",
  },
];
//章节表格列定义
let chaperColumns = [
  {
    title: "章节名称",
    dataIndex: "name",
    align: "center",
  },
  {
    title: "视频",
    dataIndex: "videoUrl",
    align: "center",
  },
  {
    title: "操作",
    key: "action",
    scopedSlots: { customRender: "videoTblAction" },
    align: "center",
  },
];
export default {
  // 创建完毕
  created() {
    // console.log(this.$route.query.id)
    //路由传过来的课程ID，新建是为空
    let courseId = this.$route.query.id;
    if (courseId) {
      this.getCourseDetail(courseId);
    }
    fetchAliyunAuth().then((res) => {
      if (res.resp_code == 200) {
        this.data = res.datas;
        this.aliyunRegion = this.data.region;
        this.aliyunUserId = this.data.userId;
      } else {
        this.$message.info(res.resp_msg);
      }
    });
  },
  // 即将更新渲染
  beforeUpdate() {},
  data() {
    //第一步保存时系列字段验证
    let validateSerial = (rule, value, callback) => {
      if (
        this.step1FormModel.type == "SERIES" &&
        this.step1FormModel.seriesId == ""
      ) {
        callback(new Error("请选择系列"));
      } else {
        callback();
      }
    };
    //第一步保存时课程价格验证
    let validatePrice = (rule, value, callback) => {
      if (this.step1FormModel.chargeModel == "PAY") {
        if (value == "") {
          callback(new Error("不能为空"));
          return;
        }
        if (value == "0") {
          callback(new Error("不能为0"));
          return;
        }
        let exp = /^(([1-9]\d*)|\d)(\.\d{1,2})?$/;
        if (!exp.test(value)) {
          callback(new Error("金额格式不正确"));
          return;
        }
        callback();
      } else {
        callback();
      }
    };
    //第一步保存时有效时间验证
    let validateValidPeriod = (rule, value, callback) => {
      if (this.step1FormModel.chargeModel == "PAY") {
        if (value == "") {
          callback(new Error("不能为空"));
          return;
        }
        if (value == "0") {
          callback(new Error("不能为0"));
          return;
        }
        let exp = /^[0-9]*$/;
        if (!exp.test(value)) {
          callback(new Error("只能为空数字"));
          return;
        }
        callback();
      } else {
        callback();
      }
    };
    //第一步保存时会员价格验证
    let validateVipPrice = (rule, value, callback) => {
      if (this.step1FormModel.chargeModel == "PAY") {
        if (value == "") {
          callback(new Error("不能为空"));
          return;
        }
        if (value == "0") {
          callback(new Error("不能为0"));
          return;
        }
        let exp = /^(([1-9]\d*)|\d)(\.\d{1,2})?$/;
        if (!exp.test(value)) {
          callback(new Error("金额格式不正确"));
          return;
        }
        callback();
      } else {
        callback();
      }
    };
    return {
      videoTitle: "",
      video: { id: "", img: "", file: "", fileName: "", title: "" },
      onUploadProgress: undefined,
      authProgress: 0,
      uploadDisabled: true,
      resumeDisabled: true,
      pauseDisabled: true,
      uploader: null,
      statusText: "",
      aliyunRegion: "",
      aliyunUserId: "",
      //当前第几步
      currentStep: 0,
      //步骤列表
      steps: [
        {
          title: "第一步",
          content: "添加课程基本信息",
        },
        {
          title: "第二步",
          content: "添加课件和标签",
        },
        {
          title: "完成",
          content: "完成添加课程",
        },
      ],
      //第一步保存时验证规则定义
      step1FormRules: {
        name: [{ required: true, message: "不能为空", trigger: "blur" }],
        seriesId: [{ validator: validateSerial, trigger: "change" }],
        price: [{ validator: validatePrice, trigger: "change" }],
        validPeriod: [{ validator: validateValidPeriod, trigger: "change" }],
        vipPrice: [{ validator: validateVipPrice, trigger: "change" }],
      },
      //第一步表单数据对象
      step1FormModel: {
        id: "",
        name: "",
        type: "SINGLE",
        introduce: "",
        detail: "",
        logoUrl: "",
        teacherId: "",
        teacherName: "",
        chargeModel: "FREE",
        price: "",
        vipPrice: "",
        validPeriod: "",
        seriesId: "",
        seriesName: "",
        allow: "ALL",
        allowOrgIds: [],
        tagIds: [],
        tagNames: [],
        videos: [
          {
            title: "《为什么说成为自律的人并不是很难？- 01》",
            id: 1,
            img: demo,
          },
          {
            title: "《为什么说成为自律的人并不是很难？- 02》",
            id: 2,
            img: demo,
          },
        ],
      },
      //上传封面时的进度条
      loading: false,
      //选择系列弹出窗口的显示控制
      seriesModalVisible: false,
      //系列待选表格列定义
      seriesColumns: seriesColumns,
      //系列待选表格数据对象
      seriesData: [],
      //系列待选表格加载进度条
      seriesLoading: false,
      //系列待选表格分页控制对象
      seriesPagination: {},
      //系列待选表格选中项的ID
      seriesSelectedRowKeys: [],
      //选择讲师弹出窗口显示控制
      teacherModalVisible: false,
      //视频上传窗口
      videoUploadModalVisible: false,
      //讲师待选表格列定义
      teacherColumns: teacherColumns,
      //讲师待选表格数据对象
      teacherData: [],
      //讲师待选表格加载进度条
      teacherLoading: false,
      //讲师待选表格分页控制对象
      teacherPagination: {
        showSizeChanger: true,
      },
      //选择讲师的ID
      teacherSelectedRowKeys: [],
      //讲师待选表格查询参数对象
      teacherSearchPage: {
        name: "",
        pageIndex: 1,
        pageSize: 10,
      },
      //记录第一步操作表单修改次数，用于判断是否要提交后台保存，> 1时说明表单修改过需要保存
      step1ModifyCount: 0,
      //第二步添加章节点弹出窗口显示控制
      videoModalVisible: false,
      //第二步章节列表列定义
      chaperColumns: chaperColumns,
      //第二步章节表格数据对象
      chaperData: [],
      //第二步章节表格加载进度条
      chaperTblLoading: false,
    };
  },
  methods: {
    //获取课程详情
    getCourseDetail(id) {
      getDetail(id)
        .then((res) => {
          if (res.resp_code == 200) {
            this.step1FormModel = { ...res.datas };
            this.chaperData = res.datas.chaperList;
          } else {
            this.$message.info(res.resp_msg);
          }
        })
        .catch((err) => {
          disposereq(this, err);
        });
    },
    //跳转下一步
    nextStep() {
      if (this.currentStep == 0) {
        this.saveStep1();
      }
    },
    //保存第一步表单数据
    saveStep1() {
      // console.log(this.step1FormModel)
      if (this.step1ModifyCount <= 1) {
        //未修改，无需保存
        this.currentStep++;
        return;
      }
      this.$refs.step1FormModelRef.validate((valid) => {
        if (valid) {
          if (!this.step1FormModel.logoUrl) {
            this.$message.info("请上传封面");
            return false;
          }
          //请求后台保存
          let saveObj = { ...this.step1FormModel };
          saveStep1(saveObj)
            .then((res) => {
              if (res.resp_code == 200) {
                let courseId = res.datas;
                console.log("courseId:" + courseId);
                this.step1FormModel.id = courseId;
                this.currentStep++;
              } else {
                this.$message.info(res.resp_msg);
              }
            })
            .catch((err) => {
              disposereq(this, err);
            });
        }
      });
    },
    //上一步
    prevStep() {
      this.currentStep--;
    },
    //最后一步完成操作
    completeStep() {
      this.$message.info("完成");
    },
    //上传封面时上传中的回调
    handleChange(info) {
      // console.log(info.file.status)
      if (info.file.status === "uploading") {
        this.loading = true;
        return;
      }
    },
    //上传封面时上传前的验证
    beforeUpload(file) {
      const isJpgOrPng =
        file.type === "image/jpeg" || file.type === "image/png";
      if (!isJpgOrPng) {
        this.$message.info("只能上传图片");
      }
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!isLt2M) {
        this.$message.error("Image must smaller than 10MB!");
      }
      return isJpgOrPng && isLt2M;
    },
    //返回课程列表
    onCancel() {
      this.$router.push("/edu/biz/course/index");
    },
    //上传封面
    uploadLogo(data) {
      const formData = new FormData();
      formData.append("file", data.file);
      uploadFile(formData)
        .then((res) => {
          if (res.data.resp_code == 200) {
            this.step1FormModel.logoUrl = res.data.datas.url;
          } else {
            this.$message.info("上传失败");
          }
          this.loading = false;
        })
        .catch((err) => {
          disposereq(this, err);
        });
    },
    beforeVideoUpload(file) {
      const { type } = file;
      if (!this.video.title) {
        this.$message.error("请填写视频标题");
        return false;
      }
      if (type.startsWith("video")) {
        return true;
      } else {
        this.$message.error("请选择视频文件");
        return false;
      }
    },

    uploadVideo({ onSuccess, onError, onProgress, file }) {
      var Title = this.video.title;
      this.video.fileName = file.name;
      this.video.file = file.file;
      var userData = '{"Vod":{}}';
      if (this.uploader) {
        this.uploader.stopUpload();
        this.authProgress = 0;
        this.statusText = "";
      }
      this.uploader = this.createUploader();
      this.uploader.addFile(file, null, null, null, userData);
      this.uploadDisabled = false;
      this.pauseDisabled = true;
      this.resumeDisabled = true;
      this.video.file;
      this.onUploadProgress = onProgress;
    },
    authUpload() {
      // 然后调用 startUpload 方法, 开始上传
      if (this.uploader !== null) {
        this.uploader.startUpload();
        this.uploadDisabled = true;
        this.pauseDisabled = false;
      }
    },
    createUploader(type) {
      let self = this;
      let uploader = new AliyunUpload.Vod({
        timeout: 60000,
        partSize: 1048576,
        parallel: 5,
        retryCount: 3,
        retryDuration: 2,
        region: self.aliyunRegion,
        userId: self.aliyunUserId,
        // 添加文件成功
        addFileSuccess: function(uploadInfo) {
          self.uploadDisabled = false;
          self.resumeDisabled = false;
        },
        // 开始上传
        onUploadstarted: function(uploadInfo) {
          if (!uploadInfo.videoId) {
            fetchAliyunPolicy({
              fileName: self.video.fileName,
              title: self.video.title,
            }).then((res) => {
              if (res.resp_code == 200) {
                const data = res.datas;
                let uploadAuth = data.uploadAuth;
                let uploadAddress = data.uploadAddress;
                let videoId = data.videoId;
                self.video.id = videoId;
                uploader.setUploadAuthAndAddress(
                  uploadInfo,
                  uploadAuth,
                  uploadAddress,
                  videoId
                );
              } else {
                self.$message.info(res.resp_msg);
                return;
              }
            });
            self.$message.info("文件开始上传");
          } else {
            refreshAliyunPolicy(uploadInfo.videoId).then((res) => {
              if (res.resp_code == 200) {
                const data = res.datas;
                let uploadAuth = data.uploadAuth;
                let uploadAddress = data.uploadAddress;
                let videoId = data.videoId;
                self.video.id = videoId;
                uploader.setUploadAuthAndAddress(
                  uploadInfo,
                  uploadAuth,
                  uploadAddress,
                  videoId
                );
              } else {
                self.$message.info(res.resp_msg);
                return;
              }
            });
          }
        },
        // 文件上传成功
        onUploadSucceed: function(uploadInfo) {
          self.$message.success("文件上传成功");
        },
        // 文件上传失败
        onUploadFailed: function(uploadInfo, code, message) {
          self.$message.error("文件上传失败");
        },
        // 取消文件上传
        onUploadCanceled: function(uploadInfo, code, message) {
          self.$message.error("文件已暂停上传");
        },
        // 文件上传进度，单位：字节, 可以在这个函数中拿到上传进度并显示在页面上
        onUploadProgress: function(uploadInfo, totalSize, progress) {
          let progressPercent = Math.ceil(progress * 100);
          self.authProgress = progressPercent;
          self.$refs.videoUploaderRef.onProgress(
            { percent: progressPercent },
            uploadInfo.file
          );
          if (progressPercent === 100) {
            self.$refs.videoUploaderRef.onSuccess(null, uploadInfo.file);
          }
        },
        // 上传凭证超时
        onUploadTokenExpired: function(uploadInfo) {
          console.log(self.video, uploadInfo);
          refreshAliyunPolicy(uploadInfo.videoId).then((res) => {
            if (res.resp_code == 200) {
              const data = res.datas;
              let uploadAuth = data.uploadAuth;
              uploader.resumeUploadWithAuth(uploadAuth);
            } else {
              self.$message.info(res.resp_msg);
              return;
            }
          });
          self.$message.error("文件上传超时");
        },
        // 全部文件上传结束
        onUploadEnd: function(uploadInfo) {
          // self.$message.success("文件上传完毕");
        },
      });
      return uploader;
    },

    //选择系列弹出窗口确认操作
    seriesSelected() {
      this.seriesModalClose();
    },
    //选择系列弹出窗口取消操作
    seriesModalClose() {
      this.seriesModalVisible = false;
    },
    //显示选择系列弹出窗口
    openSeriesModal() {
      this.seriesModalVisible = true;
    },
    //系列待选表格分页操作
    seriesHandleTableChange() {},
    //系列待选表格选中操作
    seriesSelectChange(selectedRowKeys) {},
    //显示讲师待选窗口
    showTeacherModal() {
      this.teacherHandlSearch();
      this.teacherModalVisible = true;
    },
    showVideoUploadModal() {
      this.videoUploadModalVisible = true;
    },
    closeVideoUploadModal() {
      this.videoUploadModalVisible = false;
    },
    videoUpload() {
      console.log("do video upload", this.video);
    },
    // handleVideoChange(info) {
    //   if (info.file.status === "uploading") {
    //     this.loading = true;
    //     return;
    //   }
    // },
    //讲师待选窗口确认操作
    teacherSelected() {
      if (this.teacherSelectedRowKeys.length == 0) {
        this.$message.info("请选择讲师");
        return false;
      }
      this.step1FormModel.teacherId = this.teacherSelectedRowKeys[0];
      let teacherObj = this.teacherData.filter(
        (e) => e.id == this.teacherSelectedRowKeys[0]
      )[0];
      // console.log(teacherObj)
      this.step1FormModel.teacherName = teacherObj.name;
      // console.log(this.step1FormModel)
      this.teacherModalClose();
    },
    //关闭讲师待选窗口
    teacherModalClose() {
      this.teacherModalVisible = false;
      this.seriesSelectedRowKeys = [];
      this.teacherData = [];
      this.teacherPagination = {};
      this.teacherSelectedRowKeys = [];
      this.teacherSearchPage = {
        name: "",
        pageIndex: 1,
        pageSize: 10,
      };
    },
    //待选讲师表格分页操作
    teacherHandleTableChange(pagination, filters, sorter) {
      let queryParam = { ...this.teacherSearchPage };
      queryParam.pageIndex = pagination.current;
      queryParam.pageSize = pagination.pageSize;
      this.getTeacherList(queryParam);
    },
    //选中讲师操作
    teacherSelectChange(selectedRowKeys) {
      // console.log(selectedRowKeys)
      this.teacherSelectedRowKeys = selectedRowKeys;
    },
    //待选讲师表格查询
    teacherHandlSearch() {
      this.getTeacherList(this.teacherSearchPage);
    },
    //查询讲师
    getTeacherList(query) {
      this.teacherLoading = true;
      teacherFetchList(query)
        .then((res) => {
          if (res.code == 200) {
            this.teacherData = res.data;
            var paper = { ...this.teacherPagination };
            paper.current = query.pageIndex;
            paper.total = res.count;
            this.teacherPagination = paper;
          } else {
            this.$message.info(res.resp_msg);
          }
          this.teacherLoading = false;
        })
        .catch((err) => {
          this.teacherLoading = false;
          disposereq(this, err);
        });
    },
    //显示添加章节窗口
    showVideoModal() {
      this.videoModalVisible = true;
    },
  },
  watch: {
    //监视第一步表单是否有修改操作
    step1FormModel: {
      handler(val, oldVal) {
        this.step1ModifyCount++;
      },
      deep: true,
    },
  },
};
</script>
<style>
.detail_content {
  background-color: #f0f2f5;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.search_box {
  width: 100%;
  box-sizing: border-box;
  padding: 14px;
  background-color: #fff;
}
.steps-content {
  width: 100%;
  background-color: #fff;
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 6px;
  min-height: 400px;
  padding-top: 20px;
  margin-bottom: 16px;
}
.uploadImg {
  cursor: pointer;
}
.table_top {
  padding-bottom: 14px;
}
.video-desc {
  margin-left: 10px;
  height: 100%;
  font-weight: bold;
  font-size: 14px;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.video-series {
  margin-top: 5px;
}
</style>