<template>
    <ul class="app-list">
        <li class="app-item" v-for="item of moudleTree" :key="item.item_id">
            <div class="app-item-title">{{ item.item_name }}</div>
            <ul class="inner-app-list">
                <li
                    class="inner-app-item"
                    v-for="innerItem in item.children"
                    :key="innerItem.item_id"
                >
                    <div class="inner-app-item-title">{{ innerItem.item_name}}</div>
                    <ul class="innermost-app-list">
                        <li
                            class="innermost-app-item"
                            v-for="innermostItem in innerItem.children"
                            :key="innermostItem.item_id"
                            :class="{active: selectedModulesId.includes(innermostItem.item_id)}"
                            @click="handleClick(innermostItem)"
                        >{{ innermostItem.item_name }}</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</template>

<script>
export default {
    name: 'AppList',
    props: ['moudleTree', 'selectedModules'],
    computed: {
        selectedModulesId () {
            return this.selectedModules.map(item => item.ModuleId)
        }
    },
    methods: {
        handleClick (item) {
            const { selectedModulesId } = this
            if (selectedModulesId.includes(item.item_id)) {
                // 删除
                const h = this.$createElement
                this.$msgbox({
                    title: '提示',
                    message: h('p', null, [
                        h('span', null, '你确定删除'),
                        h('span', { style: 'color: #409EFF' }, item.item_name),
                        h('span', null, '的快捷入口吗？')
                    ]),
                    showCancelButton: true,
                    cancelButtonText: '我再想想',
                    confirmButtonText: '确定',
                    beforeClose: (action, instance, done) => {
                        if (action === 'confirm') {
                            this.$api.commonApi.deletePlatFormCustomModule({
                                moduleId: item.item_id
                            }, 'DeleteByModuleId').then(res => {
                                this.$handleResponse(res).then(() => {
                                    this.$emit('change')
                                    done()
                                })
                            })
                        } else {
                            done()
                        }
                    }
                })
            } else {
                // 添加
                this.$api.commonApi.createPlatFormCustomModule({
                    ModuleType: 1,
                    ModuleId: item.item_id,
                    ModuleName: item.item_name,
                    LinkUrl: item.url,
                    LinkType: 2 // 系统内打开
                }).then(res => {
                    this.$handleResponse(res).then(() => {
                        this.$emit('change')
                    })
                })
            }
        }
    }
}
</script>

<style lang="stylus" scoped>
.app-item
    &-title
        padding 10px 0 10px 15px
        font-size 18px
        font-weight 600
        position relative
        &:before
            content ''
            position absolute
            left 0
            top 50%
            transform translateY(-50%)
            width 4px
            height 24px
            background #00a4ff
.inner-app-list
    margin-left 15px
.inner-app-item
    display flex
    &-title
        flex 0 0 150px
        line-height 40px
        font-size 16px
        text-align right
        margin-right 15px
.innermost-app-list
    display flex
    flex-wrap wrap
    .innermost-app-item
        position relative
        width 150px
        padding 10px 15px
        margin 0 10px 10px 0
        text-align center
        // line-height 38px
        border-radius 1px
        font-size 14px
        border 1px solid #DCDFE6
        cursor pointer
        &.active
            border none
            color #00a4ff
            background-image url('data:image/png;base64,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')
            background-repeat no-repeat
            background-size 100% 100%
</style>
