<template>
  <div class="VueDraggable">
    <el-input
      @change="handleSearch"
      clearable
      size="medium"
      placeholder="请输入内容"
      suffix-icon="search"
      v-model="search"
      class="input-with-select"
    >
    </el-input>
    <VueDraggable
      v-if="list.length"
      :move="search ? false : null"
      class="draggable"
      ref="el"
      v-model="list"
      @sort="onChange"
    >
      <div
        class="item"
        v-for="(item, index) in search ? searchList : list"
        :key="item.id"
        @click="handleItem(item.id)"
      >
        <img class="itemImg" :src="item.imgUrl" alt="" />
        <div class="text">
          <div :title="item.imgInfo">{{ item.imgInfo }}</div>
          <EditPen @click.stop="handleEdit(item)" class="EditPen" />
        </div>
        <CircleCloseFilled
          @click.stop="handleDet(index, item.id)"
          class="itemIcon"
        />
      </div>
    </VueDraggable>
    <el-empty class="empty" v-else description="请上传现场照片" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, computed } from "vue";
import { caseImgList, CaseImg, caseDel, caseUpdateSort } from "@/store/case";
import { VueDraggable } from "vue-draggable-plus";
import { openErrorMsg } from "@/request/errorMsg.js";
import { addCaseImgFile } from "../quisk";
import { ElMessage, ElMessageBox } from "element-plus";
// import { IconRabbish } from '@element-plus/icons-vue'
const props = defineProps({ sortType: Boolean, caseId: Number });
const emit = defineEmits<{
  (e: "changeList", value: CaseImg[] | null): void;
  (e: "handleItem", value: Number | null): void;
}>();
const list = ref<CaseImg[]>([]);
const search = ref("");
const searchList = computed(() => {
  let searchText = search.value.toLowerCase();
  return list.value.filter((item) => {
    return item.imgInfo?.toLowerCase().includes(searchText);
  });
});

watch(
  () => props.sortType,
  (newValue, oldValue) => {
    emit("changeList", list.value);
  },
  { deep: true, immediate: true }
);

async function onChange({ newIndex, oldIndex }) {
  if (search.value) {
    openErrorMsg("搜索状态禁止拖动");
    return;
  }
  const imageIDs = Array.from(list.value)
    .filter((i, index) => index === newIndex || index === oldIndex)
    .reduce((prev, current) => prev.concat(current["id"]), []);
  console.log("draggable-imageIDs", imageIDs);
  emit("delImage", imageIDs);
  setTimeout(async () => {
    let apiList = searchList.value.map((item, index) => {
      return { ...item, sort: index + 1 };
    });
    console.log(apiList);
    await caseUpdateSort(apiList);
    emit("changeList", apiList);
  }, 500);
}
function handleItem(id) {
  setTimeout(() => {
    let index = list.value.findIndex((item) => item.id === id);
    console.log(index, list.value);
    emit("handleItem", index);
  }, 500);
}
function handleSearch(val: string) {
  console.log("handleSearch", val, search.value);
}
async function getList() {
  let lists = await caseImgList(props.caseId, "desc");
  list.value = lists.data;
  emit("changeList", list.value);
}
async function handleDet(index: Number, id: Number) {
  const res = await ElMessageBox.confirm(
    "删除图像后会重新排版并清空标记数据，是否继续?",
    "温馨提示",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "default",
    }
  );
  if (res) {
    caseDel(id).then((res) => {
      emit("delImage", [id]);
      list.value.splice(index, 1);
      emit("changeList", list.value);
    });
  }
}
async function handleEdit(params) {
  await addCaseImgFile({
    caseId: props.caseId,
    data: {
      ...params,
    },
  });
  getList();
}
function filterItem() {
  let searchText = search.value.toLowerCase();
  return list.value.filter((item) => {
    return item.imgInfo?.toLowerCase().includes(searchText);
  });
}
onMounted(() => {
  getList();
  // emit("update:list", props.list.value);
});
defineExpose({
  getList,
});
</script>
<style lang="scss" scoped>
.empty {
  width: 200px;
}
.input-with-select {
  margin-top: 16px;
}
.draggable {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .item {
    position: relative;
    // flex: 0 0 50%; /* 每个子元素占用50%的宽度 */
    width: calc(50% - 4px);
    margin-top: 16px;
    .itemImg {
      width: 100%;
      height: 62px;
      object-fit: cover;
    }
    .text {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 20px;
      div {
        width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .EditPen {
        width: 20px;
        height: 20px;
        display: none;
      }
      &:hover {
        div {
          width: calc(100% - 20px);
        }
        .EditPen {
          display: block;
        }
      }
    }
    .itemIcon {
      width: 20px;
      height: 20px;
      color: var(--el-color-primary);
      position: absolute;
      right: -10px;
      top: -10px;
      display: none;
    }
    &:hover {
      .itemIcon {
        display: block;
      }
    }
  }
}
</style>
