<script setup lang="ts">
import ViewTop from '../components/ViewTop.vue'
import UploadImg from '../components/UploadImg.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getVideoPpt, createPpt, updatePpt, deletePpt } from '../api'

// 路由
const router = useRouter()

const appList = ref()

const id = router.currentRoute.value.query.id as string
// 获取视频详情、课件列表
let videoDetails:any = $ref({})
let videoPpt:any = $ref([])

const listDetail = () => {
  getVideoPpt({ id: id }).then(res => {
    videoDetails = res.data.video
    videoPpt = res.data.ppts
  })
}
listDetail()

// 视频课件列表
const listOptions = $computed(() => {
  return {
    columns: [
      { label: '课程图片', slots: 'table-cover', align: 'center' },
      { label: '文件名', prop: 'name', align: 'center' },
      { label: '时码', prop: 'point', align: 'center' },
      { label: '操作', slots: 'table-operate', align: 'center', fixed: 'right' }
    ],
    data: videoPpt
  }
})

// 新增弹窗
const dialogFormVisible = ref(false)
const covers:any = $ref([])
const coverList: any = $ref([])
const coverRemove: any = []
// 监听图片上传后 组合成table所用的数据
watch(
  () => covers,
  value => {
    coverRemove.map((item: any) => {
      const index = value.findIndex((i:any) => i.url === item )
      if (index !== -1) {
        value.splice(index, 1)
      }
    })
    value.forEach((item: any, index: number) => {
      const findItem = coverList.find((i:any) => i.url === item.url)
      if (!findItem) {
        coverList.push({
          name: item.name,
          url: item.url,
          point: '',
          index: index
        })
      }
    })
  }
)
// 添加课程的列表
const uploadList = $computed(() => {
  return {
    columns: [
      { label: '课程图片', slots: 'table-cover', align: 'center' },
      { label: '文件名', prop: 'name', align: 'center' },
      { label: '时码', slots: 'table-input', align: 'center' },
      { label: '操作', slots: 'table-operate', align: 'center', fixed: 'right' }
    ],
    data: coverList
  }
})
// 提交课程列表
const submitCourseList = () => {
  let flag = false
  coverList.forEach((item: any) => {
    if (item.point === '') {
      ElMessage('时间码不能为空')
      flag = true
      return false
    }
  })
  if (!flag) {
    createPpt({ id: id, ppts: JSON.stringify(coverList) }).then((res:any) => {
      if (res.code === 0) {
        listDetail()
        ElMessage({
          type: 'success',
          message: '上传成功',
        })
        dialogFormVisible.value = false
      }
    })
  }
}
// 删除上传的列表
const deleteUploadList = (index: number, url: string) => {
  coverRemove.push(url)
  coverList.splice(index, 1)
}

// 修改时间码
const uploadTimeCode = (ppt_id: string, name: string, url: string) => {
  ElMessageBox.prompt('请输入时间码', '提示', {
    confirmButtonText: 'OK',
    cancelButtonText: 'Cancel',
    inputErrorMessage: '请输入时间码',
  })
    .then(({ value }) => {
      if (value !== '' && value !== null) {
        updatePpt({
          id: id,
          ppt_id: ppt_id,
          name: name,
          point: value,
          url: url
        }).then((res:any) => {
          if (res.code === 0) {
            listDetail()
            ElMessage({
              type: 'success',
              message: '更新成功',
            })
          }
        })
      }
    })
}

// 删除课件
const deleteCourseware = (ppt_id: string) => {
  deletePpt({ id: id, ppt_id: ppt_id }).then((res:any) => {
    if (res.code === 0) {
      listDetail()
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    }
  })
}
</script>

<template>
  <el-dialog v-model="dialogFormVisible">
    <UploadImg v-model="covers"></UploadImg>
    <AppList v-bind="uploadList">
      <template #table-cover="{ row }">
        <img :src="row.url" style="width:100px;display: block;">
      </template>
      <template #table-input="{ row }">
        <el-input v-model="row.point" placeholder="00:00" />
      </template>
      <template #table-operate="{ row }">
        <el-button @click="deleteUploadList(row.index, row.url)">删除</el-button>
      </template>
    </AppList>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submitCourseList"
          >确认</el-button
        >
      </span>
    </template>
  </el-dialog>
  <AppCard title="编辑视频资源">
    <ViewTop :data="videoDetails"></ViewTop>
  </AppCard>
  <AppCard>
    <el-button v-permission="'v1-resource-video-create-ppt'" @click="dialogFormVisible = true" type="primary">关联课件</el-button>
    <AppList v-bind="listOptions" ref="appList" stripe>
      <template #table-cover="{ row }">
        <img :src="row.url" style="width:100px;display: block;">
      </template>
      <template #table-input="{ row }">
        <el-input v-model="row.point" placeholder="00:00" />
      </template>
      <template #table-operate="{ row }">
        <el-button v-permission="'v1-resource-video-update-ppt'" @click="uploadTimeCode(row.id, row.name, row.url)">修改时间码</el-button>
        <el-button v-permission="'v1-resource-video-delete-ppt'" @click="deleteCourseware(row.id)">删除</el-button>
      </template>
    </AppList>
  </AppCard>
</template>
<style lang="scss" scoped>
.btn-box{
  display: flex;
  justify-content: right;
  .btn-item{
    width: 127px;
    line-height: 36px;
    background: #AA1941;
    border-radius: 20px;
    margin-right: 10px;
    font-size: 14px;
    color: #FFFFFF;
    text-align: center;
  }
}
</style>
