<template>
    <el-row :gutter="5">
        <el-col :span="24">
            <el-card shadow="never" :body-style="{border: 'none'}" class="index-header">
                <template #header>
                    <div class="card-header">
                        <span>快速新建</span>
                        <div>
                            <el-button @click='open' type="text" icon="el-icon-edit" class="edit-btn">编辑</el-button>
                        </div>
                    </div>
                </template>
                <div class="fast-menu-body">
                    <router-link v-for="(item, index) in quickMenusList" :key="item.id" :to='item.path'
                        style="text-align: center
                        ;">
                        <div class="cicyle" :class="`fast-menu-color-bg${index}`" style="display: flex; align-items: center; justify-content: center;">
                            <el-icon color="#fff" size="32">
                                 <svg-icon className="svg-menu-icon"  :icon-class="item.icon" color="#fff" />
                            </el-icon>
                        </div>

                        <label>{{ item.menuName }}</label>
                    </router-link>
                </div>
            </el-card>
        </el-col>
    </el-row>
    <el-dialog v-model="visibleMenu" center width="680" class="list-dialog" title="编辑菜单">

        <el-alert :closable='false' title="已选菜单  按住菜单标签可以对菜单进行排序,最多可以设置10个快捷菜单" type="success" show-icon />

        <div class="selected-menu-list">
            <!--已选中菜单  可拖拽排序-->
            <draggable v-model="quickMenusList">
                <template #item="{ element }">
                    <transition-group name="list" tag="span">


                        <el-tag style="margin-right: 10px;margin-top: 10px;" :key="element.id" closable
                            @close="removeMenu(element.id)" class="tag-item">
                            {{ element.menuName }}
                        </el-tag>

                    </transition-group>
                </template>
            </draggable>

            <!-- <div v-draggable class="menu-item" v-for="item in quickMenusList" :key="item.id">

                <svg-icon :icon-class="item.icon" />
                <label>{{ item.menuName }}</label>
            </div> -->
        </div>
        <el-checkbox-group v-model="qMenuIds">
            <el-row>
                <template v-for="item in authMenusList" :key="item.id">

                    <el-col :span="6">
                        <span class='menu_span'>{{  item.menuName }}</span>

                        <el-checkbox v-for="child in item.children" :key="child.id" :value='child.id'  :label="child.menuName">
                            {{ child.menuName }}
                        </el-checkbox>
                    </el-col>
                </template>
            </el-row>

        </el-checkbox-group>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button :loading="buttonLoading" type="primary" @click="submitForm">提交</el-button>
            </div>
        </template>

    </el-dialog>

</template>


<script setup name="Index" lang="ts">
import * as echarts from 'echarts';
import { EChartsOption } from 'echarts'
import { getQuickMenus, getAuthMenus, saveAuthMenus } from "@/api/system/menu";
import { MenuVO } from '@/api/system/menu/types'

import { getAnalyzeSalesFunnel } from '@/api/home/index'
import draggable from 'vuedraggable'
const props = defineProps({
    data: {
        type: Object,
        default: () => {
            return {}
        }
    }
})

const buttonLoading = ref(false)


//快捷菜单
const quickMenusList = ref<Array<MenuVO>>([])
//权限菜单
const authMenusList = ref([])
//已选菜单
const selectedMenus = ref([])
//弹窗
const visibleMenu = ref(false)
//已选菜单id
const qMenuIds = ref<(string | number)[]>([])
//最多只能选择10个快捷菜单 先进先出原理对数组进行计算
watch(qMenuIds, (newVal) => {
    if (newVal.length > 10) {
        qMenuIds.value = newVal.slice(-10);
    }
});
const removeMenu = (id: string | number) => {
    quickMenusList.value = quickMenusList.value.filter((item: MenuVO) => item.id !== id)
    qMenuIds.value = qMenuIds.value.filter(item => item != id)
}

