<template>
    <layout-box>
        我的应用
        <template #action>
            <template v-if="isEdit">
                <div>
                    <el-button type="text" style="color: #909399" @click="handleCancel">取消</el-button>
                    <el-button type="text" @click="handleSave">保存</el-button>
                </div>
            </template>
            <el-button v-if="!isEdit && normalList.length" type="text" @click="handleEdit">编辑</el-button>
        </template>
        <template #content>
            <div class="my-app-list scrollbar">
                <template v-if="globalList.length">
                    <div
                        class="app-item"
                        v-for="(item, index) of globalList"
                        :key="index"
                        @click="handleJump(item)"
                    >{{ item.ModuleName }}</div>
                </template>
                <draggable
                    tag="div"
                    :componentData="componentData"
                    v-model="normalList"
                    :options="options"
                >
                    <div
                        class="app-item"
                        v-for="(item, index) of normalList"
                        :key="index"
                        @click="handleJump(item)"
                    >
                        {{ item.ModuleName }}
                        <a
                            v-if="isEdit"
                            href="javascript:;"
                            class="delete-btn"
                            @click.stop="handleDel(item, index)"
                        >
                            <i class="el-icon-minus"></i>
                        </a>
                    </div>
                </draggable>
                <div class="app-item add-app-item undraggable" @click="visibleDialog = true">
                    <i class="el-icon-plus"></i>
                </div>
            </div>
        </template>
        <template #slot>
            <add-app :visible.sync="visibleDialog" @change="onChange"></add-app>
        </template>
    </layout-box>
</template>

<script>
import Draggable from 'vuedraggable'
import { compare } from '@/assets/utils/util'
export default {
    name: 'MyApp',
    components: {
        Draggable,
        LayoutBox: () => import('./LayoutBox'),
        AddApp: () => import('./AddApp')
    },
    data () {
        return {
            visibleDialog: false,
            globalList: [], // 全局的list
            normalList: [],
            options: {
                disabled: true,
                // draggable: '.draggable-item',
                filter: '.undraggable',
                animation: 500
            },
            drag: false,
            componentData: {
                props: {
                    type: 'transition',
                    name: 'flip-list'
                }
            },
            isEdit: false
        }
    },
    watch: {
        isEdit (newVal) {
            this.options.disabled = !newVal
        }
    },
    methods: {
        getPlatFormCustomModule () {
            this.$api.commonApi.getPlatFormCustomModule().then(res => {
                this.$handleResponse(res).then(data => {
                    const globalList = []
                    const normalList = []
                    data.forEach(item => {
                        item.CompanyId === '0' && item.CreateUserId === '0'
                            ? globalList.push(item) : normalList.push(item)
                    })
                    this.globalList = globalList
                    this.normalList = normalList
                })
            })
        },
        handleEdit () {
            this.isEdit = true
        },
        handleCancel () {
            this.isEdit = false
            // this.getPlatFormCustomModule()
            this.normalList = this.normalList.sort(compare('SortCode'))
        },
        // 跳转
        handleJump ({ ModuleType, LinkUrl, LinkType, ModuleName }) {
            console.log(ModuleType, LinkUrl, LinkType, ModuleName)
            // ModuleType 1 系统应用 2 外部链接
            if (ModuleType === 1) {
                const modules = {
                    name: ModuleName,
                    url: LinkUrl
                }
                localStorage.setItem('modules', JSON.stringify(modules))
            } else {
                if (LinkType === 1) {
                    // 新窗口打开
                    // 防止打开窗户被拦截
                    var winHandler = window.open('', '_blank')
                    winHandler.location.href = LinkUrl
                } else {
                    // 当前页面跳转
                    const modules = {
                        name: ModuleName,
                        url: LinkUrl
                    }
                    localStorage.setItem('modules', JSON.stringify(modules))
                }
            }
        },
        // 删除
        handleDel ({ ID, ModuleName }, index) {
            // deletePlatFormCustomModule
            const h = this.$createElement
            this.$msgbox({
                title: '提示',
                message: h('p', null, [
                    h('span', null, '你确定删除'),
                    h('span', { style: 'color: #409EFF' }, ModuleName),
                    h('span', null, '的快捷入口吗？')
                ]),
                showCancelButton: true,
                cancelButtonText: '我再想想',
                confirmButtonText: '确定',
                beforeClose: (action, instance, done) => {
                    if (action === 'confirm') {
                        this.$api.commonApi.deletePlatFormCustomModule({
                            id: ID
                        }, 'Delete').then(res => {
                            this.$handleResponse(res).then(() => {
                                this.normalList.splice(index, 1)
                                done()
                            })
                        })
                    } else {
                        done()
                    }
                }
            })
        },
        // 保存
        handleSave () {
            const { normalList } = this
            const params = normalList.map(({ ID }, index) => ({
                ID: ID,
                SortCode: index
            }))
            this.$api.commonApi.saveMyUsualModule(params).then(res => {
                this.$handleResponse(res).then(() => {
                    this.isEdit = false
                    this.getPlatFormCustomModule()
                })
            })
        },
        // 添加弹窗
        onChange () {
            this.getPlatFormCustomModule()
        }

    },
    created () {
        this.getPlatFormCustomModule()
    }
}
</script>

<style lang="stylus" scoped>
.flip-list-move
    transition transform 0.5s
.no-move
    transition transform 0s
.my-app-list
    height 100%
    padding 10px 15px
    overflow-y auto
    .app-item
        float left
        position relative
        height 100px
        min-width 150px
        display flex
        align-items center
        justify-content center
        color #fff
        font-size 16px
        margin 0 15px 15px 0
        cursor pointer
        colors = #5bb0e0 #82a0e5 #a082e3 #99d644 #40cf7d #f2c140 #fc9e6c
        for item, index in colors
            &:nth-child(7n+{index + 1})
                background-color item
        &.add-app-item
            background-color #fff
            border 1px solid #DCDFE6
            font-size 32px
            color #333
        .delete-btn
            position absolute
            top -8px
            right -8px
            width 16px
            height 16px
            background #F56C6C
            color #fff
            line-height 16px
            text-align center
            border-radius 50%
            font-size 12px
</style>
