<!-- 文件上传组件-->
<template>
  <div class="flex-img">
    <div v-show="hideShow" class="el-upload-list el-upload-list--picture-card">
      <div class="el-upload-list__item is-success" :style="imageStyle">
        <img class="flex-img__image" :src="image" :style="imageStyle" />
        <label class="el-upload-list__item-status-label">
          <i class="el-icon-upload-success el-icon-check"></i>
        </label>
        <span class="el-upload-list__item-actions">
          <span class="el-upload-list__item-delete">
            <i class="el-icon-delete" @click.stop="handleRemove()"></i>
          </span>
        </span>
      </div>
    </div>
    <!--      style="width: 68px; line-height: 68px"-->
    <el-upload
      v-show="!hideShow"
      accept="image/jpeg,image/jpg,image/png"
      :action="uploadUrl"
      :before-upload="beforeUpload"
      class="image-uploader"
      :data="params"
      :on-success="imageUploadSuccess"
      :show-file-list="false"
      :style="styleObject"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <!--<div slot="tip" class="el-upload__tip">{{__('尺寸宽度不低于640，高度不限制，支持jpg、png格式，1张上限')}}</div>-->
    <!--    可以写在这里，也可以写在父组件里，这里我是写在父组件里的-->
  </div>
</template>
<script>
  import { URL } from '@/config'
  import { getToken } from '@/utils/token'
  import { mapGetters } from 'vuex'

  export default {
    props: ['image', 'clearList', 'width', 'height'],
    data() {
      return {
        params: {
          authorization: '',
        },
        c_width: this.width ? this.width : '148px',
        c_height: this.height ? this.height : '148px',
        uploadUrl: URL.action, //图片上传网址
        file: this.image ? this.image : '',
      }
    },

    computed: {
      ...mapGetters({
        token: 'user/token',
      }),
      hideShow() {
        //当图片多于一张的时候，就隐藏上传框
        return this.file !== ''
      },
      styleObject() {
        return {
          width: this.c_width,
          lineHeight: this.c_height,
        }
      },
      imageStyle() {
        return {
          width: this.c_width,
          height: this.c_height,
        }
      },
    },
    watch: {
      image(value) {
        this.file = value
      },
      clearList() {
        this.file = ''
      },
      file(value) {
        const list = value
        this.$emit('upImage', list)
      },
    },
    created() {
      this.params.authorization = getToken()
    },
    methods: {
      imageUploadSuccess(response) {
        const { data } = response
        this.file = data.media_url
      },
      beforeUpload(file) {
        this.headers = {
          Authorization: 'Bearer ' + this.token,
        }
        const imageSize = file.size / 1024 / 1024 < 5 //上传图片大小不超过1M
        if (!imageSize) {
          this.$message.error('上传封面大小不能超过 5MB!')
        }
        return imageSize
      },
      handleRemove() {
        this.file = ''
      },
    },
  }
</script>

<style scoped>
  .flex-img {
    display: flex;
  }

  .image-uploader {
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /*width: 148px;*/
    height: auto;
    cursor: pointer;
    /*line-height: 146px;*/
    vertical-align: top;
    text-align: center;
  }

  .image-uploader {
    font-size: 28px;
    color: #8c939d;
  }

  .image-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .flex-img__image {
    /*width: 146px;*/
    /*height: auto;*/
    border-radius: 6px;
  }
</style>
<style>
  .disabled {
    display: none;
  }

  .el-upload--picture-card {
    height: auto;
  }

  .el-upload-list--picture-card .el-upload-list__item {
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #c0ccda;
    border-radius: 6px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /*width: 148px;*/
    /*height: auto;*/
    /*margin: 0 8px 8px 0;*/
    display: inline-block;
  }

  .el-upload-list__item.is-success .el-upload-list__item-status-label {
    display: block;
    position: absolute;
    right: -15px;
    top: -6px;
    width: 40px;
    height: 24px;
    background: #13ce66;
    text-align: center;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
  }

  .el-upload-list--picture-card .el-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);
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
  }
</style>
