<template>
    <hc-dialog v-model="isShow" ui="hc-tasks-user-sort-modal" widths="600px" title="调整任务人顺序" @close="modalClose">
        <hc-table
            ref="tableRef" :column="tableColumn" :datas="tableData" ui="hc-tasks-user-sort-drop-table"
            is-row-drop quick-sort is-sort @row-drop="rowDropTap" @row-sort="rowSortTap"
        />
        <template #footer>
            <el-button @click="modalClose">取消</el-button>
            <el-button type="primary" @click="confirmClick">确定</el-button>
        </template>
    </hc-dialog>
</template>

<script setup>
import { nextTick, ref, watch } from 'vue'
import { deepClone, getArrValue } from 'js-fast-way'

const props = defineProps({
    data: {
        type: Array,
        default: () => ([]),
    },
})

const emit = defineEmits(['finish', 'close'])

//双向绑定
const isShow = defineModel('modelValue', {
    default: false,
})

//监听数据
const userData = ref([])
watch(() => props.data, (data) => {
    const res = getArrValue(data)
    userData.value = deepClone(res)
}, { deep: true, immediate: true })

watch(isShow, (val) => {
    if (val) setInitData()
})

//表格
const tableRef = ref(null)
const tableColumn = [{ key: 'userName', name: '名称' }]
const tableData = ref([])

//初始化
const setInitData = async () => {
    await nextTick()
    tableData.value = getArrValue(userData.value)
}

// 行拖拽
const rowDropTap = async (rows) => {
    tableData.value = []
    await nextTick()
    tableData.value = rows
}

// 点击排序
const rowSortTap = async (rows) => {
    tableData.value = []
    await nextTick()
    tableData.value = rows
}

//确定选择
const confirmClick = async () => {
    const list = deepClone(tableData.value)
    emit('finish', list)
    modalClose()
}

//关闭窗口
const modalClose = () => {
    isShow.value = false
    emit('close')
}
</script>
