<template>
    <!--调整节点排序-->
    <HcDialog :show="nodeSortModel" title="调整排序" widths="980px" isTable isRowFooter @close="nodeSortModalClose">
        <el-alert title="可拖动排序，也可在后面点击图标，切换排序" type="warning" :closable="false"/>
        <div class="hc-table-h">
            <HcTable ui="hc-table-row-drop" :column="nodeSortTableColumn" :datas="nodeSortTableData" :loading="nodeSortTableLoading" isRowDrop @row-drop="nodeSortTableRowDrop">
                <template #key2="{row}">
                    <span class="text-link">{{row?.key2}}</span>
                </template>
                <template #action="{index}">
                <span class="text-link text-xl" @click="nodeUpSortClick(index)">
                    <HcIcon name="arrow-up" fill/>
                </span>
                    <span class="text-link text-xl ml-2" @click="nodeDownSortClick(index)">
                    <HcIcon name="arrow-down" fill/>
                </span>
                </template>
            </HcTable>
        </div>
        <template #rightRowFooter>
            <el-button hc-btn @click="nodeSortModalClose">
                <HcIcon name="close"/>
                <span>取消</span>
            </el-button>
            <el-button type="primary" hc-btn :loading="nodeSortModalLoading" @click="nodeSortModalSave">
                <HcIcon name="check"/>
                <span>确认</span>
            </el-button>
        </template>
    </HcDialog>
</template>

<script setup>
import {ref, watch, onMounted,nextTick,toRefs,computed } from "vue";
import {submitArchiveTreeSort} from "~api/other";

//参数
const props = defineProps({
    projectId: {
        type: [String,Number],
        default: ''
    },
    contractId: {
        type: [String,Number],
        default: ''
    },
    node: {
        type: Object,
        default: () => ({})
    },
    show:{
      type:Boolean,
      default:false
    },
})

const projectId = ref(props.projectId);
const contractId = ref(props.contractId);
// 使用toRefs结构，使其具有响应式
const {node} = toRefs(props);

//监听
watch(() => [
    props.projectId,
    props.contractId,
], ([UserProjectId, UserContractId]) => {
    projectId.value = UserProjectId
    contractId.value = UserContractId
})

watch(() => [props.show],([newShow])=>{
    //console.log(newShow,newType)
    if(newShow){
      sortNodeMoadl()
    }else{
      nodeSortModalClose();
    }
});

//事件
const emit = defineEmits(['hide'])

//节点排序
const nodeSortModel = ref(false)
const nodeSortTableColumn = ref([
    {key:'title', name: '节点名称'},
    {key:'action', name: '排序', width: 90},
])
const nodeSortTableData = ref([])
const nodeSortTableLoading = ref(false)
const nodeSortModalLoading = ref(false)


const nodeSortModalClose = () =>{
    emit('hide', {})
    nodeSortModel.value = false;
}

const nodeSortTableRowDrop = (rows)=>{
    nodeSortTableData.value = rows
}
//向下
const nodeDownSortClick = (index) => {
    const indexs = index + 1
    const data = nodeSortTableData.value
    if(indexs !== data.length) {
        const tmp = data.splice(indexs,1);
        nodeSortTableData.value.splice(index,0,tmp[0]);
    } else {
        window?.$message?.warning('已经处于置底，无法下移')
    }
}

//向上
const nodeUpSortClick = (index) => {
    const data = nodeSortTableData.value || []
    if(index !== 0) {
        const tmp = data.splice(index - 1,1);
        nodeSortTableData.value.splice(index,0,tmp[0]);
    } else {
        window?.$message?.warning('已经处于置顶，无法上移')
    }
}

const sortNodeMoadl = ()=>{
    nodeSortModel.value = true;
    //console.log(node)
    let list = [];
    if(node.value.parent){
        node.value.parent.childNodes.forEach((element)=>{
            list.push(element.data)
        })
    }
    nodeSortTableData.value = list;
}

const nodeSortModalSave = async()=>{
    nodeSortModalLoading.value = true;
    const {code,data} = await submitArchiveTreeSort(nodeSortTableData.value)
    //console.log(res);
    nodeSortModalLoading.value = false;
    if (code == 200) {
        window.$message?.success('修改成功')
        window?.location?.reload()  //刷新页面
    }
    
}
</script>
