<!-- 表格设置 -->
<template>
    <app-drawer class="app-table-setting" title="表格设置" v-model:show="showDrawer">
        <el-scrollbar :max-height="300">
            <ul ref="sortRef">
                <li v-for="(item, index) in tableColumns" :key="index">
                    <div class="sortable-content">
                        <el-checkbox v-model="item.show" :label="item.label" size="large" />
                        <el-select v-model="item.fixed">
                            <el-option label="不固定" value="" />
                            <el-option label="固定左边" value="left" />
                            <el-option label="固定右边" value="right" />
                        </el-select>
                    </div>
                    <div class="sortable-icon">
                        <el-tooltip :content="item.sortable ? '取消排序' : '列表排序'" :show-after="500" placement="top">
                            <el-icon :class="[item.sortable ? 'active' : '']" @click="item.sortable = !item.sortable">
                                <Sort />
                            </el-icon>
                        </el-tooltip>
                        <el-icon class="sortable-handle">
                            <Rank />
                        </el-icon>
                    </div>
                </li>
            </ul>
        </el-scrollbar>
        <template #footer>
            <el-button @click="closeDrawer">取消</el-button>
            <el-button type="primary" @click="updateColumn">保存</el-button>
        </template>
    </app-drawer>
</template>

<script lang="ts" setup>
import { ref, PropType, onMounted, onBeforeUnmount, nextTick } from 'vue'
import Sortable from 'sortablejs'
import AppDrawer from '@pc/components/base/drawer/index.vue'

const emit = defineEmits(['update'])

const props = defineProps({
    columns: {
        type: Array as PropType<Model.TableColumn[]>,
        default: () => ([])
    },
})

const showDrawer = ref(true)
const sortRef = ref()
const tableColumns = ref<Model.TableColumn[]>(JSON.parse(JSON.stringify(props.columns)))

const updateColumn = () => {
    emit('update', tableColumns.value)
    closeDrawer()
}

const closeDrawer = () => {
    showDrawer.value = false
}

onMounted(() => {
    const sortable = new Sortable(sortRef.value, {
        animation: 150,
        draggable: 'li',
        handle: '.sortable-handle',
        chosenClass: 'sortable-chosen',
        forceFallback: true,
        fallbackClass: 'sortable-fallback',
        onEnd: ({ newIndex, oldIndex }) => {
            if (newIndex !== undefined && oldIndex !== undefined) {
                const columns = tableColumns.value
                const target = columns[oldIndex]
                columns.splice(oldIndex, 1)
                columns.splice(newIndex, 0, target)

                tableColumns.value = []
                nextTick(() => tableColumns.value = columns)
            }
        },
    })
    onBeforeUnmount(() => sortable.destroy())
})
</script>

<style lang="less">
@import './index.less';
</style>