<template>
  <div class="w-full">
    <div class="upload">
      <div class="upload-card">
        <!--图片列表-->
        <div
          class="upload-card-item"
          :style="getCSSProperties"
          v-for="(item, index) in imgList"
          :key="`img_${index}`"
        >
          <div class="upload-card-item-info">
            <div class="img-box">
              <img :src="item" />
            </div>
            <div class="img-box-actions">
              <span size="18" class="mx-2 action-icon" @click="preview(item)">
                <EyeOutlined style="font-size: 18px" />
              </span>
              <span size="18" class="mx-2 action-icon" @click="remove(index)">
                <DeleteOutlined />
              </span>
            </div>
          </div>
        </div>

        <!--上传图片-->
        <div
          class="upload-card-item upload-card-item-select-picture"
          :style="getCSSProperties"
          v-if="imgList.length < maxNumber"
        >
          <a-upload
            v-bind="bindValue"
            :showUploadList="false"
            :beforeUpload="beforeUpload"
            :customRequest="handleHttpUpload"
            @change="change"
          >
            <div class="flex flex-col justify-center">
              <span size="18" class="m-auto">
                <PlusOutlined />
              </span>
              <span class="upload-title">上传图片</span>
            </div>
          </a-upload>
        </div>
      </div>
    </div>

    <!--上传图片-->
    <a-space>
      <a-alert message="提示" type="info" v-if="helpText" class="flex w-full">
        <template #description>{{ helpText }}</template>
      </a-alert>
    </a-space>
  </div>

  <!--预览图片-->
  <previewModal ref="previewModalRef" :previewUrl="previewUrl" />
</template>

<script lang="ts" setup>
  import { ref, computed, useAttrs, watch } from 'vue';
  import { EyeOutlined, DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue';
  import { basicProps } from './props';
  import { message, Modal } from 'ant-design-vue';
  import { ResultEnum } from '@/enums/httpEnum';
  import componentSetting from '@/settings/componentSetting';
  import { useGlobSetting } from '@/hooks/setting';
  import { isString } from '@/utils/is';
  import { omit } from 'lodash-es';
  import previewModal from './PreviewModal.vue';
  import {upload} from '@/api/common'

  const globSetting = useGlobSetting();

  const props = defineProps({ ...basicProps });

  const attrs = useAttrs();

  const emit = defineEmits(['uploadChange', 'delete']);

  const previewModalRef = ref();

  const bindValue = computed(() => {
    const value = { ...attrs, ...props };
    return omit(value, 'onChange');
  });

  const getCSSProperties = computed(() => {
    return {
      width: `${props.width}px`,
      height: `${props.height}px`,
    };
  });

  const previewUrl = ref('');
  const originalImgList = ref([]);
  const imgList = ref<string[]>([]);

  //赋值默认图片显示
  watch(
    () => props.value,
    () => {
      imgList.value = props.value.map((item) => {
        return getImgUrl(item);
      });
    },
    {
      immediate: true,
    },
  );

  //预览
  function preview(url: string) {
    previewUrl.value = url;
    previewModalRef.value.openModal();
  }

  //删除
  function remove(index: number) {
    Modal.confirm({
      title: '提示',
      content: '你确定要删除吗？',
      onOk() {
        imgList.value.splice(index, 1);
        originalImgList.value.splice(index, 1);
        emit('uploadChange', originalImgList.value);
        emit('delete', originalImgList.value);
      },
    });
  }

  //组装完整图片地址
  function getImgUrl(url: string): string {
    const { imgUrl } = globSetting;
    return /(^http|https:\/\/)/g.test(url) ? url : `${imgUrl}${url}`;
  }

  function checkFileType(fileType: string) {
    return componentSetting.upload.fileType.includes(fileType);
  }

  //上传之前
  function beforeUpload(file) {
    const fileInfo = file;
    const { maxSize, accept } = props;
    const acceptRef = (isString(accept) && accept.split(',')) || [];

    // 设置最大值，则判断
    if (maxSize && fileInfo.size / 1024 / 1024 >= maxSize) {
      message.error(`上传文件最大值不能超过${maxSize}M`);
      return false;
    }

    // 设置类型,则判断
    const fileType = componentSetting.upload.fileType;
    if (acceptRef.length > 0 && !checkFileType(fileInfo.type)) {
      message.error(`只能上传文件类型为${fileType.join(',')}`);
      return false;
    }

    return true;
  }

  //上传图片
  function change({ file, fileList }) {
    if (file.status === 'done') {
      //完成
      try {
        const res = file.response;
        const { infoField, imgField } = componentSetting.upload.apiSetting;
        const { code } = res;
        const msg = res.msg || res.message || '上传失败';
        const result = res[infoField];
        //成功
        if (code === ResultEnum.SUCCESS) {
          let imgUrl: string = getImgUrl(result[imgField]);
          imgList.value.push(imgUrl as never);
          originalImgList.value.push(result[imgField] as never);
          emit('uploadChange', originalImgList.value);
        } else message.error(msg);
      } catch (error) {
        console.error(error);
      }
    }
    fileList.value = fileList;
  }
  const handleHttpUpload=async (fileChild:any)=>{
  loading.value=true
  try {
	const formData = new FormData()
    formData.append('file',fileChild)
    formData.append('name',props.name)
    const res =await upload(formData)
	console.log(res)
    emit('update:imageUrl',res.fileUrl);
    emit('changeFileName',res.originalName)
    // 调用 el-form 内部的校验方法（可自动校验）
    formItemContext?.prop && formContext?.validateField([formItemContext.prop as string]);
  } catch (error) {
    emit('update:imageUrl','');
    emit('changeFileName','')
  }finally {
    progress.value=0
    loading.value=false
  }
}
</script>

<style lang="less">
  .upload {
    width: 100%;
    overflow: hidden;

    &-card {
      width: auto;
      height: auto;
      display: flex;
      flex-wrap: wrap;
      align-items: center;

      &-item {
        margin: 0 8px 8px 0;
        position: relative;
        padding: 8px;
        border: 1px solid #d9d9d9;
        border-radius: 2px;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;

        &:hover {
          background: 0 0;

          .upload-card-item-info::before {
            opacity: 1;
          }

          &-info::before {
            opacity: 1;
          }
        }

        &-info {
          position: relative;
          height: 100%;
          padding: 0;
          overflow: hidden;

          &:hover {
            .img-box-actions {
              opacity: 1;
            }
          }

          &::before {
            position: absolute;
            z-index: 1;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            opacity: 0;
            transition: all 0.3s;
            content: ' ';
          }

          .img-box {
            position: relative;
            //padding: 8px;
            //border: 1px solid #d9d9d9;
            border-radius: 2px;
          }

          .img-box-actions {
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 10;
            white-space: nowrap;
            transform: translate(-50%, -50%);
            opacity: 0;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: space-between;

            &:hover {
              background: 0 0;
            }

            .action-icon {
              color: rgba(255, 255, 255, 0.85);

              &:hover {
                cursor: pointer;
                color: #fff;
              }
            }
          }
        }
      }

      &-item-select-picture {
        border: 1px dashed #d9d9d9;
        border-radius: 2px;
        cursor: pointer;
        background: #fafafa;
        color: #666;

        .upload-title {
          color: #666;
        }
      }
    }
  }
</style>
