<template>
  <syCommonDialog
    :visible="show"
    @closePopup="$emit('update:show', false)"
    showMask
    type="element"
    element-dialog-size="medium"
    :element-dialog-props="{
      title: '编辑分类',
    }"
    :btnConfig="{
      type: 'noBorder',
    }"
  >
    <div
      class="flex pr-2 whitespace-nowrap flex-nowrap -mt-5 pb-6"
      style="border-bottom: 1px solid #f0f1f5"
    >
      <div class="tableHeader flex-grow">分类名称</div>
      <div class="tableHeader w-[74px] text-center">修改</div>
    </div>
    <syScrollBar
      height="calc(36 * 11px)"
      v-if="show"
      class="pr-2"
      @scrollToEnd="fetchNextPage"
    >
      <Draggable
        tag="div"
        @change="move"
        :list="copyedList"
        ghost-class="draggable-ghost"
        item-key="id"
      >
        <template #item="{ element: folder }">
          <div
            class="h-9 flex items-center folderOuter"
            style="border-bottom: 1px solid #f0f1f5"
          >
            <img
              src="@/assets/img/move-dot.png"
              class="mr-2 h-3 cursor-move"
              alt=""
              srcset=""
            />
            <div
              class="flex-grow overflow-hidden text-ellipsis category-name whitespace-nowrap"
            >
              {{ folder.name }}
            </div>
            <div
              class="w-[74px] text-center flex-shrink-0"
              style="color: var(--sy-blue)"
            >
              <span
                class="cursor-pointer mx-1"
                @click="() => handleClickEdit(folder)"
                >修改</span
              >
              <span
                class="cursor-pointer mx-1"
                @click="() => handleClickCategory(folder)"
                >删除</span
              >
            </div>
          </div>
        </template>
      </Draggable>
    </syScrollBar> </syCommonDialog
  ><syCommonDialog
    :visible="renameShow"
    @closePopup="renameShow = false"
    type="element"
    :elementDialogProps="{
      title: '重命名',
    }"
    :btnConfig="{
      type: 'noBorder',
      btns: btns,
      btnFunctions: [
        {
          name: '取消',
          async click() {
            return true;
          },
        },
        {
          name: '确定',
          click: handleConfirmRename,
        },
      ],
    }"
    showMask
  >
    <Rename
      v-if="renameShow"
      ref="renameRef"
      :oldName="oldName"
      :oldID="oldID"
      @close="renameShow = false"
      @update="refetch"
    />
  </syCommonDialog>
</template>

<script setup lang="ts">
import { showTip } from "@/components/GlobalMount/api";
import { btns } from "@/config/btns";
import { $ajax } from "@/service";
import {
  syCommonDialog,
  syScrollBar,
  GO_URLS,
  syMessage as ElMessage,
} from "cqk-sy-ui";
import { ref, watch } from "vue";
import { iFolder } from "../CategoryList/types";
import Rename from "../Rename/index.vue";
import Draggable from "vuedraggable/src/vuedraggable";
import { setFolderPos } from "@/service/Api.service";

const renameRef = ref<any>();
const props = defineProps<{
  show: boolean;
  list: iFolder[];
  refetch: () => Promise<any>;
  fetchNextPage: () => any;
}>();

const copyedList = ref([...props.list]);
watch(
  () => props.list,
  () => {
    copyedList.value = [...props.list];
  }
);

watch(copyedList, () => {});
function move({
  moved,
}: {
  moved: { newIndex: number; oldIndex: number; element: iFolder };
}) {
  console.log(moved);
  setFolderPos({
    id: moved.element.id,
    after_id: copyedList.value[moved.newIndex - 1]?.id || 0,
    before_id: copyedList.value[moved.newIndex + 1]?.id || 0,
  }).then((ret) => {
    emit("setpos");
  });
}

const renameShow = ref(false);
const oldName = ref("");
const oldID = ref(NaN);
const emit = defineEmits(["update:show", "delete", "setpos"]);
const handleClickEdit = async (i: iFolder) => {
  oldName.value = i.name;
  oldID.value = i.id;
  renameShow.value = true;
};

const handleConfirmRename = async () => {
  const res = await renameRef.value.checkForm();
  if (!res) return res;
  props.refetch();
  return true;
};

const handleClickCategory = async (i: iFolder) => {
  showTip("此操作将永久删除该分类, 是否继续?", async () => {
    const res = await $ajax({
      url: GO_URLS.deleteFolder,
      type: "delete",
      params: {
        id: i.id,
      },
    });
    if (res) {
      ElMessage({
        type: "success",
        message: "删除成功!",
      });
      emit("delete");
    } else {
    }
  });
};
</script>
<style lang="scss">
.draggable-ghost.folderOuter {
  box-shadow: 0px 2px 10px 0px rgba(203, 203, 203, 0.5);
}
</style>

<style scoped lang="scss">
.tableHeader {
  font-size: 14px;
  font-weight: 400;
  color: var(--sy-gray);
}
.category-name {
  font-size: 13px;
  font-weight: 400;
  color: var(--sy-black);
}
</style>
