<script setup>
import { ref } from "vue";

import { raiInterface } from "@/api/api.js";

const props = defineProps({
  modifyImgVisible: {
    type: Boolean,
    default: false,
  },
  videoAndVoiceList: {
    type: Array,
    default: [],
  },
});

const page_no = ref(1);

// 选择图片的分页
function handleCurrentChangeSelectImg(page) {
  page_no.value = page;
  getSelectImgList();
}

const $emit = defineEmits(["updateSonDate"]);
function cancelHandle() {
  $emit("update:modifyImgVisible", false);
}

function clickSelectImg(item) {
  $emit("updateSonDate", item);
  cancelHandle();
}
</script>

<template>
  <div class="container">
    <!-- 选择图片的弹框 -->
    <el-dialog title="选择图片" v-model="props.modifyImgVisible" width="80%" draggable :close-on-click-modal="false" :modal-append-to-body="false" center @close="cancelHandle">
      <div class="seleect-img-box">
        <div class="content-img" @click="clickSelectImg(item)" v-for="(item, index) in props.videoAndVoiceList" :key="index">
          <img :src="item.ImgUrl" alt="" class="item-img" />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.seleect-img-box {
  display: flex;
  flex-wrap: wrap;
  .content-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 236px;
    height: 133px;
    flex-shrink: 0;
    margin: 0 50px 50px 0;
    border: 1px solid #dcdfe6;
    cursor: pointer;
    .item-img {
      width: 222px;
      height: 119px;
    }
  }
}
</style>
