<template>
  <div class="uploader-container">
    <div class="flex-box" :style="previewBoxStyle">
      <img v-if="image" :src="image" alt="" :style="imageStyle" />
      <img v-else :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>
/**
 * 会员等级相关图片上传、选择
 * 参数：
 * image： 图片地址，用于显示
 * field： 操作的字段名
 * imagePlaceholder：默认占位图片
 * previewBoxStyle：预览位置样式
 * imageStyle：图片样式
 */
import CommonSet from '@/api/setting-center/CommonSet'
import SelectAssets from '@/components/SelectAssets/index'
import FNButton from '@/components/FNButton/index'

export default {
  name: 'PicUploader',
  components: {
    SelectAssets, FNButton
  },
  props: {
    field: {
      type: String,
      default: ''
    },
    image: {
      type: String,
      default: ''
    },
    imagePlaceholder: {
      type: String,
      default: '/pic/default/default-placeholder@2x.png'
    },
    previewBoxStyle: {
      type: Object,
      default: () => ({
        width: 80 + 'px',
        height: 60 + 'px',
        border: 1 + 'px dashed #' + 999,
        margin: 5 + 'px'
      })
    },
    imageStyle: {
      type: Object,
      default: () => ({
        width: 74 + 'px',
        height: 54 + 'px',
        padding: 3 + '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, saveName } = data
        this.$emit('on-image-selected', this.field, fileName, saveName)
        this.loading = false
      }).catch(error => {
        this.loading = false
        this.$message.error(error)
      })
    },
    handleSelectionAssets(data) {
      const imageUrl = data[0].imageUrl
      const saveImgName = data[0].saveName
      this.$emit('on-image-selected', this.field, imageUrl, saveImgName)
      this.selAssetsVisible = false
    }
  }
}
</script>

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