<template>
  <!-- 上传图片组件 -->
  <div>
    <!-- <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'副banner')})">
      <img v-if="imgUrl" :src="imgUrl+viceJson.bannerImg" class="avatar" />
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <span v-if="viceJson.bannerImg!==''" @click="viceJson.bannerImg=''" style="color: #F56C6C; cursor: pointer">删除</span> -->
    <div class="imgBox" v-if="imgVal == ''" @click="openImgClick">
      <i class="el-icon-plus"></i>
    </div>
    <div>
      <img style="max-width:300px" :src="this.imgVal" alt="">
      <span v-if="imgVal !== ''" @click="removeImg()" style="color: #F56C6C; cursor: pointer">删除</span>
    </div>
    <el-dialog title="图片列表" append-to-body top="8vh" :close-on-click-modal="false" :close-on-press-escape="false"
      :visible.sync="imgShow" width="55%">
      <el-form :inline="true" size="small">
        <el-button type="primary" icon="el-icon-edit" size="small" @click="uploadShow = true">上传</el-button>
        <div class="imgContent">
          <div class="imgRow">
            <div class="imgInfo" v-for="(item, index) in imgList" :key="index" :class="index == num ? 'bor' : ''">
              <div class="image">
                <el-image style="width: 200px; max-height: 250px" :fit="'fit'" :src="imgUrl + item.name"
                  :preview-src-list="srcList">
                </el-image>
                <!-- <img :src="imgUrl+item.name" alt=""> -->
              </div>
              <div class="imgBtn">
                <el-button size="mini" @click="num = index">选择</el-button>
              </div>
            </div>
          </div>
        </div>
        <el-pagination style="float: right" background layout="total, sizes, prev, pager, next, jumper" :total="total"
          :current-page="form.pageNum" :page-size="form.pageSize" @size-change="handleSizeChange"
          @current-change="handleCurrentChange"></el-pagination>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="imgShow = false">取 消</el-button>
        <el-button type="primary" :disabled="num == -1 ? true : false" @click="imgClick">确 定</el-button>
      </span>
      <el-dialog width="30%" title="图片上传" :visible.sync="uploadShow" append-to-body>
        <el-upload class="upload-demo" drag :action="imgapi" multiple :on-success="uploadClick">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传jpg/png文件</div>
        </el-upload>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import { post, get } from "@/api/common";
export default {
  props: {
    imgValue: String
  },
  data () {
    return {
      imgUrl: process.env.VUE_APP_BASE_IMG_URL, //图片地址
      imgapi: process.env.VUE_APP_BASE_IMG_API, //上传图片地址
      imgShow: false,
      imgList: [],
      srcList: [],
      num: -1,
      total: 0,
      form: {
        pageNum: 1,
        pageSize: 10,
      },
      imgVal: "",
      uploadShow: false,
      unloadImg: '',
    }
  },
  watch: {
    // 监听传入组件值的变化
    imgValue (newVal, oldVal) {
      if (newVal != this.imgUrl && newVal !== '') {
        this.imgVal = newVal
      } else {
        this.imgVal = ""
      }
    }
  },
  mounted () {
    setTimeout(() => {
      // 默认值赋值
      if (this.imgValue !== "" && this.imgValue != this.imgUrl) {
        this.imgVal = this.imgValue
      }
    }, 100)
  },
  methods: {
    // 打开图片列表
    openImgClick () {
      get('/filerecord/list', this.form).then(res => {
        this.total = res.data.total
        this.imgList = res.data.list
        this.imgList.forEach((val) => {
          this.srcList.push(this.imgUrl + val.name)
        })
        this.imgShow = true
      })
    },
    // 确认选择图片
    imgClick () {
      this.imgVal = this.imgUrl + this.imgList[this.num].name
      this.imgShow = false
      this.$emit('imgVal', this.imgList[this.num].name)
    },
    // 删除图片
    removeImg () {
      this.imgVal = ""
      this.$emit('removeClick', '')
    },
    // 每页数量
    handleSizeChange (val) {
      this.form.pageNum = 1;
      this.form.pageSize = val;
      this.openImgClick();
    },
    // 当前页
    handleCurrentChange (val) {
      this.form.pageNum = val;
      this.openImgClick();
    },
    // 上传图片
    uploadClick (file, fileList) {
      if (file.code === 10000) {
        this.$message.success('上传成功!')
        this.openImgClick()
        this.uploadShow = false
      }
    }
  }
}
</script>

<style lang="scss">
.imgBox {
  width: 120px;
  height: 120px;
  border: 1px dashed #d9d9d9;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.imgContent {
  width: 100%;
  margin-top: 30px;

  .imgRow {
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-between;

    .imgInfo {
      width: 200px;
      height: 280px;
      margin: 15px 0;
      margin-right: 10px;
      cursor: pointer;
      background-color: transparent;
      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .image {
        width: 200px;
        height: 250px;

        img {
          width: 100%;
          height: auto;
        }
      }

      .imgBtn {
        text-align: right;
        // line-height: 50px;
      }
    }
  }
}

.bor {
  border: 1px solid #409eff;
}

.imgBox:hover {
  border-color: #409eff;
}
</style>