<template>
  <div class="field-sort" data-weiling-mobile-ui-wl-field-sort>
    <div v-for="item in fieldList" :key="item.key" class="field-content">
      <!-- 头 -->
      <div class="field-title">
        <span class="title-line"></span>
        <span class="title-text">{{ item.title }}</span>
      </div>

      <!-- 字段 -->
      <ul class="field-box">
        <vuedraggable
          v-model="item.list"
          item-key="property_id"
          animation="300"
          :disabled="!item.sortable"
          handle=".drag-icon"
        >
          <template #item="{ element }">
            <li class="field-item">
              <div class="item-left">
                <WlSvg
                  :type="item.icon"
                  class="field-left-icon"
                  :style="{ color: item.color }"
                  @click.stop="onFieldClick(item, element)"
                />
                <span>{{ element.name || element.view_name }}</span>
              </div>
              <div class="drag-icon" @click.stop>
                <WlSvg v-if="item.sortable" type="drag" class="field-drag-icon" />
              </div>
            </li>
          </template>
        </vuedraggable>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "BCFieldSort",
};
</script>

<script setup lang="ts">
import { ref, watch } from "vue";
import WlSvg from "@wltech/svg";
import vuedraggable from "vuedraggable";

interface VList {
  key: string; // 唯一标识
  editKey: string; // 匹配标识
  title: string;
  sortable: boolean;
  icon: string;
  color?: string;
  list: any[];
}
interface Props {
  list: VList[];
}
const props = withDefaults(defineProps<Props>(), {
  list: () => {
    return [];
  },
});

const emit = defineEmits<{
  (e: "onChange", val: VList[]): void;
}>();

// 点击字段
const fieldList = ref<VList[]>(JSON.parse(JSON.stringify(props.list)));
const onFieldClick = (item: VList, element: any) => {
  const fieldItem = fieldList.value?.find((v: VList) => v.key === item.key);
  if (fieldItem) {
    const oldList = fieldItem?.list;
    const i = oldList?.findIndex((v: any) => v.property_id === element.property_id);
    if (i !== -1) {
      oldList.splice(i, 1);
      const newList = fieldList.value?.find((v: VList) => v.editKey === item.key)?.list;
      newList &&
        newList.push({
          ...element,
          display: !element.display,
        });
    }
  }
};

// 字段改变
watch(
  () => props.list,
  () => {
    fieldList.value = JSON.parse(JSON.stringify(props.list));
  },
  {
    immediate: true,
    deep: true,
  }
);
watch(
  () => fieldList.value,
  () => {
    emit("onChange", fieldList.value);
  },
  {
    deep: true,
  }
);
</script>

<style lang="scss">
.field-sort[data-weiling-mobile-ui-wl-field-sort] {
  height: 100%;
  overflow: auto;
  padding: 0 j(16) j(16);
  background: var(--wl-body-color);
  box-sizing: border-box;
  .field-content {
    .field-title {
      display: flex;
      align-items: center;
      margin-top: j(16);
      .title-line {
        width: j(4);
        height: j(16);
        background: var(--wl-primary-color);
        border-radius: j(9);
      }
      .title-text {
        font-weight: 500;
        font-size: j(14);
        line-height: j(22);
        color: var(--wl-text-color-title-1);
        margin-left: j(4);
      }
    }
    .field-box {
      margin-top: j(6);
      border-radius: j(6);
      overflow: hidden;
      .field-item {
        min-height: 46px;
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
        padding: 0 j(4) 0 j(16);
        .item-left {
          display: flex;
          align-items: center;
          span {
            line-height: j(22);
            padding: j(12) 0;
          }
        }
        .field-left-icon {
          width: j(20);
          height: j(20);
          color: var(--wl-error-color);
          margin-right: 10px;
        }
        .drag-icon {
          padding: 10px j(12);
          .field-drag-icon {
            width: j(20);
            height: j(20);
            color: var(--wl-text-color-secondary-2);
          }
        }

        &:not(:last-child)::after {
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          content: '';
          display: block;
          width: calc(100% - j(32));
          height: j(1);
          background: var(--wl-line-color);
        }
      }
    }
  }
}
</style>
