<template>
  <div class="pic-upload-source">
    <div style="display: block" class="pic-upload-source-box">
      <ul
        v-show="uploadFiles.length > 0"
        class="pic-upload-list pic-upload-list--picture-card"
      >
        <li
          v-for="(picture, index) in uploadFiles"
          :key="index"
          class="pic-upload-list--item"
          :style="picCardWhStyle"
        >
          <div style="display: block">
            <img
              alt=""
              class="pic-upload-list--item-thumbnail"
              :src="picture"
            />
            <span class="pic-upload-list--item-actions">
              <span class="pic-upload-list--item-delete">
                <i class="el-icon-delete" @click="delImg(picture)"></i>
              </span>
            </span>
          </div>
        </li>
      </ul>
      <div
        v-show="showFileList || (!showFileList && uploadFiles.length === 0)"
        class="pic-upload pic-upload--picture-card"
        :style="picCardWhStyle"
        @click="showMedia"
      >
        <i class="el-icon-plus" :style="picCardIFontSize"></i>
      </div>
    </div>
    <media ref="media" :append-to-body="true" @save-file="saveFile" />
  </div>
</template>

<script>
  import { translateTitle as __ } from '@/utils/i18n'
  import media from '@/components/material/Media'

  export default {
    name: 'PicUpload',
    components: { media },
    props: {
      width: {
        type: Number,
        default: 148,
      },
      height: {
        type: Number,
        default: 148,
      },
      // 多图片上传/单图片上传
      showFileList: {
        type: Boolean,
        default: true,
      },
      fileList: {
        type: Array,
        default() {
          return []
        },
      },
    },
    data() {
      return {
        uploadFiles: [],
      }
    },
    computed: {
      picCardWhStyle() {
        return {
          width: this.width + 'px',
          height: this.height + 'px',
          lineHeight: this.height - 2 + 'px',
        }
      },
      picCardIFontSize() {
        if (this.width <= 148) {
          return {
            fontSize: this.height * 0.2 + 'px',
          }
        }
        return {
          fontSize: '40px',
        }
      },
    },
    watch: {
      fileList: {
        immediate: true,
        handler(fileList) {
          this.uploadFiles = fileList.filter((image) => image)
        },
      },
    },
    created() {},
    methods: {
      __,
      saveFile(files) {
        if (!this.showFileList) {
          this.uploadFiles = [files[0].media_url]
          this.$emit('get-file', files[0].media_url)
        } else {
          this.uploadFiles = files.map((item) => item.media_url)
          this.$emit('get-file', this.uploadFiles)
        }
      },
      delImg(img) {
        let index = this.uploadFiles.indexOf(img)
        if (index > -1) {
          this.uploadFiles.splice(index, 1)
          if (!this.showFileList) {
            this.$emit('remove-file', '')
          } else {
            this.$emit('remove-file', this.uploadFiles)
          }
          /*this.$confirm('确认删除该图片?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          this.uploadFiles.splice(index, 1)
          if (!this.showFileList) {
            this.$emit('remove-file', this.uploadFiles[0])
          } else {
            this.$emit('remove-file', this.uploadFiles)
          }
        })*/
        }
      },
      showMedia() {
        this.$refs['media'].showEdit()
      },
    },
  }
</script>
<style>
  .pic-upload-source {
    display: block;
    padding: 10px;
  }

  .pic-upload:hover {
    border-color: #3f9eff;
  }

  .pic-upload {
    display: inline-block;
    text-align: center;
    cursor: pointer;
    outline: none;
  }

  .pic-upload-source ul {
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
  }

  .pic-upload-source li {
    display: list-item;
    text-align: -webkit-match-parent;
  }

  .pic-upload-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .pic-upload-list--picture-card {
    margin: 0;
    display: inline;
    vertical-align: top;
  }

  .pic-upload-list--item {
    transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
    font-size: 14px;
    color: #606266;
    line-height: 1.8;
    margin-top: 5px;
    position: relative;
    box-sizing: border-box;
    border-radius: 4px;
    width: 100%;
  }

  .pic-upload-list--picture-card .pic-upload-list--item {
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    margin: 0 8px 8px 0;
    display: inline-block;
  }

  .pic-upload-list--item-thumbnail {
    width: 100%;
    height: 100%;
  }

  .pic-upload-list--picture-card .pic-upload-list--item-actions {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    cursor: default;
    text-align: center;
    color: #fff;
    opacity: 0;
    font-size: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s;
  }

  .pic-upload-list--picture-card .pic-upload-list--item-actions:hover {
    opacity: 1;
  }

  .pic-upload-list--picture-card .pic-upload-list--item-actions:hover span {
    display: inline-block;
  }

  .pic-upload-list--picture-card .pic-upload-list--item-actions span {
    display: none;
    cursor: pointer;
  }

  .pic-upload-list--picture-card .pic-upload-list--item-actions span + span {
    margin-left: 15px;
  }

  .pic-upload-list--picture-card
    .pic-upload-list--item-actions
    .pic-upload-list--item-delete {
    position: static;
    font-size: inherit;
    color: inherit;
  }

  .pic-upload-list--item-delete {
    position: absolute;
    right: 10px;
    top: 0;
    font-size: 12px;
    color: #606266;
    display: none;
  }

  .pic-upload--picture-card {
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    cursor: pointer;
    vertical-align: top;
  }

  .pic-upload--picture-card i {
    color: #8c939d;
  }
</style>
