<template>
  <view>
    <view class="flex justify-between items-center px-2.5 py-2">
      <view>已选{{ selectList.length }}项</view>
      <view @click="selectAll">{{ isSelectAll ? '取消全选' : '全选' }}</view>
    </view>
    <view class="mx-2.5 pb-25">
      <VideoList ref="videoListRef" type="select" @change="handleChange" />
    </view>
    <view class="fixed bottom-0 flex justify-center w-full w-300 mx-auto bg-white">
      <view class="flex justify-between w-200 mr-4 h-160">
        <view @click="handleDownload">
          <view class="flex flex-col items-center">
            <image
              src="https://oss-lock.xhjcn.ltd/mp/icon_video_download.png"
              class="w-50 h-50"
            ></image>
            <view class="mt-2">下载</view>
          </view>
        </view>
        <view @click="handleDelete">
          <view class="flex flex-col items-center">
            <image
              src="https://oss-lock.xhjcn.ltd/mp/icon_video_delete.png"
              class="w-50 h-50"
            ></image>
            <view class="mt-2">删除</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { getCurrentInstance, ref } from 'vue'
  import VideoList from './VideoList.vue'
  import { deleteVideo } from '@/api/sdk'

  const instance = getCurrentInstance().proxy
  const eventChannel = instance.getOpenerEventChannel()

  const videoListRef = ref(null)

  const isSelectAll = ref(false)

  const selectList = ref([])

  const pending = ref(false)

  const handleChange = list => {
    selectList.value = list
  }

  const selectAll = () => {
    isSelectAll.value = !isSelectAll.value
    videoListRef.value.selectAll(isSelectAll.value)
  }

  const handleDownload = () => {
    console.log('下载')
    if (selectList.value.length === 0) {
      uni.showToast({
        title: '请选择要下载的视频',
        icon: 'none'
      })
      return
    }
    if (selectList.value.length > 1) {
      uni.showToast({
        title: '视频暂不支持批量下载',
        icon: 'none'
      })
      return
    }
    uni.showLoading({
      title: '下载中'
    })
    pending.value = true
    const url = selectList.value[0].videoUrl
    uni.downloadFile({
      url,
      success: res => {
        uni.saveVideoToPhotosAlbum({
          filePath: res.tempFilePath,
          success: () => {
            uni.hideLoading()
            pending.value = false
            uni.showToast({
              title: '下载成功',
              icon: 'none'
            })
          },
          fail: () => {
            uni.hideLoading()
            pending.value = false
            uni.showToast({
              title: '下载失败',
              icon: 'none'
            })
          }
        })
      },
      fail: () => {
        uni.hideLoading()
        pending.value = false
        uni.showToast({
          title: '下载失败',
          icon: 'none'
        })
      }
    })
  }

  const handleDelete = async () => {
    if (selectList.value.length === 0) {
      uni.showToast({
        title: '请选择要删除的视频',
        icon: 'none'
      })
      return
    }
    uni.showLoading({
      title: '删除中'
    })
    pending.value = true
    const idList = selectList.value.map(item => item.recordId)
    const { code, message } = await deleteVideo(idList)
    uni.hideLoading()
    pending.value = false
    if (code === 0) {
      videoListRef.value.refresh()
      eventChannel.emit('refresh')
      uni.showToast({
        title: '删除成功',
        icon: 'success'
      })
    } else {
      uni.showToast({
        title: message,
        icon: 'none'
      })
    }
  }
</script>
