<template>
  <a-card :bordered="false" title="添加课件">
    <template slot="extra">
      <a-button @click="goback">返回</a-button>
      <a-button type="primary" @click="save">保存</a-button>
    </template>
    <a-tabs type="card" :default-active-key="parentTabKey" @change="parentcallback">
      <a-tab-pane key="1" tab="文件上传">
        <a-tabs :default-active-key="fileUpload.tabkey" @change="callback">

          <a-tab-pane key="1" tab="视频上传">
            <div style="background: #ececec; padding: 30px">
              <a-card title="视频上传" :bordered="false" style="width: 100%">
                <div style="margin-bottom: 30px">
                  课件名称：&nbsp;
                  <a-input placeholder="课件名称" v-model="fileUpload.videoForm.name" style="width: 40%" />
                </div>
                <div style="margin-bottom: 30px; margin-top: 20px">
                  课件分类：&nbsp;<a-select mode="multiple" style="width: 30%" placeholder="请选择分类">
                    <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
                      {{ (i + 9).toString(36) + i }}
                    </a-select-option>
                  </a-select>
                  <a-button type="primary" @click="showModal" style="margin-left: 20px"> 添加分类 </a-button>

                  <!-- 课件分类弹框 -->
                  <!-- <a-modal v-model="fileUpload.visible" title="模板下载" cancelText="关闭" :ok-button-props="{ style: { display: 'none' } }">
                    <s-table ref="table" :rowKey="(record) => record.id" :columns="fileUpload.columns" :alert="false" :data="loadData" :showPagination="false" :expandRowByClick="true">
                      <span slot="type" slot-scope="text, record">
                        <a-tag color="cyan" v-if="text === 0">
                          {{ record.type | typeFilter }}
                        </a-tag>
                        <a-tag color="blue" v-if="text === 1">
                          {{ record.type | typeFilter }}
                        </a-tag>
                        <a-tag color="purple" v-if="text === 2">
                          {{ record.type | typeFilter }}
                        </a-tag>
                      </span>
                      <span slot="action" slot-scope="text, record">
                        <template>
                          <a v-if="hasPerm('sys:menu:edit')" @click="$refs.menuForm.edit(record)">编辑</a>
                          <a-divider type="vertical" v-if="hasPerm('sys:menu:edit')" />
                          <a-popconfirm v-if="hasPerm('sys:menu:delete')" placement="topRight" title="删除本菜单与下级？" @confirm="() => handleDel(record)">
                            <a>删除</a>
                          </a-popconfirm>
                        </template>
                      </span>
                    </s-table>
                  </a-modal> -->
                </div>
                <div>课件大小：&nbsp;
                  <a-input :disabled="true" :value="fileUpload.videoForm.sizeStr" style="width: 140px" />&nbsp;&nbsp;&nbsp; MB
                </div>
                <br />
                <div>
                  视频上传：&nbsp; <a-upload list-type="picture" :default-file-list="this.successOssFile" :beforeUpload="beforeUpload" :remove="deleteVideo" :disabled="this.uploadLoading">
                    <a-button>
                      <a-icon type="upload" /> {{this.uploadButtonText}}
                    </a-button>&nbsp;&nbsp;&nbsp;
                  </a-upload>
                </div>
              </a-card>
            </div>
          </a-tab-pane>

          <a-tab-pane key="2" tab="文本上传">
            <div style="background: #ececec; padding: 30px">
              <a-card title="文本上传" :bordered="false" style="width: 100%">
                <div style="margin-bottom: 30px">
                  课件名称：&nbsp;
                  <a-input placeholder="课件名称" v-model="fileUpload.textForm.name" style="width: 40%" />
                </div>
                <div style="margin-bottom: 30px; margin-top: 20px">
                  课件分类：&nbsp;<a-select mode="multiple" style="width: 30%" placeholder="请选择分类">
                    <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
                      {{ (i + 9).toString(36) + i }}
                    </a-select-option>
                  </a-select>
                  <a-button type="primary" @click="showModal" style="margin-left: 20px"> 添加分类 </a-button>

                  <!-- 课件分类弹框 -->
                  <!-- <a-modal v-model="fileUpload.visible" title="模板下载" cancelText="关闭" :ok-button-props="{ style: { display: 'none' } }">
                    <s-table ref="table" :rowKey="(record) => record.id" :columns="fileUpload.columns" :alert="false" :data="loadData" :showPagination="false" :expandRowByClick="true">
                      <span slot="type" slot-scope="text, record">
                        <a-tag color="cyan" v-if="text === 0">
                          {{ record.type | typeFilter }}
                        </a-tag>
                        <a-tag color="blue" v-if="text === 1">
                          {{ record.type | typeFilter }}
                        </a-tag>
                        <a-tag color="purple" v-if="text === 2">
                          {{ record.type | typeFilter }}
                        </a-tag>
                      </span>
                      <span slot="action" slot-scope="text, record">
                        <template>
                          <a v-if="hasPerm('sys:menu:edit')" @click="$refs.menuForm.edit(record)">编辑</a>
                          <a-divider type="vertical" v-if="hasPerm('sys:menu:edit')" />
                          <a-popconfirm v-if="hasPerm('sys:menu:delete')" placement="topRight" title="删除本菜单与下级？" @confirm="() => handleDel(record)">
                            <a>删除</a>
                          </a-popconfirm>
                        </template>
                      </span>
                    </s-table>
                  </a-modal> -->
                </div>
                <div>课件大小：&nbsp;
                  <a-input-number v-model="fileUpload.textForm.sizeStr" :min="0" />&nbsp;&nbsp;&nbsp; MB
                </div>
                <br />
                <div>
                  文件上传：&nbsp; <a-upload list-type="picture" :default-file-list="this.successOssFile" :beforeUpload="beforeUpload" :remove="deleteVideo" :disabled="this.uploadLoading">
                    <a-button>
                      <a-icon type="upload" /> {{this.uploadButtonText}}
                    </a-button>&nbsp;&nbsp;&nbsp;
                  </a-upload>
                </div>
              </a-card>
            </div>
          </a-tab-pane>
        </a-tabs>
      </a-tab-pane>

      <a-tab-pane key="2" tab="视频服务器链接">
        <div style="background: #ececec; padding: 30px">
          <a-card title="视频服务器链接" :bordered="false" style="width: 100%">
            <div style="margin-bottom: 30px">
              课件名称：&nbsp;
              <a-input placeholder="课件名称" v-model="videoServerLink.name" style="width: 40%" />
            </div>
            <div style="margin-bottom: 30px; margin-top: 20px">
              课件分类：&nbsp;<a-select mode="multiple" style="width: 30%" placeholder="请选择分类">
                <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
                  {{ (i + 9).toString(36) + i }}
                </a-select-option>
              </a-select>
              <a-button type="primary" @click="showModal" style="margin-left: 20px"> 添加分类 </a-button>

              <!-- 课件分类弹框 -->
              <!-- <a-modal v-model="fileUpload.visible" title="模板下载" cancelText="关闭" :ok-button-props="{ style: { display: 'none' } }">
                    <s-table ref="table" :rowKey="(record) => record.id" :columns="fileUpload.columns" :alert="false" :data="loadData" :showPagination="false" :expandRowByClick="true">
                      <span slot="type" slot-scope="text, record">
                        <a-tag color="cyan" v-if="text === 0">
                          {{ record.type | typeFilter }}
                        </a-tag>
                        <a-tag color="blue" v-if="text === 1">
                          {{ record.type | typeFilter }}
                        </a-tag>
                        <a-tag color="purple" v-if="text === 2">
                          {{ record.type | typeFilter }}
                        </a-tag>
                      </span>
                      <span slot="action" slot-scope="text, record">
                        <template>
                          <a v-if="hasPerm('sys:menu:edit')" @click="$refs.menuForm.edit(record)">编辑</a>
                          <a-divider type="vertical" v-if="hasPerm('sys:menu:edit')" />
                          <a-popconfirm v-if="hasPerm('sys:menu:delete')" placement="topRight" title="删除本菜单与下级？" @confirm="() => handleDel(record)">
                            <a>删除</a>
                          </a-popconfirm>
                        </template>
                      </span>
                    </s-table>
                  </a-modal> -->
            </div>
            <div style="margin-bottom: 30px">课件大小：&nbsp;
              <a-input :disabled="true" :value="videoServerLink.sizeStr" style="width: 140px" />&nbsp;&nbsp;&nbsp; MB
            </div>
            <div style="margin-bottom: 30px">
              连接地址：&nbsp;
              <a-input placeholder="请输入视频链接地址" v-model="videoServerLink.videoUrl" style="width: 40%" />
            </div>
          </a-card>
        </div>

      </a-tab-pane>
      <a-tab-pane key="3" tab="第三方连接">
        <div style="background: #ececec; padding: 30px">
          <a-card title="第三方连接" :bordered="false" style="width: 100%">
            <div style="margin-bottom: 30px">
              课件名称：&nbsp;
              <a-input placeholder="课件名称" v-model="thirdAddress.name" style="width: 40%" />
            </div>
            <div style="margin-bottom: 30px; margin-top: 20px">
              课件分类：&nbsp;<a-select mode="multiple" style="width: 30%" placeholder="请选择分类">
                <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
                  {{ (i + 9).toString(36) + i }}
                </a-select-option>
              </a-select>
              <a-button type="primary" @click="showModal" style="margin-left: 20px"> 添加分类 </a-button>

              <!-- 课件分类弹框 -->
              <!-- <a-modal v-model="fileUpload.visible" title="模板下载" cancelText="关闭" :ok-button-props="{ style: { display: 'none' } }">
                    <s-table ref="table" :rowKey="(record) => record.id" :columns="fileUpload.columns" :alert="false" :data="loadData" :showPagination="false" :expandRowByClick="true">
                      <span slot="type" slot-scope="text, record">
                        <a-tag color="cyan" v-if="text === 0">
                          {{ record.type | typeFilter }}
                        </a-tag>
                        <a-tag color="blue" v-if="text === 1">
                          {{ record.type | typeFilter }}
                        </a-tag>
                        <a-tag color="purple" v-if="text === 2">
                          {{ record.type | typeFilter }}
                        </a-tag>
                      </span>
                      <span slot="action" slot-scope="text, record">
                        <template>
                          <a v-if="hasPerm('sys:menu:edit')" @click="$refs.menuForm.edit(record)">编辑</a>
                          <a-divider type="vertical" v-if="hasPerm('sys:menu:edit')" />
                          <a-popconfirm v-if="hasPerm('sys:menu:delete')" placement="topRight" title="删除本菜单与下级？" @confirm="() => handleDel(record)">
                            <a>删除</a>
                          </a-popconfirm>
                        </template>
                      </span>
                    </s-table>
                  </a-modal> -->
            </div>
            <div style="margin-bottom: 30px">课件大小：&nbsp;
              <a-time-picker placeholder="课件时长" :minute-step="1" :second-step="1" v-model="thirdAddress.sizeStr"/>
            </div>
            <div style="margin-bottom: 30px">
              连接地址：&nbsp;
              <a-input placeholder="请输入第三方链接地址" v-model="thirdAddress.videoUrl" style="width: 40%" />
            </div>
          </a-card>
        </div>
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>



