<script setup>
// 引入依赖
import api from '@/api/course'
// import com_api from '@/api/common'
// import custom from '@/utils/custom'
// import WarningBar from '@/components/warningBar/warningBar.vue'
import {ref,onMounted,watch,inject  } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
import { useUserStore } from '@/pinia/modules/user'
const userStore = useUserStore()
// import chapterCom from '../components/chapter.vue'
const props = defineProps(['url_name'])
const emit = defineEmits(['on-success'])
import { clients, getNowDate } from '@/utils'
import { getToken } from '@/utils/auth'
// 变量
const headers = ref({ Authorization: 'Bearer ' + getToken() })
const drawer = ref(false)
const queryParams =ref({
  page:1,
  pageSize:10,
  name:'',
  subject:''
})
// 生命周期
const subjectList = inject('subjectList')
const current_subject = inject('current_subject')
onMounted(() => {
  // console.log(headers.value)
})

// 方法
function openExercisesWinFunc() {
  drawer.value = true
}
function onSubmit() {

}
function onReset() {
  queryParams.value = {
    page:1,
    pageSize:10,
    name:''
  }
}
async function httpUpload(file) { // 上传oss
  console.log(file)
      // this.$set(this.chapterTable.sel, 'percentage', 0)
      // this.$set(this.chapterTable.sel, 'loading', true)
      const client = clients()
      // 判断扩展名
      const tmpcnt = file.file.name.lastIndexOf('.')
      const exname = file.file.name.substring(tmpcnt + 1)
      const imgUrl = 'http://gwjxb.oss-cn-chengdu.aliyuncs.com'
      const fileName = `static/uploadfile/${getNowDate()}/${file.file.uid}.${exname}`
      await client.multipartUpload(fileName, file.file, {
        progress: (p, cpt, res) => {
          // 获取分片上传进度、断点和返回值。
          // this.$set(
          //   this.chapterTable.sel,
          //   'percentage',
          //   (Math.floor(p * 100) / 100) * 100
          // )
          // if (p === 1) {
          //   this.$set(this.chapterTable.sel, 'loading', false)
          // }
        },
        parallel: 5, // 并发上传的分片数量
        partSize: 1024 * 1024 * 20,
        // headers,
        // 指定meta参数，自定义Object的元信息。通过head接口可以获取到Object的meta数据。
        meta: {
          year: 2020,
          people: 'test'
        },
        mime: file.type // 上传文件类型
      })
      // 填写Object完整路径，例如exampledir/exampleobject.txt。Object完整路径中不能包含Bucket名称。
      const head = await client.head(fileName)
      if (head.status === 200) {
        // 上传成功之后添加媒体库
        // this.addDepotFun(`${imgUrl}/${fileName}`, file.file.name)
        // 数据赋值
        const params = {
          url:`${imgUrl}/${fileName}`,
          url_name:file.file.name
        }
        // console.log(params)
        emit('on-success',params)
        // this.$set(this.chapterTable.sel, 'url', `${imgUrl}/${fileName}`)
        // this.$set(this.chapterTable.sel, 'url_name', file.file.name)
      }
    }
</script>
<template>
  <div>
    <el-button size="small" type="primary" @click="openExercisesWinFunc">点击上传</el-button>
    <div v-if="url_name">{{url_name}}</div>
    <el-drawer v-model="drawer" title="媒体库" size="50%">
      <div class="drawer-section">
        <!--      搜索框-->
        <div class="search-box">
          <el-form ref="searchForm" :inline="true" :model="queryParams">
            <el-form-item label="课程名称">
              <el-input v-model="queryParams.name" placeholder="根据课程名称进行查询" />
            </el-form-item>
            <el-form-item label="课程分类">
              <el-select v-model="queryParams.subject" clearable placeholder="请选择">
                <el-option
                  v-for="item in subjectList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="small" type="primary" icon="search" @click="onSubmit">查询</el-button>
              <el-button size="small" icon="refresh" @click="onReset">重置</el-button>
            </el-form-item>
            <el-form-item>
              <el-upload
                :headers="headers"
                class="upload-demo"
                action
                :http-request="httpUpload"
                :show-file-list="false"
              >
                <el-button
                  size="small"
                  type="text"
                >普通上传</el-button>
              </el-upload>
            </el-form-item>
          </el-form>
        </div>
        <!--      数据列表-->
        <div class="list-box">

        </div>
      </div>
    </el-drawer>
  </div>
</template>
<style scoped>
  .drawer-section{
    padding: 10px;
  }
</style>
