<template>
    <el-dialog
        v-model="visible"
        title="列设置"
        width="600px"
        :append-to-body="true"
        @close="handleClose"
    >
        <div class="column-setting">
            <div class="column-setting-header">
                <el-checkbox
                    :indeterminate="isIndeterminate"
                    :model-value="isAllChecked"
                    @change="handleToggleAll"
                >
                    列展示
                </el-checkbox>
                <el-button type="primary" link @click="handleReset">重置</el-button>
            </div>
            <div class="column-list">
                <draggable
                    v-model="localColumns"
                    :animation="200"
                    handle=".drag-handle"
                    item-key="prop"
                    @end="handleDragEnd"
                >
                    <template #item="{ element: column }">
                        <div
                            class="column-item"
                            :class="{
                                'is-fixed-left': column.fixed === 'left',
                                'is-fixed-right': column.fixed === 'right',
                            }"
                        >
                            <div class="column-item-left">
                                <el-icon class="drag-handle"><Sort /></el-icon>
                                <el-checkbox v-model="column.visible" @change="handleColumnChange">
                                    {{ column.label }}
                                </el-checkbox>
                            </div>
                            <div class="column-item-right">
                                <el-button
                                    :type="column.fixed === 'left' ? 'primary' : 'info'"
                                    :plain="column.fixed !== 'left'"
                                    link
                                    size="small"
                                    @click="handleFixColumn(column, 'left')"
                                >
                                    <el-icon><ArrowLeft /></el-icon>
                                </el-button>
                                <el-button
                                    :type="column.fixed === 'right' ? 'primary' : 'info'"
                                    :plain="column.fixed !== 'right'"
                                    link
                                    size="small"
                                    @click="handleFixColumn(column, 'right')"
                                >
                                    <el-icon><ArrowRight /></el-icon>
                                </el-button>
                            </div>
                        </div>
                    </template>
                </draggable>
            </div>
        </div>
        <template #footer>
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" @click="handleConfirm">确定</el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import draggable from 'vuedraggable'
import { ArrowLeft, ArrowRight, Sort } from '@element-plus/icons-vue'

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false,
    },
    columns: {
        type: Array,
        default: () => [],
    },
})

const emit = defineEmits(['update:modelValue', 'confirm'])

const visible = computed({
    get: () => props.modelValue,
    set: (val) => emit('update:modelValue', val),
})

const localColumns = ref([])
const originalColumns = ref([])

// 初始化列数据
const initColumns = () => {
    localColumns.value = props.columns.map((col) => ({
        ...col,
        visible: col.visible !== false,
        fixed: col.fixed || false,
    }))
    originalColumns.value = JSON.parse(JSON.stringify(localColumns.value))
}

// 全选状态
const isAllChecked = computed(() => {
    return localColumns.value.length > 0 && localColumns.value.every((col) => col.visible)
})

// 半选状态
const isIndeterminate = computed(() => {
    const checkedCount = localColumns.value.filter((col) => col.visible).length
    return checkedCount > 0 && checkedCount < localColumns.value.length
})

// 切换全选
const handleToggleAll = (val) => {
    localColumns.value.forEach((col) => {
        col.visible = val
    })
}

// 列变化
const handleColumnChange = () => {
    // 可以在这里添加逻辑
}

// 固定列
const handleFixColumn = (column, position) => {
    if (column.fixed === position) {
        column.fixed = false
    } else {
        column.fixed = position
    }
}

// 拖拽结束
const handleDragEnd = () => {
    // 拖拽后的顺序已经在 localColumns 中更新
}

// 重置
const handleReset = () => {
    localColumns.value = JSON.parse(JSON.stringify(originalColumns.value))
}

// 确认
const handleConfirm = () => {
    emit('confirm', localColumns.value)
    visible.value = false
}

// 关闭
const handleClose = () => {
    visible.value = false
}

// 监听 visible 变化
watch(
    () => props.modelValue,
    (val) => {
        if (val) {
            initColumns()
        }
    },
    { immediate: true },
)
</script>

<style scoped>
.column-setting {
    padding: 10px 0;
}

.column-setting-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #ebeef5;
}

.column-list {
    max-height: 400px;
    overflow-y: auto;
}

.column-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    margin-bottom: 8px;
    background: #f5f7fa;
    border-radius: 4px;
    transition: all 0.3s;
}

.column-item:hover {
    background: #ecf5ff;
}

.column-item.is-fixed-left {
    border-left: 3px solid #409eff;
}

.column-item.is-fixed-right {
    border-right: 3px solid #409eff;
}

.column-item-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.drag-handle {
    cursor: move;
    color: #909399;
    font-size: 16px;
    margin-right: 4px;
}

.drag-handle:hover {
    color: #409eff;
}

.column-item-right {
    display: flex;
    gap: 8px;
}
</style>
