<template>
  <div class="uploader-container">
    <div v-if="imageList.length > 0" class="wrapper">
      <div v-for="(item, index) in imageList" :key="index" class="flex-box outer" :style="previewBoxStyle">
        <img :src="item" alt="" :style="imageStyle" />
        <el-button class="button-delete"
           icon="el-icon-delete"
           type="info"
           @click.stop="$emit('on-image-delete', index, field)">
        </el-button>
      </div>
    </div>
    <div v-else class="flex-box" :style="previewBoxStyle">
      <img :src="imagePlaceholder" alt="" :style="imageStyle" />
    </div>
    <div>
      <el-upload
        class="upload-demo"
        action=""
        :on-change="(file, fileList) => handleImageSelected(file, fileList)"
        :auto-upload="false"
        :show-file-list="false"
      >
        <FNButton
          slot="trigger"
          size="small"
          type="danger"
          plain
          background
          style="width:30px;height:30px;padding:0;margin: 5px;"
        >
          <template slot="icon">
            <svg-icon icon-class="upload" />
          </template>
        </FNButton>
        <FNButton
          size="small"
          type="primary"
          plain
          background
          style="width:30px;height:30px;padding:0;margin: 5px"
          @click="showSelectDialog"
        >
          <template slot="icon">
            <svg-icon icon-class="select" />
          </template>
        </FNButton>
      </el-upload>
    </div>
    <SelectAssets
      :visible.sync="selAssetsVisible"
      @close="selAssetsVisible = false"
      @select="handleSelectionAssets"
    />
  </div>
</template>

<script>
/**
 * 图片列表+增加（上传、选择）+删除
 */
import CommonSet from '@/api/setting-center/CommonSet'
import SelectAssets from '@/components/SelectAssets/index'
import FNButton from '@/components/FNButton/index'

export default {
  name: 'PicListUploader',
  components: {
    SelectAssets, FNButton
  },
  props: {
    field: {
      type: String,
      default: ''
    },
    imageList: {
      type: Array,
      default: () => []
    },
    imagePlaceholder: {
      type: String,
      default: '/pic/default/default-placeholder@2x.png'
    },
    previewBoxStyle: {
      type: Object,
      default: () => ({
        width: 78 + 'px',
        height: 136 + 'px',
        border: 1 + 'px dashed #' + 999,
        margin: 10 + 'px ' + 15 + 'px ' + -10 + 'px ' + 0
      })
    },
    imageStyle: {
      type: Object,
      default: () => ({
        width: 74 + 'px',
        height: 132 + 'px',
        padding: 2 + 'px',
        objectFit: 'contain'
      })
    },
    moduleName: {
      type: String,
      default: '邀请海报'
    }
  },
  data() {
    return {
      selAssetsVisible: false,
      loading: false,
      commonSetInstance: null
    }
  },
  created() {
    this.commonSetInstance = new CommonSet()
  },
  methods: {
    showSelectDialog() {
      this.selAssetsVisible = true
    },
    // 选择图片直接上传
    handleImageSelected(file, fileList) {
      if (!this.commonSetInstance) {
        this.commonSetInstance = new CommonSet()
      }
      this.loading = true
      this.commonSetInstance.uploadFile(file, '', this.moduleName).then(response => {
        const { data } = response
        const { fileName } = data
        this.$emit('on-image-added', this.field, fileName)
        this.loading = false
      }).catch(error => {
        this.loading = false
        this.$message.error(error)
      })
    },
    handleSelectionAssets(data) {
      const imageUrl = data[0].imageUrl
      this.$emit('on-image-added', this.field, imageUrl)
      this.selAssetsVisible = false
    },
    handleDelete(index) {
      this.$emit('on-image-delete', this.field, index)
    }
  }
}
</script>

<style scoped lang="scss">
.uploader-container {
  display: flex;
  align-items: center;

  .wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .outer {
    position: relative;
    transition: all 0.4s;

    img:hover + .button-delete {
      display: block;
    }
  }

  .button-delete {
    width: 20px;
    height: 20px;
    padding: 0;
    position: absolute;
    right: 3px;
    top: 3px;
    display: none;
    &:hover{
      display: block;
    }
  }
}
</style>
