<script setup lang="tsx">
import upFile from './index.vue'
import { PropType, ref, defineModel, watch, nextTick } from 'vue'
import { Dialog } from '@/components/Dialog'
import { ElImage, ElMessage } from 'element-plus'
const modelValue = defineModel<string[]>({
  default: () => []
})
const props = defineProps({
  num: {
    type: Number as PropType<number>,
    default: () => 1
  },
  tip: {
    type: String as PropType<string>,
    default: () => ''
  }
})
const actionData = ref<any[]>([])
const showImage = ref(false)
const saveLoading = ref(false)
const saveType = ref('add')
const upImageIndex = ref(0)
const editImage = (index: number, type) => {
  console.log(index, type)
  if (type === 'del') {
    modelValue.value.splice(index, 1)
    modelValue.value = [...modelValue.value]
  } else {
    saveType.value = type
    if (type === 'edit') {
      upImageIndex.value = index
    }
    showImage.value = true
  }
}
const emit = defineEmits(['change'])
const save = async () => {
  saveLoading.value = true
  if (saveType.value === 'add') {
    const length = modelValue.value.length
    // console.log(actionData.value.length, props.num, length)
    if (actionData.value.length > props.num - length) {
      saveLoading.value = false
      return ElMessage.error('最多选择再' + props.num + '张图片')
    }
    modelValue.value = [...modelValue.value, ...actionData.value.map((item: any) => item.att_dir)]
    await nextTick()
    console.log(modelValue.value, 'modelValue.value')
    emit('change', modelValue.value)
  } else if (saveType.value === 'edit') {
    if (actionData.value.length > 1) {
      saveLoading.value = false
      return ElMessage.error('最多选择1张图片')
    }
    modelValue.value.splice(upImageIndex.value, 1, actionData.value[0].att_dir)
    modelValue.value = [...modelValue.value]
    await nextTick()
    console.log(modelValue.value, 'modelValue.value')
    emit('change', modelValue.value)
  }

  actionData.value = []
  saveLoading.value = false
  showImage.value = false
}
watch(showImage, (val) => {
  if (!val) {
    actionData.value = []
  }
})

// 移动图片
const dragging = ref<string>()
const handleDragStart = (item) => {
  console.log(item, 'item')
  dragging.value = item
}
const handleDragEnd = () => {
  dragging.value = ''
}
const handleDragOver = (e) => {
  e.dataTransfer.dropEffect = 'move'
}
const handleDragEnter = (e, item) => {
  e.dataTransfer.effectAllowed = 'move'
  if (item === dragging.value || !dragging.value) {
    return
  }
  const newItems = [...modelValue.value]
  const src = newItems.indexOf(dragging.value)
  console.log(src, 'src')
  const dst = newItems.indexOf(item)
  newItems.splice(dst, 0, ...newItems.splice(src, 1))
  modelValue.value = newItems
}
defineExpose({
  editImage
})
</script>

<template>
  <div class="w-full h-full">
    <div class="flex">
      <template v-if="modelValue.length > 0">
        <div
          class="imageItem"
          v-for="(item, index) in modelValue"
          :key="index"
          draggable="true"
          @dragstart="handleDragStart(item)"
          @dragover.prevent="handleDragOver($event)"
          @dragenter="handleDragEnter($event, item)"
          @dragend="handleDragEnd()"
        >
          <ElImage :src="item" class="image" fit="contain">
            <template #error>
              <div class="flex items-center justify-center bg-gray-200 w-full h-full">
                <Icon icon="vi-ep:picture" />
              </div>
            </template>
          </ElImage>
          <div class="imageDel flex items-center justify-center">
            <icon @click="editImage(index, 'del')" class="cursor-pointer" icon="vi-ep:delete" />
            <icon
              @click="editImage(index, 'edit')"
              class="ml-5px cursor-pointer"
              icon="vi-ep:edit"
            />
          </div>
        </div>
      </template>
      <div
        @click="editImage(0, 'add')"
        v-if="modelValue.length < num"
        class="imageBorder flex items-center justify-center h-full"
      >
        <Icon :size="20" icon="vi-ep:plus" />
      </div>
    </div>
    <div v-if="tip" class="text-xs text-gray-400 mt-5px">{{ tip }}</div>
    <Dialog maxHeight="670px" v-model="showImage" title="选择图片" width="1190px">
      <upFile v-model="actionData" />
      <template #footer>
        <BaseButton type="primary" :loading="saveLoading" @click="save"> 确定 </BaseButton>
        <BaseButton @click="showImage = false">关闭</BaseButton>
      </template>
    </Dialog>
  </div>
</template>
<style lang="less" scoped>
.imageItem {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  line-height: 0;
  margin-right: 5px;
  background-color: rgb(229 231 235 / var(--un-bg-opacity)) /* #e5e7eb */;
  &:hover {
    .imageDel {
      display: flex;
    }
  }
  .imageDel {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
  }
  .image {
    width: 100%;
    height: 100%;
    border-radius: 10px;
  }
}

.imageBorder {
  width: 50px;
  height: 50px;
  border: 1px dashed rgb(96, 98, 102);
  border-radius: 10px;
}
</style>
