<template>
  <div>
    <a-modal
      :title="title"
      :visible.sync="open"
      @cancel="cancel"
      :footer="null"
      width="70%"
    >
    <a-divider orientation="left">外部URL方式</a-divider>
      <a-row style="margin-bottom: 20px">
        <a-col :span="6">
          <a-input v-model="url" placeholder="在线图片"></a-input>
        </a-col>
        <a-col :span="4">
          <a-button
            type="primary"
            style="margin-left: 5px"
            @click="selectImage(url)"
            >提交</a-button
          >
        </a-col>
      </a-row>
      <a-divider orientation="left">选择图片方式</a-divider>
      <a-row style="margin-bottom: 20px">
        <a-col :span="4">
          <a-button type="primary" @click="goFile">上传图片</a-button>
          <input
            type="file"
            style="display: none"
            ref="files"
            @change="uploadImg"
          />
        </a-col>
      </a-row>
      <!-- <el-divider></el-divider> -->
      <div style="height: 50vh; overflow-y: scroll; overflow-x: hidden">
        <a-row :gutter="4">
          <a-col
            :span="6"
            v-for="item of imageList"
            :key="item.id"
            style="text-align: center"
          >
            <a-card shadow="hover">
              <img
                style="width: 100px; height: 100px"
                :src="baseapi + item.url"
              />
              <div style="padding: 14px">
                <div class="bottom clearfix">
                  <el-button
                    type="text"
                    class="button"
                    @click="selectImage(baseapi + item.url)"
                    >选择图片</el-button
                  >
                  <el-button
                    type="text"
                    class="button"
                    style="color: red"
                    @click="deleteImage(item.id)"
                    >删除</el-button
                  >
                </div>
              </div>
            </a-card>
          </a-col>
        </a-row>
      </div>
    </a-modal>
  </div>
</template>
<script>
import { upload, deleteImages, list } from "@/api/images.js";
export default {
  data() {
    return {
      title: "",
      open: false,
      url: "",
      imageList: [],
      baseapi: process.env.VUE_APP_BASE_API,
      fit: "fill",
    };
  },
  methods: {
    init() {
      this.open = true;
      this.title = "选择图片";
      this.getList();
    },
    selectImage(url) {
      if (!url) {
        this.$message.warning("请选择图片或填写图片url");
        return;
      }
      this.$emit("ok", String(url));
      this.cancel();
    },
    deleteImage(id) {
      deleteImages(id).then((res) => {
        if (res.code === 200) {
          this.$message.info("删除成功");
          this.getList();
        } else {
          this.$message.warning("删除失败");
        }
      });
    },
    uploadImg(e) {
      let fileList = e.target.files;
      let form = new FormData();
      if (fileList.length != 0) {
        for (let i = 0; i < fileList.length; i++) {
          form.append("imgFile", fileList[i]);
        }
      }
      upload(form).then((res) => {
        if (res.code === 200) {
          this.$message.info("上传成功");
          this.getList();
        } else {
          this.$message.warning(res.msg);
        }
      });
    },
    goFile() {
      this.$refs.files.click();
    },
    getList() {
      list().then((res) => {
        if (res.code === 200) {
          this.imageList = res.data;
        }
      });
    },
    cancel() {
      this.open = false;
      this.title = "";
      this.url = "";
    },
  },
};
</script>
<style lang="css">
</style>