<template>
  <div>
    <img :src="!!imgPath ? sPath: 'assets/images/addpicture.png'" @click="editLogo" onerror="this.src='assets/images/picture404-'+((row.ID||row.$index) % 4)+'.png';" style="max-width: 120px; max-height: 120px;cursor:pointer;" border="0" align="absmiddle">
    <i title="编辑" @click="editLogo" class="fa fa-pencil-square-o" style="cursor:pointer; margin-left:10px;"></i>
    <i title="清空" @click="clearLogo" class="fa fa-window-close-o" style="cursor:pointer;"></i>
    <i title="图片处理" v-if="showCut" @click="cutLogo" class="fa fa-scissors" style="cursor:pointer;"></i>

    <el-dialog title='上传水印图片' :visible.sync="uploadModal" style="margin:0 auto" @open="beforeDialogOpen" class="water-image-upload-dialog">
      <el-form label-width="120px">
        <el-form-item label='图片文件：'>
          <el-upload action="" ref="upload" :multiple="false" :auto-upload="false" :on-change="selectFileChangeHandler" :file-list="fileList"
            :accept="videoWater? '.png':'.jpg,.jpeg,.png,.bmp'" style="width:280px;">
            <el-button type="primary">选择文件</el-button>
            <div slot="tip" class="el-upload__tip">只能上传 {{videoWater ? 'png' : 'jpg / jpeg / png / bmp'}} 文件</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot='footer'>
        <el-button @click="uploadModal = false">取 消</el-button>
        <el-button type="primary" @click="confirmUpload" :loading="confirmLoading">确 定</el-button>
      </div>
    </el-dialog>
    <imagecutting-dialog :show.sync="imageCuttingModal" :siteID="siteId" :imagePath="imgPath" @callback="imageCuttingCallback"></imagecutting-dialog>
  </div>
</template>
<script>
import util from '@src/common/util.js'
import commonImageCuttingDialog from '../commonImageCuttingDialog.vue'
export default {
  components: {
    'imagecutting-dialog': commonImageCuttingDialog
  },
  props: {
    path: {
      required: true
    }, // 绑定图片路径
    prefix: {
      type: String,
      default: function() {
        return this.$root.prefix
      }
    }, // 图片预览路径前缀
    showCut: {
      type: Boolean,
      default: true
    }, // 是否显示图片处理按钮
    catalogId: {
      default: 0
    }, // 仅在栏目下上传水印图片时需要
    videoWater: {
      type: Boolean,
      default: false
    }, // 是否为视频水印
    siteId: {
      default: function() {
        return this.$root.siteID
      }
    }, // 站点ID
    previewPath: {
      type: String,
      default: ''
    }, // 图片预览路径
    disabled: {
      type: Boolean,
      default: false
    } // 是否禁用所有功能
  },
  data() {
    return {
      uploadModal: false,
      imageCuttingModal: false,
      tmpFile: {},
      fileList: [],
      confirmLoading: false
    }
  },
  computed: {
    imgPath: {
      get() {
        return this.path
      },
      set(val) {
        this.$emit('update:path', val)
      }
    },
    sPath: {
      get() {
        return this.previewPath ? this.previewPath : this.prefix + this.path
      },
      set(val) {
        this.$emit('update:previewPath', val)
      }
    }
  },
  methods: {
    editLogo() {
      if (this.disabled) {
        return
      }
      this.uploadModal = true
    },
    clearLogo() {
      if (this.disabled || !this.imgPath) {
        return
      }
      this.imgPath = ''
      this.sPath = ''
    },
    cutLogo() {
      if (this.disabled || !this.imgPath) {
        return
      }
      if (this.imgPath.toLowerCase().startsWith('http')) {
        this.$alert('网络图片不能剪切！', '提示', {
          type: 'info'
        })
        return
      }
      this.imageCuttingModal = true
    },
    imageCuttingCallback(sPath, path) {
      this.sPath = sPath
      this.imgPath = path
    },
    beforeDialogOpen() {
      this.fileList = []
      this.tmpFile = null
      this.confirmLoading = false
    },
    selectFileChangeHandler(file, files) {
      this.fileList = [files[0]]
      this.tmpFile = files[0].raw
      if (files.length > 1) {
        this.$message.info('文件总数量限制为1')
      }
    },
    async confirmUpload() {
      if (!this.tmpFile) {
        this.$alert('请先选择需要上传的图片！', '提示', {
          type: 'warning'
        })
        return
      }
      this.confirmLoading = true
      const formData = new FormData()
      formData.append('file', this.tmpFile)
      formData.append('fileName', this.tmpFile.name.substring(0, this.tmpFile.name.lastIndexOf('.')))
      formData.append('siteID', this.siteId)
      formData.append('videoFlag', this.videoWater)
      let apiURL =
        this.catalogId === 0 ? '/ui/sites/uploadwaterimg' : `/ui/contentcore/catalogs/${this.catalogId}/extends/uploadwaterimage`
      let res = await axios.post(apiURL, formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
      let msg = (res.data && res.data.message) ? res.data.message : ''
      msg.indexOf('.gif') > -1 && msg.replace('.gif', '')
      util.showResponseMessage(res.data)
      this.confirmLoading = false
      if (res.data.status === 1) {
        this.imgPath = res.data.fileName
        this.sPath = res.data.previewPath
        this.uploadModal = false
      }
    }
  }
}
</script>
<style>
.water-image-upload-dialog .el-dialog {
  width: 500px;
}
@media (max-width: 480px) {
  .water-image-upload-dialog .el-dialog {
    width: 90%;
  }
}
</style>
