<template>
  <el-dialog v-model="props.gzkShow" title="选择图片" width="800px" :before-close="close">
    <div class="main">
      <div class="title">点击下方图片删除安全标志</div>
      <div class="imgbox">
        <img v-for="(it, ind) in list" :key="ind" :src="getImgUrl(`zygzkimg/${it}`)" alt="" @click="delImg(it)">
      </div>
      <div class="title">点击下方图片选择合适的安全标志</div>
      <div class="imgbox">
        <img v-for="it in imgArr" :src="getImgUrl(`zygzkimg/${it}`)" alt="" :key="it" @click="addImg(it)">
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">

        <el-button @click="save">保存</el-button>
        <el-button @click="close">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { getImgUrl } from "@/utils/tools.js"
import { ref, watch } from "vue"
const emits = defineEmits(["close"]);
const imgArr = ref([
  // '1.png', '2.png', '3.png', '4.png', '5.png', '6.png', '7.png', '8.png', '9.png',
])
for (let i = 1; i < 105; i++) {
  imgArr.value.push(`${i}.png`)
}
const props = defineProps({
  gzkShow: false,
  imgList: {
    type: Array,
    default: []
  }
});
const list = ref([])
watch(
  () => props.imgList,
  (val) => {
    list.value = val
    if (val) {
      imgArr.value = imgArr.value.filter(item => {
        let flag = false;
        list.value.forEach(it => {
          if (it == item) flag = true
        });
        if (flag) return false
        return true
      })
    }
  }, { deep: true, immediate: true }
)
// 添加图片
const addImg = (item) => {
  // if (list.value.length == 4) {
  //   ElMessage.warning("最多添加4张图片");
  //   return;
  // }
  list.value.push(item)
  imgArr.value = imgArr.value.filter(item => {
    let flag = false;
    list.value.forEach(it => {
      if (it == item) flag = true
    });
    if (flag) return false
    return true
  })
}
// 删除图片
const delImg = (item) => {
  list.value = list.value.filter(it => {
    return item != it
  })
  imgArr.value.push(item)
}
// 保存
const save = () => {
  emits('close', list.value)
}
// 关闭
const close = () => {
  emits('close', list.value)
}
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  text-align: center;
  background: rgb(242, 242, 242);
  min-height: 500px;

  .title {
    text-align: center;
    line-height: 60px;
    color: red;
    text-decoration: underline;
    font-size: 13px;
  }

  .imgbox {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    height: 250px;
    overflow-y: auto;

    >img {
      width: 85px;
      height: 100px;
      margin: 10px;
      box-shadow: 4px 2px 4px gray;
      cursor: pointer;
    }
  }
}
</style>
