<template>
    <!-- 树节点调整排序 -->
    <hc-dialog
        v-model="isSortingShow"
        title="调整排序"
        widths="600px"
        is-table
        @close="sortingClose"
    >
        <hc-table
            ref="tableSortingRef"
            :column="tableSortingColumn"
            :datas="tableSortingData"
            is-row-drop
            is-sort
            quick-sort
            @row-drop="sortingRowDropTap"
            @row-sort="sortingRowSortTap"
        />
        <template #footer>
            <el-button hc-btn @click="sortingClose">取消</el-button>
            <el-button
                hc-btn
                type="primary"
                :disabled="tableSortingData.length <= 0"
                :loading="sortingLoading"
                @click="sortingSubmit"
                >提交</el-button
            >
        </template>
    </hc-dialog>
</template>
<script setup>
import { ref, watch, nextTick } from "vue";
import mainApi from "~api/wbs/wbsforelement";
const props = defineProps({
    tab: {
        type: Array,
        default: () => [],
    },
});
//事件
const emit = defineEmits(["close"]);
//双向绑定
// eslint-disable-next-line no-undef
const isSortingShow = defineModel("modelValue", {
    default: false,
});
const tableSortingData = ref(props.tab);
//监听显示
watch(isSortingShow, (val) => {
    if (val) {
    } else {
        emit("close");
    }
});
//监听数据
watch(
    () => [props.tab],
    ([tabdata]) => {
        tableSortingData.value = tabdata;
    },
    { deep: true }
);
//关闭弹窗
const sortingClose = () => {
    isSortingShow.value = false;
    emit("close");
};
const tableSortingRef = ref(null);
const tableSortingColumn = [{ key: "tableName", name: "表单名称" }];
const sortingRowDropTap = async (rows) => {
    // 先清空，否则排序会异常
    tableSortingData.value = [];
    await nextTick();
    tableSortingData.value = rows;
};
const sortingRowSortTap = async (rows) => {
    // 先清空，否则排序会异常
    tableSortingData.value = [];
    await nextTick();
    tableSortingData.value = rows;
};
const sortingLoading = ref(false);

const sortingSubmit = async () => {
    const arr = tableSortingData.value;
    if (arr.length <= 0) {
        window?.$message?.warning("暂无数据");
        return;
    }
    sortingLoading.value = true;

    const { error, code } = await mainApi.submitTableSort(arr);
    sortingLoading.value = false;
    if (!error && code === 200) {
        window?.$message?.success("操作成功");
        sortingClose();
    }
};
</script>
