<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">
          <vue-draggable
            v-model="list"
            style="display: flex; flex-wrap: wrap; gap: 10px 0"
          >
            <div
              v-for="(item, index) in list"
              :key="item.IDENTIFICATIONPARTS_ID"
              style="display: flex; align-items: center; cursor: move"
            >
              <el-tag>{{ index + 1 }}.{{ item.PARTSNAME }}</el-tag>
              <el-icon v-if="index < list.length - 1">
                <right />
              </el-icon>
            </div>
          </vue-draggable>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <template #footer>
      <el-button v-print="'#printContent'" type="primary">打印</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 { 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 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>
