<template>
    <div v-if="show">
        <a-drawer
            :body-style="{ paddingBottom: '80px' }"
            :visible="show"
            :width="400"
            title="编辑表头"
            @close="onClose"
            :maskClosable="false"
        >

            <!-- 表格 start-->
            <ul class="tableSort">
                <template v-for="(column,index) in innerColumns">
                    <li
                        draggable="true"
                        @dragenter="dragenter($event, index)"
                        @dragover="dragover($event, index)"
                        @dragstart="dragstart(index)"
                        :key="index"
                    >
                        <div class="left">
                            <a-icon type="menu" />
                            <span>{{column.title}}</span>
                        </div>
                        <div class="right">
                            <a-switch
                                v-model="column.display"
                                checked-children="展示"
                                un-checked-children="隐藏"
                            />
                        </div>
                    </li>
                </template>
            </ul>
            <!-- 表格 end-->

            <!-- 底部按钮 start-->
            <div class="drawer-menu">
                <a-button :style="{ marginRight: '8px' }" @click="onClose">取消</a-button>
                <a-button type="primary" @click="submitForm">保存</a-button>
            </div>
            <!-- 底部按钮 end-->
        </a-drawer>
    </div>
</template>

<script>
    import { request } from "../utils/request";

    export default {
        name: "EditColumns",
        props: {
            show: Boolean,
            columns: Array,
            gridName: String
        },
        components: { },
        data() {
            return {
                innerColumns: [],
                dragIndex: ''
            };
        },
        watch: {
            show(val) {
                if (val) {
                    // TODO 方便Switch组件传值，后面请求是需要将值转换回来
                    this.innerColumns = this.columns.map(i=>({...i, display: i.display==0?false:true}));
                }
            },
            columns: {
                handler(res = []) {
                    // TODO 方便Switch组件传值，后面请求是需要将值转换回来
                    this.innerColumns = res.map(i=>({...i, display: i.display==0?false:true}));
                },
                deep: true
            }
        },
        methods: {
            saveGridInfo(reloadHeader = true) {
                const {gridName,innerColumns} = this;
                const columnList = innerColumns.map(({dataIndex,width,display})=>({columnName: dataIndex, columnWidth: width, display: Number(display)}));
                const data = {gridName,columnList};
                const that = this;
                request({
                    url: "/grid/saveGridInfo",
                    data,
                }).then((res) => {
                    if (res.code == "20000") {
                        if(reloadHeader) {
                            that.$emit("reloadHeader");
                        }
                        that.$message.success("保存成功！");
                        that.onClose();
                    }
                });
            },
            dragstart(index) {
                this.dragIndex = index;
            },
            dragenter(e, index) {
                e.preventDefault();
                // 避免源对象触发自身的dragenter事件
                if (this.dragIndex !== index) {
                    const source = this.innerColumns[this.dragIndex];
                    this.innerColumns.splice(this.dragIndex, 1);
                    this.innerColumns.splice(index, 0, source);
                    // 排序变化后目标对象的索引变成源对象的索引
                    this.dragIndex = index;
                }
            },
            dragover(e) {
                e.preventDefault();
            },
            /**
             * 提交
             */
            submitForm() {
                this.$confirm({
                    centered: true,
                    title: "提示",
                    content: "确定要保存吗？",
                    onOk: () => {
                        this.saveGridInfo();
                    },
                    onCancel: () => {},
                });
            },
            /**
             * 关闭
             */
            onClose() {
                this.$emit("update:show", false);
            },
        },
    };
</script>

<style scoped lang="less">
    .tableSort {
        display: block;
        width: 100%;
        list-style: none;
        padding: 0;
        margin: 0;
        li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #f1f1f1;
            margin-bottom: 5px;
            padding: 8px 16px;
            font-size: 14px;
            color: #999;
            span {
                margin-left: 10px;
            }
        }
    }
</style>