const cancel = () => {
    visibleMenu.value = false;
    qMenuIds.value = []
}
const submitForm = () => {
    buttonLoading.value = true;
    // 模拟提交表单
    setTimeout(() => {
        buttonLoading.value = false;
        visibleMenu.value = false;
        saveAuthMenus({ menuIdls: qMenuIds.value, rangeType: 1 }).then(res => {
            if (res.success) {
                console.log(res.result)
            }
            getQuickMenusByUser()
        })
        console.log('已选菜单:', selectedMenus.value);
    }, 1000);
}
//查询用户已有的快捷菜单
const getQuickMenusByUser = () => {
    getQuickMenus().then(res => {
        if (res.success) {
            quickMenusList.value = res.result
            qMenuIds.value = quickMenusList.value.map((item: MenuVO) => item.id)
        }
    })



}

const getQuickMenusList = () => {
    getAuthMenus().then(res => {
        if (res.success) {
            authMenusList.value = res.result
        }
    })


}




const echartsOption = reactive<EChartsOption>({
    xAxis: {
        type: 'category',
        boundaryGap: false,
        show: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value',
        show: false
    },
    series: [
        {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            smooth: true,
            lineStyle: {
                color: '#BC81FC'
            },
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 1,
                        color: 'rgb(255, 255, 255)'
                    },

                    {
                        offset: 0,
                        color: 'rgba(188, 129, 252, 1)'
                    }
                ])
            },
            type: 'line',

        }
    ]
}) as EChartsOption

const open = () => {

    visibleMenu.value = true
}

onMounted(() => {
    getQuickMenusByUser()
    getQuickMenusList()
});

</script>

<style scoped lang="scss">
.selected-menu-list {
    .el-tag {
        cursor: grab;
    }
}

.svg-menu-icon {
    font-size: 36px;
    color: #fff;
    height: 32px;
    width: 32px;
}

.menu_span {
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    height: 32px;
    line-height: 48px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
span {
        font-size: 14px;
        font-weight: 600;
    }
}
</style>

<style scoped lang="scss">
.fast-menu-body {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    span {
        display: flex;
        flex-direction: column;
        align-items: center;

}


.cicyle {
    width: 57px;
    height: 57px;
    border-radius: 50px;
    //background: linear-gradient(180deg, #1874FF 0%, #A2C7FF 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;


}

    .cicyle {
        width: 57px;
        height: 57px;
        border-radius: 50px;
        //background: linear-gradient(180deg, #1874FF 0%, #A2C7FF 100%);
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
    }

    label {
        font-weight: 500;

    }
    .fast-menu-color-bg0{
        background: linear-gradient( 0deg, #0955FF 0%, #5081F5 100%);
    }
    .fast-menu-color-bg1{
        background: linear-gradient( 0deg, #5C27FD 0%, #BD62DD 100%);
    }
    .fast-menu-color-bg2{
        background: linear-gradient( 0deg, #08A2FF 0%, #6CD7FF 100%);
    }
    .fast-menu-color-bg3{
        background: linear-gradient( 0deg, #469FE3 0%, #05DDD4 100%);
    }

    .fast-menu-color-bg4{
        background: linear-gradient( 0deg, #66B7FF 0%, #3681FF 100%);
    }
    .fast-menu-color-bg5{
        background: linear-gradient( 0deg, #2CFCB6 0%, #0DC591 100%);
    }
    .fast-menu-color-bg6{
        background: linear-gradient( 90deg, #14BBE1 0%, #73DEF8 100%);
    }
    .fast-menu-color-bg7{
        background: linear-gradient( 0deg, #FFB433 0%, #FFE023 100%);
    }
    .fast-menu-color-bg8{
        background: linear-gradient( 180deg, #FFC54C 0%, #FF7B02 100%);
    }
    .fast-menu-color-bg9{
        background: linear-gradient( 270deg, #E989FF 0%, #CE51FF 100%);
    }
}
</style>
