<template>
  <div>
    <template v-if="mode === 'DESIGN'">
      <div class="design">
        <el-icon><Plus /></el-icon>
      </div>
      <p>{{ placeholder }} {{ sizeTip }}</p>
    </template>
    <template v-else>
      <template v-if="perm === 'E'">
        <el-upload :file-list="_value"
                   :limit="maxSize" with-credentials
                   :multiple="maxSize > 0"
                   :data="uploadParams"
                   list-type="picture-card"
                   :action="uploadFileUrl"
                   :headers="headers"
                   :auto-upload="true"
                   :on-success="handleUploadSuccess"
                   :before-upload="beforeUpload">
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{file}">
            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
            <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-preview" @click="handlePictureCardPreview(file)">
                <i class="el-icon-zoom-in"></i>
              </span>
              <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                <i class="el-icon-download"></i>
              </span>
              <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
          <div slot="tip">{{ placeholder }} {{ sizeTip }}</div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible" center append-to-body>
          <div>
            <img width="100%" :src="dialogImageUrl" alt="" style="z-index: 3435">
          </div>
        </el-dialog>
      </template>
      <template v-else-if="perm === 'R'">
        <div v-for="(item , index) in _value" :key="index">
          <el-image
              style="width: 100px; height: 100px"
              :src="item.url"
              :preview-src-list="[item.url]">
          </el-image>
        </div>
      </template>
    </template>
  </div>
</template>

<script setup>
import {deleteFile} from '@/api/workflow/process-file.js'
import {defineProps, defineEmits} from 'vue'
import { getToken } from '@/utils/auth'
import {ElMessage, ElMessageBox} from "element-plus";

const baseURL = import.meta.env.VITE_BASE_URL
const emit = defineEmits()

const props = defineProps({
  mode: {
    type: String,
    default: 'DESIGN'
  },
  required: {
    type: Boolean,
    default: false
  },
  value: {
    type: Array,
    default: () => {
      return []
    }
  },
  perm: {
    type: String,
    default: 'E'
  },
  placeholder: {
    type: String,
    default: '请选择图片'
  },
  maxSize: {
    type: Number,
    default: 5
  },
  maxNumber: {
    type: Number,
    default: 10
  },
  enableZip: {
    type: Boolean,
    default: true
  }
})
const fileList = ref([])
const disabled = ref(false)
const uploadFileUrl = ref(baseURL + "/workflow/process/file")
const headers = reactive({
  authorization: getToken()
})

const uploadParams = ref([])
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const imageUrl = ref([])


const sizeTip = computed(() => {
  return props.maxSize > 0 ? `| 每张图不超过${props.maxSize}MB` : ''
})


const init = () => {
  fileList.value = _value
}

const _value = computed({
  get() {
    return props.value;
  },
  set(value) {
    emit('update:value', value)
  }
})
watch(()=>props.value,(value)=>{
  _value.value = value
})

const beforeUpload = (file) => {
  const alows = ['image/jpeg', 'image/png', 'image/gif', 'image/jpg'];
  if (alows.indexOf(file.type) === -1) {
    ElMessage.warning("存在不支持的图片格式")
  } else if (props.maxSize > 0 && file.size / 1024 / 1024 > props.maxSize) {
    ElMessage.warning(`单张图片最大不超过 ${props.maxSize}MB`)
  } else {
    return true
  }
  return false
}

const handleUploadSuccess = (res, file) => {
  if (res.code !== 1000) {
    ElMessage.error("上传失败")
  }
  let data = res.data
  fileList.value.push(data)
  emit("input", fileList)
  console.log(res, file, fileList)
}

const handleRemove = (file) => {
  deleteFile(file.id).then(res => {
    if (res.code === 1000) {
      ElMessage.success("删除成功")
      fileList.value.splice(fileList.value().findIndex((item) => item.id === file.id), 1)
    }
  })
}

const handlePictureCardPreview = (file) => {
  dialogVisible.value = true;
  dialogImageUrl.value = file.url;
}

const handleDownload = (file) => {
  console.log(file);
}

</script>

<style lang="scss" scoped>
.design {
  i {
    padding: 10px;
    font-size: xx-large;
    background: white;
    border: 1px dashed #8c8c8c;
  }
}

.el-upload--picture-card {
  width: 80px;
  height: 80px;
  line-height: 87px;
}

.el-upload-list__item {
  width: 80px;
  height: 80px;

  .el-upload-list__item-actions {
    & > span + span {
      margin: 1px;
    }
  }
}
</style>
