<template>
    <section class="modules">
        <section class="m-head">
            <MOSTY.Assort :title="'常用应用'" />
            <el-link @click="handleEdit" style="width: 82px;color: #048086;">编辑</el-link>
        </section>
        <!-- <section class="content">
            <div class="item" style="width: 25%;" @click="handleGoToPage('/editPassword', '个人中心')">
                <img style="width: 46px; height: 46px" :src="getImgUrl(`tobacco/工作待办.png`)" />
                <p style="margin: 0;padding: 0;">工作待办</p>
                <div class="badeg" v-if="rwNum > 0">{{ rwNum }}</div>
            </div>
        </section>
        <el-divider style="margin: 0 !important;border-color: #EFEFEF;" /> -->
        <section class="content">
            <draggable :list="state.list" :disabled="!state.enabled" item-key="name" ghost-class="ghost"
                chosen-class="chosen" @start="state.dragging = true" class="items" @end="handleDraggable"
                animation="300">
                <template #item="{ element }">
                    <el-col :span="6">
                        <div class="item" :key="element.id" @click="handleGoToPage(element.menuUrl, element.menuName)">
                            <img style="width: 36px; height: 36px"
                                :src="getImgUrl(`tobacco/${element.menuName}.png`)" />
                            <p style="margin: 0;padding: 0;">{{ element.menuName }}</p>
                        </div>
                    </el-col>
                </template>
            </draggable>
        </section>
        <el-dialog v-model="dialogVisible" title="编辑" width="60%" :before-close="closeDialog">
            <section class="query">
                <el-input placeholder="请输入应用名称" v-model="listQuery.menuName" clearable style='width:250px'
                    @keyup.enter="queryAllApp"></el-input>
                <section class="query-btn">
                    <el-button class="mr6" type="primary" @click="queryAllApp">
                        <el-icon>
                            <Search />
                        </el-icon>查询</el-button>
                    <el-button type="primary" @click="handleReset">
                        <el-icon>
                            <Refresh />
                        </el-icon>重置</el-button>
                </section>
            </section>
            <section class="icon mt12">
                <el-row :gutter="20">
                    <el-col :span="4" v-for="element in state.editList" :key="element.id">
                        <div class="item dialog-item"
                            :class="{ 'active': state.selectList.find(v => v.id == element.id) }"
                            @click="handleSelectApp(element)">
                            <img style="width: 46px; height: 46px"
                                :src="getImgUrl(`tobacco/${element.menuName}.png`)" />
                            <p style=" margin: 0;padding: 0;">{{ element.menuName }}</p>
                        </div>
                    </el-col>
                </el-row>
            </section>
            <div class="fenye">
                <MOSTY.Pages :pageConfiger="listQuery" @changeNo="handleCurrentChange" @changeSize="handleSizeChange"
                    :pageSizeArr="[12, 18, 24, 32]" type="app" />
            </div>
            <template #footer>
                <span class="dialog-footer">

                    <el-button type="primary" @click="handleConfirm"> <el-icon>
                            <DocumentChecked />
                        </el-icon>
                        <span>保存</span></el-button>
                    <el-button @click="closeDialog" type="primary"> <el-icon>
                            <DocumentDelete />
                        </el-icon>
                        <span>关闭</span></el-button>
                </span>
            </template>
        </el-dialog>
    </section>
</template>

<script setup>
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
import * as MOSTY from "@/components/MyComponents/index";
import draggable from "vuedraggable";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { getImgUrl } from "@/utils/tools.js"
import { ElMessage } from "element-plus";
const { proxy } = getCurrentInstance();
const router = useRouter();
const store = useStore();

