<template>

  <div class="flex col">
    <el-icon>
      <Plus />
    </el-icon>
    <div class="add-text" @click="openImage">添加</div>
  </div>
  <img v-if="base64Image" :src="base64Image">
  <div class="input" v-if="filePath">{{filePath}}</div>

<!--
  <el-upload class="upload-warp" action="#" list-type="picture-card" :http-request="upload">

    <div class="flex col">
      <el-icon>
        <Plus />
      </el-icon>
      <div class="add-text">添加</div>
    </div>
    <template #file="{ file }">
      <div>
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
        <span class="el-upload-list__item-actions">
          <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
            <el-icon><zoom-in /></el-icon>
          </span>
          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
            <el-icon>
              <Download />
            </el-icon>
          </span>
          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
            <el-icon>
              <Delete />
            </el-icon>
          </span>
        </span>
      </div>
    </template>
  </el-upload>

  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>-->
</template>
<script lang="ts" setup>
import { ref, defineEmits } from 'vue'
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
import type { UploadFile } from 'element-plus'
import { imagesUpload } from '@/utils/appconfig'
import { ElMessage } from 'element-plus'
import * as  userApi from '@/apis/user'

import client from "@/stores/modules/client";
import icpList from '@/utils/ipc'
const clientStore = client();
// 定义自定义事件
const emit = defineEmits(['input']);

interface Props {
  value: string
  hasDel?: boolean
  hasSize?: boolean
  width?: number
  height?: number
  fileSize?: number
  styleWidth?: string
  accept?: string[]
}
const props = withDefaults(defineProps<Props>(), {
  value: '',
  hasDel: true,
  hasSize: true,
  width: 0,
  height: 0,
  fileSize: imagesUpload.fileSize,
  styleWidth: '160',
  accept: () => imagesUpload.accept
})

const dialogImageUrl = ref('')

const dialogVisible = ref(false)

const disabled = ref(false)

const handleRemove = (file: UploadFile) => {
  console.log(file)
}

const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!
  dialogVisible.value = true
}

const handleDownload = (file: UploadFile) => {
  console.log(file)
}
// 上传
const upload = async (params) => {
  const isLt2M = params.file.size / 1024 < props.fileSize
  if (props.accept.indexOf(params.file.name.toLocaleLowerCase().split('.')[params.file.name.toLocaleLowerCase().split('.').length - 1]) < 0) {
    ElMessage.error('请上传' + props.accept.join(',') + '格式文件')
    return false
  }
  if (!isLt2M) {
    ElMessage.error('上传文件大小不能超过 ' + props.fileSize + 'KB!')
    return false
  }
  const res = await userApi.upload({
    file: params.file
  })
  if (!props.hasSize) {
    emit('input', res.data.url)
    return;
  }
  emit('input', res.data.url)
}


const base64Image = ref('')
const filePath = ref('')
function openImage(){

  clientStore.ipc.removeAllListeners(icpList.utils.openImage);
  clientStore.ipc.send(icpList.utils.openImage);
  clientStore.ipc.on(icpList.utils.openImage, async (event, result) => {

    filePath.value = result.filePath
    base64Image.value = result.base64Image
    clientStore.ipc.removeAllListeners(icpList.utils.openImage);
  })
}
</script>


<style lang="scss" scoped>
.upload-warp {
  ::v-deep {
    .el-upload--picture-card {
      background-color: #fff;

      .el-icon,
      .add-text {
        color: #2957FF;
      }
    }
  }
}
</style>
