<template>
  <div class="g-components-image-swiper-picture">
    <div class="g_flex_row_start_none">
      <div class="default-img g_position_rela" @click="handlePrevEvent" v-if="swiperItem.list.length > swiperItem.num && isShowPrev">
        <img src="../../../assets/image/other/prev.png" class="g_w_28 g_h_28 g_cursor_point" style="position: absolute;left: -12px;top: 50%;transform: translateY(-50%);z-index: 1;" />
      </div>
      <div class="g_clear_scroll" style="overflow: auto hidden;max-width: 172px;" :style="{
					 'maxWidth':swiperItem.num * (swiperItem.size.width + swiperItem.mr) + 'px'
				 }">
        <div class="move-obj g_clear_scroll" :style="{
						 'transform':'translateX(' + move + 'px)',
						 'height':swiperItem.size.height + 'px',
					 }">
          <div class="g_flex_row_start image-box" :style="{'width':(swiperItem.size.width + swiperItem.mr) * swiperItem.list.length + 'px'}" :class="'g_h_' + swiperItem.size.height">
            <div class="g_cursor_point g_flex_row_start" v-for="(item,index) in swiperItem.list" :key="index" :class="'g_mr_' + mr">
              <div v-if="item.indexOf('.mp4') == -1">
                <a-image :width="swiperItem.size.width" :height="swiperItem.size.height" :src="decodeURI(item)" class="g_flex_column_center" style="object-fit: cover;" />
              </div>
              <div v-if="item.indexOf('.mp4') > 0">
                <div class="mask-video g_flex_c" :style="{
									   'width':swiperItem.size.width + 'px',
									   'height':swiperItem.size.height + 'px'
									 }" @click="handleOpenVideoModal(item)">
                  <i class="iconfont icon-kaishi g_c_c g_fsi_20"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="default-img g_position_rela" @click="handleNextEvent" v-if="swiperItem.list.length > swiperItem.num && isShowNext">
        <img src="../../../assets/image/other/next.png" class="g_w_28 g_h_28 g_cursor_point" style="position: absolute;right: -12px;top: 50%;transform: translateY(-50%);z-index: 1;" />
      </div>
      <div class="g_flex_column_center g_fs_14 g_c_6 g_cursor_point" style="text-decoration: underline;" @click="handleOpenUploadModal" :class="swiperItem.list.length == 0 ? '' : 'g_ml_22'" v-if="swiperItem.isEdit">编辑</div>
    </div>

    <!-- 视频 -->
    <videoPreview :videoModal="videoModal" />
    <!-- <a-modal v-model:open="videoModal.isShow" title :footer="null" style="width: 734px;" wrapClassName="video-modal" :destroyOnClose="true">
      <div class="g_flex_row_center">
        <video :controls="true" style="width: 90%;max-height:calc(100vh - 200px);">
          <source :src="videoModal.url" type="video/mp4" />
          <source :src="videoModal.url" type="video/ogg" />您的浏览器不支持 HTML5 video 标签。
        </video>
      </div>
    </a-modal>-->
  </div>
</template>

<script setup>
/* 轮播式图片
 * @params list 展示的数组。
 * @params size 尺寸。对象形式，存放图片的宽高
 * @params num  默认显示的数量，数值类型
 * @params mr   右边距，数值类型
 * @params edit 是否显示编辑按钮
 */
import { ref, onMounted, getCurrentInstance, watch, defineEmits, defineProps } from 'vue'
import { PlusOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import videoPreview from './videoPreview.vue'
/* #################### 初始化事件 #################### */
const commonJS = getCurrentInstance().appContext.app.config.globalProperties.G
const props = defineProps({
  list: {
    type: Array,
    default: () => {
      return []
    },
  },
  size: {
    type: Object,
    default: () => {
      return {
        width: 80,
        height: 45,
      }
    },
  },
  num: {
    type: Number,
    default: () => {
      return 4
    },
  },
  mr: {
    type: Number,
    default: () => {
      return 5
    },
  },
  edit: {
    type: Boolean,
    default: () => {
      return false
    },
  },
})

const swiperItem = ref({
  list: [],
  size: {
    width: 0,
    height: 0,
  },
  num: 4,
  mr: 5,
  isEdit: false,
})
onMounted(() => {
  let _list = []
  if (props.list && props.list.length > 0) {
    _list = props.list
  } else {
    _list = []
  }
  if (!props.size) {
    props.size.width = 80
    props.size.height = 45
  }
  if (_list.length > props.num) {
    isShowPrev.value = false
    isShowNext.value = true
  } else {
    isShowPrev.value = false
    isShowNext.value = false
  }
  if (!props.num) {
    props.num = 4
  }
  if (!props.mr) {
    props.mr = 5
  }
  if (!props.edit) {
    props.edit = false
  }
  swiperItem.value = {
    list: _list,
    size: {
      width: Number(props.size.width),
      height: Number(props.size.height),
    },
    num: Number(props.num),
    mr: Number(props.mr),
    isEdit: props.edit,
  }
})

/* #################### 控制器 #################### */
const isShowPrev = ref(false)
const isShowNext = ref(true)
const move = ref(0)
const handlePrevEvent = () => {
  // 上一个
  if (move.value >= 0) {
    move.value = 0
    isShowPrev.value = false
    isShowNext.value = true
  } else {
    move.value += swiperItem.value.size.width + swiperItem.value.mr
    isShowPrev.value = true
    isShowNext.value = true
    if (move.value == 0) {
      move.value = 0
      isShowPrev.value = false
      isShowNext.value = true
    }
  }
}
const handleNextEvent = () => {
  // 下一个
  if (move.value <= -(swiperItem.value.size.width + swiperItem.value.mr) * (swiperItem.value.list.length - swiperItem.value.num)) {
    move.value = -(swiperItem.value.size.width + swiperItem.value.mr) * (swiperItem.value.list.length - swiperItem.value.num)
    isShowPrev.value = true
    isShowNext.value = false
  } else {
    isShowPrev.value = true
    isShowNext.value = true
    move.value -= swiperItem.value.size.width + swiperItem.value.mr
    if (move.value <= -(swiperItem.value.size.width + swiperItem.value.mr) * (swiperItem.value.list.length - swiperItem.value.num)) {
      move.value = -(swiperItem.value.size.width + swiperItem.value.mr) * (swiperItem.value.list.length - swiperItem.value.num)
      isShowPrev.value = true
      isShowNext.value = false
    }
  }
}
const handleOpenUploadModal = () => {
  // 编辑按钮
}

/* #################### 视频弹窗 #################### */
const videoModal = ref({
  isShow: false,
  url: '',
})
const handleOpenVideoModal = ($data) => {
  // 打开视频弹窗
  videoModal.value.url = $data
  videoModal.value.isShow = true
}
const bodyStyle = ref({
  width: '800px',
  top: '50%',
  transform: 'translateY(-50%)',
  'padding-top': '0',
  'padding-bottom': '0',
})
</script>

<style lang="less">
.g-components-image-swiper-picture {
  .mask-video {
    background-color: #000;
  }
  .move-obj {
    transition: all 0.3s linear;
  }
}

</style>