<template>
  <el-dialog v-model="visible" title="设置巡检路线">
    <div id="printContent">
      <el-divider content-position="left"> {{ info.NAME }}巡检路线 </el-divider>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="清单名称" :span="2">
          {{ info.NAME }}
        </el-descriptions-item>
        <el-descriptions-item label="部门">
          {{ info.DEPARTMENT_NAME_ALL }}
        </el-descriptions-item>
        <el-descriptions-item label="岗位">
          {{ info.POST_NAME }}
        </el-descriptions-item>
        <el-descriptions-item label="负责人">
          {{ info.USER_NAME }}
        </el-descriptions-item>
        <el-descriptions-item label="排查类型">
          {{ info.SCREENTYPENAME }}
        </el-descriptions-item>
        <el-descriptions-item label="排查周期">
          {{ info.PERIODNAME }}
        </el-descriptions-item>
        <el-descriptions-item label="清单类型">
          {{ info.TYPENAME }}
        </el-descriptions-item>
        <el-descriptions-item label="设置巡检路线" :span="2">
          <div style="display: flex; flex-wrap: wrap">
            <div
              style="display: flex; align-items: center"
              v-for="(item, index) in list"
              :key="item.IDENTIFICATIONPARTS_ID"
              :draggable="true"
              @dragenter="fnDragEnter(item.IDENTIFICATIONPARTS_ID)"
              @dragstart="fnDragStart(item.IDENTIFICATIONPARTS_ID)"
            >
              <el-tag>{{ index + 1 }}.{{ item.PARTSNAME }}</el-tag>
              <el-icon v-if="index < list.length - 1">
                <Right />
              </el-icon>
            </div>
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <template #footer>
      <el-button type="primary" v-print="'#printContent'">打印</el-button>
      <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 { ref } from "vue";
import { ElMessage } from "element-plus";
import { debounce } from "throttle-debounce";
import { setInventoryManagementRoute } from "@/request/hazard_investigation.js";

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false,
  },
  list: {
    type: Array,
    required: true,
    default: () => [],
  },
  info: {
    type: Object,
    required: true,
    default: () => ({}),
  },
});
const emits = defineEmits(["update:visible", "update:list"]);
const { visible, list } = useVModels(props, emits);
const currentStart = ref("");
const currentEnd = ref("");
const fnDragStart = (id) => {
  currentStart.value = id;
};
const fnDragEnter = (id) => {
  currentEnd.value = id;
  const startIndex = list.value.findIndex((item) => {
    return item.IDENTIFICATIONPARTS_ID === currentStart.value;
  });
  const endIndex = list.value.findIndex((item) => {
    return item.IDENTIFICATIONPARTS_ID === currentEnd.value;
  });
  list.value = fnMoveList(list.value, startIndex, "swap", endIndex);
};
const fnMoveList = (enteArr, index, upDown, swapIndex = index + 1) => {
  const arr = JSON.parse(JSON.stringify(enteArr));
  if (upDown === "up") {
    arr.splice(index - 1, 0, arr[index]);
    arr.splice(index + 1, 1);
  } else if (upDown === "down") {
    arr.splice(index + 2, 0, arr[index]);
    arr.splice(index, 1);
  } else if (upDown === "start") {
    arr.splice(0, 0, arr[index]);
    arr.splice(index + 1, 1);
  } else if (upDown === "end") {
    arr.splice(arr.length, 0, arr[index]);
    arr.splice(index, 1);
  } else if (upDown === "swap") {
    arr[swapIndex] = arr.splice(index, 1, arr[swapIndex])[0];
  }
  return arr;
};
const fnClose = () => {
  visible.value = false;
};
const fnSubmit = debounce(
  1000,
  async () => {
    await setInventoryManagementRoute({
      LISTMANAGER_ID: props.info.LISTMANAGER_ID,
      ROUTE: JSON.stringify(list.value),
    });
    ElMessage.success("设置成功");
    fnClose();
  },
  { atBegin: true }
);
</script>

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