<script setup lang="ts">
import { getCoverList } from '../../api'
import { PictureFilled, ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
import UploadImg from './UploadImg.vue'

const emit = defineEmits<{
  (e: 'update:dialogVisible', dialogVisible: false): void
  (e: 'change', url: string): void
}>()

defineProps({
  dialogVisible: {
    type: Boolean,
    required: true
  }
})

// 关闭弹框
const handleCancel = () => {
  emit('update:dialogVisible', false)
}

// 选择封面
const changeCover = () => {
  emit('update:dialogVisible', false)
  emit('change', courseCover.value)
}

// 封面
const courseCover = ref('')
// 课程封面图轮播
let swiperCovers: [{ id: string; url: string }[]] = $ref([[]])
// 获取swiper 自定义左右切换按钮
let swiper = ref()
const swiperChange = (type?: string) => {
  type === 'prev' ? swiper.value.prev() : swiper.value.next()
}
// 获取封面
getCoverList({ type: '2' }).then(res => {
  const filtersData = res.data.list
  let index = 0
  while (index < filtersData.length) {
    swiperCovers.push(filtersData.slice(index, (index += 8)))
  }
  swiperCovers.forEach((item: any, index: number) => {
    if (item.length === 0) {
      swiperCovers.splice(index, 1)
    }
  })
})

let isSwiperBtn = $ref(0)
const watchSwiper = (index: number) => {
  if (!index) {
    isSwiperBtn = 0
  } else {
    swiperCovers.length === index + 1 ? (isSwiperBtn = 1) : (isSwiperBtn = 2)
  }
}

const swiperItemHandle = (url: string) => {
  courseCover.value = url
}
</script>

<template>
  <div class="add-cover">
    <el-dialog :model-value="dialogVisible" :before-close="handleCancel" title="选择封面" width="770px">
      <div class="video-cover">
        <div class="img-box">
          <el-icon :size="50" color="#ccc" v-if="courseCover == ''">
            <PictureFilled></PictureFilled>
          </el-icon>
          <div v-else class="cover-img" :style="`background-image:url(${courseCover})`"></div>
        </div>
        <div class="video-cover_right">
          <UploadImg accept=".jpg,.jpeg,.gif,.png" v-model="courseCover"></UploadImg>
          <div class="list">
            <div class="item">
              <img src="/center_resource/upload-video-icon.png" class="icon" />
              <div class="text">该图片作为课程的封面图，用于课程封面显示</div>
            </div>
            <div class="item">
              <img src="/center_resource/upload-video-icon.png" class="icon" />
              <div class="text">支持jpg/jpeg/gif/png格式</div>
            </div>
            <div class="item">
              <img src="/center_resource/upload-video-icon.png" class="icon" />
              <div class="text">支持小于4M，最好宽240*高175*及以上尺寸</div>
            </div>
            <div class="item">
              <img src="/center_resource/upload-video-icon.png" class="icon" />
              <div class="text">可以自己上传图片，也可以从下面这些图片中选择使用</div>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-box">
        <div class="block text-center" v-if="swiperCovers.length">
          <el-carousel
            @change="watchSwiper"
            height="202px"
            :autoplay="false"
            arrow="never"
            trigger="click"
            ref="swiper">
            <el-carousel-item v-for="(item, index) in swiperCovers" :key="index" class="cover-list">
              <div
                @click="swiperItemHandle(cItem.url)"
                :key="cItem.id"
                v-for="cItem in item"
                :style="`background-image:url(${cItem.url})`"
                class="cover-list_item"></div>
            </el-carousel-item>
          </el-carousel>
        </div>
        <el-icon v-if="isSwiperBtn != 0" class="arrow left" @click="swiperChange('prev')"><ArrowLeftBold /></el-icon>
        <el-icon v-if="isSwiperBtn != 1" class="arrow right" @click="swiperChange('next')"><ArrowRightBold /></el-icon>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="changeCover">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<style lang="scss">
.video-cover {
  display: flex;
  .img-box {
    width: 208px;
    height: 130px;
    border-radius: 4px;
    background: #f7f7f7;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    // img {
    //   width: 100%;
    //   // height: 100%;
    //   display: block;
    // }
    .cover-img {
      width: 208px;
      height: 130px;
      background-size: cover;
    }
  }
  .video-cover_right {
    margin-left: 20px;
    .list {
      .item {
        display: flex;
        align-items: center;
        margin-top: 12px;
        img {
          width: 9px;
          display: block;
          margin-right: 5px;
        }
        .text {
          font-size: 12px;
          color: #999999;
          line-height: 100%;
        }
      }
    }
  }
}
.swiper-box {
  min-width: 660px;
  margin-top: 20px;
  padding: 0 40px;
  position: relative;
  .arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
    color: #d5d5d5;
    cursor: pointer;
    &.left {
      left: 0;
    }
    &.right {
      right: 10px;
    }
  }
  .cover-list {
    display: flex;
    flex-wrap: wrap;
    .cover-list_item {
      display: block;
      width: 155px;
      height: 96px;
      margin: 0 10px 10px 0;
      border-radius: 4px;
      cursor: pointer;
      background-size: cover;
    }
  }
}
:deep(.el-carousel__indicators--horizontal) {
  display: none;
}
</style>