const rwNum = ref(0)
const dialogVisible = ref(false)
const listQuery = ref({
    size: 24,
    current: 1,
    total: 0,
    menuName: ''
})
const state = reactive({
    enabled: true,
    list: [],
    dragging: false,
    selectList: [],
    editList: []
});
// 跳转应用
const handleGoToPage = (_url, _title) => {
    if (_url) {
        store.commit(
            "app/addTagsViewList",
            {
                fullPath: _url,
                meta: {
                    meta: {
                        title: _title
                    }
                },
                name: _url,
                params: {},
                path: _url,
                query: {},
                title: _title
            },
            {
                immediate: true
            }
        );
        router.push(_url)
    }
}
//页码发生变化
const handleCurrentChange = (val) => {
    listQuery.value.current = val;
    queryAllApp()
};
//查询条数发生变化
const handleSizeChange = (val) => {
    listQuery.value.size = val;
    queryAllApp()
};
// 重置
const handleReset = () => {
    listQuery.value.menuName = ''
    queryAllApp()
}
// 编辑应用
const handleEdit = () => {
    queryAllApp()
    dialogVisible.value = true
}
// 查询所有应用
const queryAllApp = () => {
    postApi(listQuery.value, `/mosty-base/sysCommonMenu/queryMenu`).then((res) => {
        state.editList = res.records
        listQuery.value.total = res.total
    });
}
// 保存应用
const handleConfirm = () => {
    let _data = []
    state.selectList.map((item, index) => {
        _data.push({ menuId: item.id, sequence: index })
    })
    postApi(_data, `/mosty-base/sysCommonMenu/addSysCommonMenu`).then((res) => {
        ElMessage.success('保存成功')
        dialogVisible.value = false
        queryDefaultApp()
    });
}
const closeDialog = () => {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
        .then(() => {
            dialogVisible.value = false
        })
        .catch(() => {
            // catch error
        })


};
// 查询默认应用
const queryDefaultApp = () => {
    postApi({}, `/mosty-base/sysCommonMenu/queryCommonMenu`).then((res) => {
        state.list = res
    });
    getApi({ zdlx: '02' }, "/mosty-jcgl/rw/getCountFromMain").then((res) => {
        rwNum.value = res.rw + res.xx
    })
}
// 选择应用
const handleSelectApp = (el) => {
    let _index = state.selectList.findIndex(v => v.id == el.id)
    if (!state.selectList.find(v => v.id == el.id)) {
        if (state.selectList.length >= 8) {
            ElMessage.warning('最多可选择8个常用应用')
            return
        }
        state.selectList.push(el)
    } else {
        state.selectList.splice(_index, 1)
    }
}
// 拖拽完成 
const handleDraggable = () => {
    let _data = []
    state.list.map((item, index) => {
        _data.push({ menuId: item.id, sequence: index })
    })
    postApi(_data, `/mosty-base/sysCommonMenu/editSysCommonMenu`).then((res) => {
        ElMessage.success('修改成功')
    });
    state.dragging = false
}
// 查看全部
const handleMore = (_url, _title) => {
    if (_url) {
        store.commit(
            "app/addTagsViewList",
            {
                fullPath: _url,
                meta: {
                    meta: {
                        title: _title
                    }
                },
                name: _url,
                params: {},
                path: _url,
                query: {},
                title: _title
            },
            {
                immediate: true
            }
        );
        router.push(_url)
    }
}
onMounted(() => {
    queryDefaultApp()
})
</script>
<style scoped lang="scss">
// @import '../style/index.scss';
.modules {
    height: 180px;
    background: #fff;
    padding: 0 16px;
    box-sizing: border-box;

    .m-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #fff;
    }

    .content {
        height: 128px;
        overflow: auto;
    }
}

.m-content {
    height: calc(328px - 50px);

    .m-list {
        .m-flex {
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 12px;
            cursor: pointer;

            &:hover .title {
                color: var(--el-color-primary);
            }

            &:hover .time {
                color: var(--el-color-primary);
            }

            .title {
                color: #000000;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 65%;
            }

            .time {
                color: #999999;
            }
        }

    }
}

.app-content {
    // position: absolute;
    left: 0;
    bottom: 0px;
    height: 240px;
    background-color: #fff;
    width: 100%;

    .content {
        height: 128px;
        overflow: auto;
        margin-top: 12px;
    }
}

.app {
    position: absolute;
    left: 0;
    bottom: 0px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    width: 100%;
    text-align: center;

    &:hover {
        background-color: var(--el-table-cell-bmx-backgroundcolor) !important
    }


    .felxs {
        margin: 0 auto;

        >span {
            color: #000;
            font-size: 12px;
            display: block;
        }
    }
}

.items {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.item {
    text-align: center;
    padding: 4px;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;

    .badeg {
        padding: 0 4px;
        border-radius: 50%;
        background: #f00;
        color: #fff;
        font-size: 12px;
        position: absolute;
        right: 15px;
        top: -5px;
    }

    >p {
        color: #333
    }
}

.dialog-item {
    margin-bottom: 6px;
}

.item:hover {
    background-color: var(--el-table-cell-bmx-backgroundcolor) !important
}

.active {
    background-color: var(--el-table-cell-bmx-backgroundcolor) !important;
}

.query {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
    box-sizing: border-box;

    .query-btn {
        width: 250px;
        display: flex;
        justify-content: flex-end;

        .toggle {
            height: 32px;
            cursor: pointer;
            display: flex;
            align-items: center;
            color: #0f3916;

            .el-icon {
                transform: rotate(90deg);
                transition: all 0.25s ease;
            }

            &.active {
                .el-icon {
                    transform: rotate(-90deg);
                }
            }
        }
    }
}
</style>