<script>
import { STable } from '@/components'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import storage from 'store'
import axios from 'axios'
import { ossUpload } from '@/api/sys/oss'
import { coursewareAdd } from '@/api/course/courseware'
import { dictionaryDropDown } from '@/api/sys/dictionaryItem'

export default {
  data() {
    return {
      successOssFile: [],
      uploadLoading: false, // 控制 选择文件 按钮是否转圈
      uploadButtonText: '选择文件',
      parentTabKey: '1', //顶级选项卡， 文件上传/视频服务器连接/第三方连接
      videoPath: [], //用于存放视频路径
      fileUpload: {
        visible: false,
        tabkey: '1',
        videoForm: {
          //视频上传表单
          sizeStr: '0', //视频大小
          type: '1',
          videoPath: [],
        },
        textForm: {
          //文本上传表单
          type: '2', // 用于表示tabkey  1-视频上传  2-文本上传  3-视频服务连接  4-第三方连接
          videoPath: [],
        },
      },
      videoServerLink: {
        //视频服务器连接
        type: '3',
      },
      thirdAddress: {
        //第三方表单
        sizeStr:'',
        type: '4',
      },
    }
  },
  components: {},
  created() {},
  methods: {
    //返回
    goback() {
      this.$router.push({
        path: '/course/CoursewareList',
        query: {
          id: this.$route.query.courseId,
        },
      })
    },

    //顶级标签页
    parentcallback(key) {
      console.log(key)
      this.fileUpload.videoForm = {}
      this.fileUpload.textForm = {}
      this.videoPath = [] //置空文件
      this.parentTabKey = key
    },
    //作用于子标签页
    callback(key) {
      console.log(key)

      this.fileUpload.videoForm = {}
      this.fileUpload.textForm = {}
      this.videoPath = [] //置空文件

      this.successOssFile = this.successOssFile.splice(0, this.successOssFile.length)
      this.fileUpload.tabkey = key //等于当前的Key
    },

    //获取Tonken
    getToken() {
      let hreader = {}
      hreader[ACCESS_TOKEN] = storage.get(ACCESS_TOKEN)
      return hreader
    },

    beforeUpload(file) {
      //文件类型 (后缀)
      var suffix = file.name.substring(file.name.lastIndexOf('.') + 1)
      if (this.fileUpload.tabkey == '1' && suffix != 'mp4') {
        return this.$message.error('文件类型必须是mp4')
      }

      console.log('tabkey', this.fileUpload.tabkey)
      //告知用户是否正在上传
      this.uploadLoading = true
      this.uploadButtonText = '上传中...'

      //处理视频上传
      const data = new FormData()
      data.append('file', file)
      data.append('fileType', 'mp4')

      //设置请求头和token
      const header = {}
      header['Content-Type'] = 'multipart/form-data'
      header[ACCESS_TOKEN] = storage.get(ACCESS_TOKEN)

      axios
        .post(ossUpload(), data, { headers: header })
        .then((res) => {
          this.uploadLoading = false
          this.uploadButtonText = '选择文件'
          if (res.data.code === 200) {
            this.$message.success('上传成功！')

            res.data.uuid = file.uid
            res.data.size = file.size
            this.successOssFile.push(res.data)

            //刷新文件大小
            this.refreshFileSize()
          } else {
            this.$message.error(res.data.msg)
            this.$refs.inputFile.value = ''
          }
        })
        .catch((err) => {
          this.$message.error(err)
          this.uploadButtonText = '选择文件'
        })

      return false
    },

    //刷新大小
    refreshFileSize() {
      if (this.fileUpload.tabkey == '1' || this.fileUpload.tabkey == '2') {
      this.fileUpload.videoForm.size = 0
      for (let i = 0; i < this.successOssFile.length; i++) {
        //读取文件大小
        let fileSize = this.successOssFile[i].size

        //视频转换成MB
        var videoSize = parseFloat(fileSize) / 1024 / 1024

        //保留两位小数
        this.fileUpload.videoForm.size = this.fileUpload.videoForm.size + parseFloat(videoSize)
      }
      this.fileUpload.videoForm.sizeStr = this.fileUpload.videoForm.size.toFixed(2)
      }
    },

    //删除已上传的视频
    deleteVideo(file) {
      // 删除元素
      for (let i = 0; i < this.successOssFile.length; i++) {
        if (this.successOssFile[i].uuid == file.uid) {
          this.successOssFile.splice(i, 1)
          break
        }
      }

      this.refreshFileSize()
    },

    //弹框
    showModal() {
      this.fileUpload.visible = true
    },

    //保存
    save() {
      //视频赋给表单里面的字段
      this.successOssFile.forEach((item, index) => {
        this.videoPath.push(item.url)
      })

      if (this.parentTabKey == '2') this.videoPath.push(this.videoServerLink.videoUrl)
      if (this.parentTabKey == '3') this.videoPath.push(this.thirdAddress.videoUrl)

      //转JSON
      this.videoPath = this.videoPath.toString()

      let from
      if (this.parentTabKey == '1' && this.fileUpload.tabkey == '1') {
        from = this.videoFormV()
        if (typeof from == 'boolean' && !from) return
      } else if (this.parentTabKey == '1' && this.fileUpload.tabkey == '2') {
        from = this.textFormV()
        if (typeof from == 'boolean' && !from) return
      } else if (this.parentTabKey == '2') {
        console.log(this.videoServerLink)
        from = this.videoServerLinkV()
        if (typeof from == 'boolean' && !from) return
      } else if (this.parentTabKey == '3') {
        from = this.thirdAddressV()
        if (typeof from == 'boolean' && !from) return
      }

      //提交保存请求
      coursewareAdd(from).then((res) => {
        console.log(res)
        if (res.code == 200) {
          this.$message.success('课件保存成功！')
          this.goback()
        } else {
          this.$message.error('保存失败！')
        }
      })
    },

    //视频上传
    videoFormV() {
      // 验证课件名称是否为空
      if (!this.fileUpload.videoForm.name || this.fileUpload.videoForm.name === '') {
        this.$message.error('课件名称不能为空!')
        return false
      } else if (this.videoPath.length == 0) {
        this.$message.error('请上传课件文件！')
        return false
      }

      //给课程ID
      this.fileUpload.videoForm.courseId = this.$route.query.courseId
      this.fileUpload.videoForm.videoPath = this.videoPath
      let form = {}
      form = this.fileUpload.videoForm
      return form
    },

    //文本上传
    textFormV() {
      if (!this.fileUpload.textForm.name || this.fileUpload.textForm.name === '') {
        this.$message.error('课件名称不能为空!')
        return false
      }

      //给课程ID
      this.fileUpload.textForm.courseId = this.$route.query.courseId
      this.fileUpload.textForm.type = this.fileUpload.tabkey
      this.fileUpload.textForm.videoPath = this.videoPath
      console.log('aaaaaa', this.fileUpload.textForm)
      let form = {}
      form = this.fileUpload.textForm
      return form
    },

    //视频服务器连接
    videoServerLinkV() {
      if (!this.videoServerLink.name || this.videoServerLink.name === '') {
        this.$message.error('课件名称不能为空!')
        return false
      }

      //给课程ID
      this.videoServerLink.courseId = this.$route.query.courseId
      this.videoServerLink.videoPath = this.videoPath
      console.log(this.videoServerLink)

      let form = {}
      form = this.videoServerLink
      return form
    },

    //视频服务第三方连接
    thirdAddressV() {
      if (!this.thirdAddress.name || this.thirdAddress.name === '') {
        this.$message.error('课件名称不能为空!')
        return false
      }

      //给课程ID
      this.thirdAddress.courseId = this.$route.query.courseId;
      this.thirdAddress.videoPath = this.videoPath;

      let form = {}
      form = this.thirdAddress;
      return form;
    },
  },
}
</script>
<style scoped>
</style>