<template>
  <div>
    <el-upload
      :action="uploadUrl"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-success="handleAvatarSuccess"
      :before-upload="validateFile"
      :headers="requestHeaders"
      :file-list="files"
      :before-remove="beforeRemove"
      :disabled="disabled"
      multiple
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" append-to-body>
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'RepresentationImageUploader',
  props: {
    name: {
      type: String,
      required: true,
      default: ''
    },
    filesList: {
      type: Array,
      required: true,
      default: () => []
    },
    representation_code: {
      type: String,
      required: true,
      default: ''
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false
    },
    isAdmin: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      requestHeaders: {
        authorization: this.$auth?.$storage?._state?.['_token.local'] || ''
      }
    }
  },
  computed: {
    files() {
      return this.filesList.map(item => {
        return { id: item._id, name: item.name, url: item.url }
      })
    },
    uploadUrl() {
      const adminUrl = `/api/admin/representationImages/admin/${this.representation_code}?name=${this.name}`
      const userUrl = `/api/user/representationImages/${this.representation_code}?name=${this.name}`
      return this.isAdmin ? adminUrl : userUrl
    }
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    validateFile(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('فقط فرمت jpg قایل قبول است')
      }
      if (!isLt2M) {
        this.$message.error('تصویر نباید بیشتر از 2 مگابایت باشد')
      }
      return isJPG && isLt2M
    },
    handleRemove(file, fileList) {
      if (!file.raw) {
        const adminUrl = `/api/admin/representationImages/admin/${this.representation_code}/${file.id}?name=${this.name}`
        const userUrl = `/api/user/representationImages/${this.representation_code}/${file.id}?name=${this.name}`
        this.$axios.delete(this.isAdmin ? adminUrl : userUrl)
      }
    },
    beforeRemove(file) {
      if (file.raw && !this.validateFile(file.raw)) {
        return true
      }
      const title = 'هشدار'
      const msg = 'شما در حال حذف این فایل هستید، ادامه میدهید؟'
      return this.$confirm(msg, title, {
        confirmButtonText: 'ادامه',
        cancelButtonText: 'لغو',
        type: 'warning'
      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
  }
}
</script>
