<template>
    <el-dialog
        v-model="listDialog"
        width="700"
        class="list-dialog"
    >
        <template #header>
            <p class="bold" style="font-size: 16px">自定义显示列项</p>
            <p style="color: #666">列表显示不得少于5项，最多支持自定义10个列项，灰色选中列不支持隐藏和排序</p>
        </template>
        <div class="list-content">
            <el-row class="header-row">
                <el-col :span="2">显示</el-col>
                <el-col :span="18">列名</el-col>
                <el-col :span="4">拖动调整顺序</el-col>
            </el-row>
            <draggable
                :list="dragList"
                :force-fallback="true"
                animation="300"
                class="drag-area"
                :move="onMove"
                filter=".forbid"
                itemKey="prop"
            >
                <template #item="{ element }">
                    <el-row :class="element.disabledMove ? 'forbid' : ''">
                        <el-col :span="2">
                            <el-checkbox v-model="element.show" :disabled="element.disabledMove"></el-checkbox>
                        </el-col>
                        <el-col :span="18">{{ element.label }}</el-col>
                        <el-col :span="4"><i-ep-expand class="sort-icon" /></el-col>
                    </el-row>
                </template>
            </draggable>
        </div>
        <div class="list-footer">
            <el-button class="left-btn" link type="primary" @click="recoverDefault">恢复默认</el-button>
            <div>
                <el-button @click="listDialog = false">取消</el-button>
                <el-button type="primary" @click="save">提交</el-button>
            </div>
        </div>
    </el-dialog>
</template>

<script setup lang="ts">
    import draggable from "vuedraggable";
    import { columnTypes } from '../types'
import { userHobit } from '@/store/modules/userHobit'
const userHobitStore = userHobit()
const props = defineProps(['defaultColumn', 'cloumnCode'])
    const emits = defineEmits(['changeList'])
    const listDialog = ref(false)
    const dragList = ref<columnTypes[]>([])

    const open = (tableColumn: columnTypes[]) => {
        dragList.value = deepClone(tableColumn)
        listDialog.value = true
    }

    const onMove = (e: any) => {
        //不允许停靠
        if (e.relatedContext.element.disabledMove == true) return false;
        return true;
    }

    const save = () => {
        let list = dragList.value.filter(item => item.show)
        if(list.length < 5) {
            ElMessage.error('列表显示不得少于5项')
            return false
        }
        if(list.length > 10) {
            ElMessage.error('最多支持自定义10个列项')
            return false
        }
        userHobitStore.saveCloumn(props.cloumnCode, dragList.value)
        emits('changeList', dragList.value)

        listDialog.value = false
    }

const recoverDefault = () => {
        open(props.defaultColumn)
    }

    const deepClone = (source: any) => {
        let targetObj: any = source.constructor === Array ? [] : {};
        for (let key in source) {
            if (source.hasOwnProperty(key)) {
                // 只拷贝自身的属性，不拷贝原型的属性
                if (source[key] && typeof source[key] === "object") {
                    // 元素为引用数据类型
                    targetObj[key] = source[key].constructor === Array ? [] : {};
                    targetObj[key] = deepClone(source[key]);
                } else {
                    // 元素为基本数据类型
                    targetObj[key] = source[key];
                }
            }
        }
        return targetObj;
    }

    defineExpose({
        open
    })
</script>

<style lang="scss">
    .list-dialog{
        .list-content{
            border: 1px solid #DCDEE2;
            border-bottom: 0;
            .drag-area{
                height: 400px;
                overflow: auto;
            }
            .header-row{
                background: #F8FAFC;
                .el-col{
                    font-weight: bold;
                    color: #333;
                }
            }
            .el-row{
                border-bottom: 1px solid #DCDEE2;
            }
            .el-col{
                height: 48px;
                line-height: 48px;
                padding: 0 10px;
                display: flex;
                align-items: center;
                .sort-icon{
                    margin-left: 4px;
                }
            }
            .forbid{
                color: #999;
            }
            p{
                color: #333
            }
        }
        .list-footer{
            position: relative;
            text-align: center;
            margin-top: 16px;
            .left-btn{
                position: absolute;
                left: 0;
            }
            .el-button:not(.is-link){
                width: 80px;
            }
        }
    }
</style>

