<template>
  <div>
    <div style="text-align: right;">
      <span style="color: #aaa;">只能上传png、jgp图片</span>
      <el-button @click="upShowUp" style="background-color: #f6f7f8;">上传文件</el-button>
    </div>
    <ul class="ulStyle" :class="[activedata == -1 ? '' : 'heightStyle']">
      <li v-for="item in list" :key="item.id" class="listyle" :class="[selectList.id == item.id ? 'actives' : '']"
        @click="clickEvent(item)">
        <el-icon style="position: absolute;right: 0;top: 0;" v-if="selectList.id == item.id" @click="deleteImg(item)">
          <CloseBold />
        </el-icon>
        <img :src="item.url" style="width: 100px;height: 100px;" alt="">
      </li>
    </ul>
    <el-dialog v-model="showUpload" title="">
      <MultiImageUpload v-model="fileList" @upDataEvent="upDataEvent" />
      <template #footer>
        <el-button type="primary" :loading="loadings" @click="doSubmit">确认</el-button>
      </template>
    </el-dialog>

  </div>
</template>
<script>
import API from './picture'
import MultiImageUpload from "@/components/Upload/MultiImageUpload.vue";
export default {
  components: {
    MultiImageUpload
  },
  props: ["activedata", "list"],
  data() {
    return {
      showUpload: false,
      selectList: [],
      fileList: [],
      loadings: false
    }
  },
  mounted() {
  },
  methods: {
    upDataEvent(d) {
      this.loadings = d
    },
    upShowUp() {
      this.showUpload = true;
    },
    async doSubmit() {
      if (this.fileList.length) {
        let res = await API.add({
          pictureClassifyId: this.activedata,
          urls: this.fileList
        })
        if (res.code == 200) {
          this.showUpload = false;
          this.fileList = []
          this.$emit('getList')
        }
      } else {

      }
    },
    deleteImg(d) {
      ElMessageBox.confirm("是否删除数据项?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(
        async () => {
          let res = await API.deleteByIds(d.id)
          if (res.code == 200) {
            this.$emit('getList')
          }
        }
      );
    },
    clickEvent(d) {
      this.selectList = d
      this.$emit('onSelectImage', d)
    },
  }
}
</script>
<style>
ul,
li {
  list-style: none;
}

.show {
  position: absolute;
  right: -10px;
  top: -10px;
  display: none;
}

.listyle:hover>.show {
  display: block;
}

.buttonstyle {
  border-radius: 50%;
  color: #db1616;
  background-color: #fff;
  font-size: 20px;
}

.ulStyle {
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
  height: 402px;
}

.heightStyle {
  height: 402px;
}


.listyle {
  width: 110px;
  height: 110px;
  margin-right: 10px;
  margin-top: 10px;
  border: 5px solid #fff;
  position: relative;
  text-align: center;
}

.listyle:last-child {
  margin-right: auto;
}

.upImgStyles {
  cursor: pointer;
  width: 110px;
  height: 110px;
  line-height: 110px;
  text-align: center;
  border: 1px dashed #ccc;
  border-radius: 1%;
  font-size: 30px;
  color: #ccc;
  margin-right: 10px;
  margin-top: 10px;
}


.actives {
  border: 5px solid #1890ff;
}
</style>
