<template>
  <WlPopup
    v-model="visible"
    position="bottom"
    round
    headerVisible
    :title="title"
    style="height: 80%"
    v-bind="$attrs"
  >
    <FieldSort :list="list" v-bind="$attrs"/>
  </WlPopup>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import WlPopup from '@mobileUI/components/WlPopup/src/index.vue';
import FieldSort from './components/FieldSort.vue';

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

const emit = defineEmits<{
  (e: 'update:modelValue', val: boolean): void;
}>();

// v-model
let visible = ref(false);
watch(
  () => props.modelValue,
  (val: boolean) => {
    if (val) {
      visible.value = props.modelValue;
    }
  }
);
watch(
  () => visible.value,
  (val: boolean) => {
    if (!val) emit('update:modelValue', val);
  }
);
</script>
