<template>
  <view class="mt-20">
    <l-drag ref="dragRef" :list="majors" :column="1" gridHeight="56px" :touchHandle="touchHandle" ghost handle
      @change="changeSort">
      <!-- // 每一项的插槽 grid 的 content 您传入的数据 -->
      <template #grid="{ active, content, index }">
        <!-- // grid.active 是否为当前拖拽项目 根据自己需要写样式 -->
        <view
          class="bg-back rounded-6 h-[44px] pl-30 pr-20 relative flex items-center gap-x-16 mb-[10px] border border-solid"
          :class="[active ? 'border-primary' : 'border-transparent']">
          <view class="text-32 text-fore-placeholder font-bold">{{ toFixedLen(index) }}</view>
          <view class="flex-1 w-1 h-full leading-[44px] text-28 text-fore-title font-bold ellipsis-1">{{ content.majorName }}</view>
          <uv-icon name="trash" size="18" color="error" @click="handleDelete" />
          <view slot="handle" @touchstart="handleDragStart" @touchend="handleDragEnd">
            <uv-icon name="list-dot" size="18" color="primary" />
          </view>
        </view>
      </template>
      <template #ghots></template>
    </l-drag>
  </view>
</template>
<script lang="ts" setup>
import type { Voluntary } from '@/types';
import { VOLUNTARY_REFRESHER_ENABLED } from "@/types/injectionSymbols";

const props = defineProps<{
  majors: Voluntary.VoluntaryMajorItem[];
}>();
const refresherEnabled = inject(VOLUNTARY_REFRESHER_ENABLED) || ref(false)
const emits = defineEmits<{
  (e: "delete", major: Voluntary.VoluntaryMajorItem): void;
  (e: "update:majors", majors: Voluntary.VoluntaryMajorItem[]): void;
  (e: "change", majors: Voluntary.VoluntaryMajorItem[]): void;
}>();
const touchHandle = ref(false)

const handleDragStart = () => {
  touchHandle.value = true;
  refresherEnabled.value = false;
}
const handleDragEnd = () => {
  touchHandle.value = false;
  refresherEnabled.value = true;
}
const changeSort = (e: any) => {
  const list = e.map((item: any) => item.content);
  emits('update:majors', list);
  emits('change', list);
}
const handleDelete = (major: Voluntary.VoluntaryMajorItem) => {
  emits('delete', major);
}
const toFixedLen = (i: number, len: number = 2) => {
  return String(i + 1).padStart(len, "0");
}
</script>
<style lang="scss" scoped></style>