<template>
  <div class="container">
    <!-- 选择图片的弹框 -->
    <el-dialog title="选择图片" :visible.sync="modifyImgVisible" width="80%" v-dialogDrag :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 videoAndVoiceList" :key="index">
          <img :src="item.ImgUrl" alt="" class="item-img" />
        </div>
      </div>
      <!-- <el-col :span="24" class="toolbar">
        <m-page :total="total" :page_no="page_no" :pageSize="10" @handleCurrentChange="handleCurrentChangeSelectImg" />
      </el-col> -->
    </el-dialog>
  </div>
</template>

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

export default {
  name: "",
  components: {},
  props: {
    modifyImgVisible: {
      type: Boolean,
      default: false,
    },
    videoAndVoiceList: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      imgListArr: [],
      total: 0,
      page_no: 1,
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    // this.getSelectImgListAll();
  },
  methods: {
    // 选择图片的分页
    handleCurrentChangeSelectImg(page) {
      this.page_no = page;
      this.getSelectImgList();
    },
    cancelHandle() {
      this.$emit("update:modifyImgVisible", false);
    },
    clickSelectImg(item) {
      this.$parent.defaultImage = item.ImgUrl;
      this.$parent.shareImg = item.ShareImg;
      this.cancelHandle();
    },
  },
};
</script>
<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>
