<template>
  <el-dialog v-model="visible" title="设置巡检路线">
    <vue-draggable
      v-model="list"
      style="display: flex; flex-wrap: wrap; gap: 10px 0"
    >
      <div
        v-for="(item, index) in list"
        :key="item.ID"
        style="display: flex; align-items: center; cursor: move"
      >
        <el-tag>{{ index + 1 }}.{{ item.NAME }}</el-tag>
        <el-icon v-if="index < list.length - 1">
          <right />
        </el-icon>
      </div>
    </vue-draggable>
    <template #footer>
      <el-button @click="fnClose">取消</el-button>
      <el-button type="primary" @click="fnSubmit">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { Right } from "@element-plus/icons-vue";
import { useVModels } from "@vueuse/core";
import { VueDraggable } from "vue-draggable-plus";

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false,
  },
  list: {
    type: Array,
    required: true,
    default: () => [],
  },
});
const emits = defineEmits(["update:visible", "update:list", "submit"]);
const { visible, list } = useVModels(props, emits);
const fnClose = () => {
  visible.value = false;
};
const fnSubmit = async () => {
  emits("submit");
  fnClose();
};
</script>

<style scoped lang="scss"></style>
