<template>
    <popup height="100%" v-model="isShow">
        <div class="popup" ref="popup"> <!--  v-dom-portal -->
            <div class="module">
                <!-- 我的常用 -->
                <div class="item">
                    <div class="head vux-1px-b">
                        <span class="left"><b>{{myUse.m_name}}</b><i> (按住拖动可调整顺序)</i></span>
                        <span class="right">
                            <i class="cancel" @click="isShow = false">取消</i>
                            <i class="done" @click="submit">完成</i>
                        </span>
                    </div>
                    <draggable tag="ul" v-model="myUse.childers" filter=".custom" animation="200" @start="startDrag" @end="endDrag">
                        <li v-for="(item, index) in myUse.childers" :key="item.sort_code" @click="edit(item, index)">
                            <i class="icon icon1" :class="item.module_source !== 2 ? item.module_icon : 'icon-wujiaoxingshi'">
                                <i class="iconfont minus" @click.stop="addOrMinus(0, 0, index, item)">&#xe816;</i>
                            </i>
                            <div class="text">{{item.module_name}}</div>
                        </li>
                        <transition name="fade">
                            <li class="custom" @click="add" v-show="!isDrag">
                                <i class="icon plus"></i>
                                <div class="text">自定义</div>
                            </li>
                        </transition>
                    </draggable>
                </div>

                <!-- 系统模块 -->
                <div class="item">
                    <div class="head vux-1px-t vux-1px-b">
                        <span class="left"><b>系统模块</b><i> (可以选择你需要的模块添加到常用)</i></span>
                    </div>
                    <div v-for="(moduleItem, moduleIndex) in moduleList" :key="moduleIndex">
                        <div class="item-title">{{moduleItem.m_name}}</div>
                        <ul>
                            <li v-for="(item, index) in moduleItem.childers" :key="index">
                                <i class="icon icon1" :class="item.module_icon">
                                    <i
                                        class="iconfont"
                                        :class="item.isSelect ? 'minus' : 'add'"
                                        @click="addOrMinus(1, moduleIndex, index, item)"
                                    >{{item.isSelect ? '&#xe816;' : '&#xe815;'}}</i>
                                </i>
                                <div class="text">{{item.module_name}}</div>
                            </li>
                            <div class="empty" v-if="!moduleItem.childers.length">无</div>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <confirm v-model="isShowAdd" :title="(editIndex === -1 ? '添加' : '编辑') + '自定义模块'" :close-on-confirm="false" @on-confirm="save">
            <group gutter="0" label-width="2.5em" label-margin-right="1em" label-align="right">
                <x-input title="名称" placeholder="请输入模块名称" v-model="name"></x-input>
                <x-input title="url" placeholder="请输入 http(s):// 地址" v-model="url"></x-input>
            </group>
        </confirm>
    </popup>
</template>

<script>
import BScroll from 'better-scroll'
import draggable from 'vuedraggable'
import { Popup, Confirm, Group, XInput } from 'vux'
import { urlTest } from '@/assets/utils/regexp.js'
export default {
    name: 'ModulesManage',
    components: { draggable, Popup, Confirm, Group, XInput },
    data () {
        return {
            isShow: false, // 是否显示模块管理
            scroll: {}, // 滚动对象
            myUse: {}, // 我的常用
            moduleList: [], // 系统模块
            isDrag: false, // 是否拖拽中
            isShowAdd: false, // 是否显示添加自定义模块
            editIndex: -1, // 编辑自定义模块的索引
            name: '', // 自定义的模块名称
            url: '' // 自定义的 url 地址
        }
    },
    mounted () {
        this.$nextTick(() => {
            // eslint-disable-next-line no-new
            this.scroll = new BScroll(this.$refs.popup)
        })
    },
    methods: {
        // 复制避免改变原列表
        init (moduleList) {
            const list = JSON.parse(JSON.stringify(moduleList))
            this.myUse = list[0]
            this.moduleList = list.slice(1)
            this.isShow = true
        },
        // 开始拖拽
        startDrag () {
            this.isDrag = true
            this.scroll.disable()
            this.$emit('startDrag')
        },
        // 结束拖拽
        endDrag () {
            this.isDrag = false
            this.scroll.enable()
            this.$emit('endDrag')
        },
        // 添加或移除（type: 0 我的常用, 1 系统模块）
        addOrMinus (type, moduleIndex, index, item) {
            if (!type) {
                this.myUse.childers.splice(index, 1)
                if (item.module_source !== 2) this.moduleList[item.index[0]].childers[item.index[1]].isSelect = false
            } else {
                if (item.isSelect) {
                    const i = this.myUse.childers.findIndex(n => n.id === item.id)
                    this.myUse.childers.splice(i, 1)
                    this.moduleList[moduleIndex].childers[index].isSelect = false
                } else {
                    item.sort_code = this.myUse.childers.length
                    this.myUse.childers.push(item)
                    this.moduleList[moduleIndex].childers[index].isSelect = true
                }
            }
        },
        // 添加自定义
        add () {
            this.editIndex = -1
            this.name = this.url = ''
            this.isShowAdd = true
        },
        // 编辑自定义
        edit (item, index) {
            if (item.module_source !== 2) {
                this.$vux.toast.show({ type: 'warn', text: '只能编辑自定义模块' })
            } else {
                this.name = item.module_name
                this.url = item.module_url
                this.editIndex = index
                this.isShowAdd = true
            }
        },
        // 保存自定义
        save () {
            if (!this.name) {
                this.$vux.toast.show({ type: 'warn', text: '请输入模块名称' })
            } else if (!this.url) {
                this.$vux.toast.show({ type: 'warn', text: '请输入 url 地址' })
            } else if (!urlTest(this.url)) {
                this.$vux.toast.show({ type: 'warn', text: '请输入正确的 url 地址' })
            } else {
                if (URL) {
                    try {
                        // eslint-disable-next-line no-new
                        new URL(this.url)
                    } catch (e) {
                        return this.$vux.toast.show({ type: 'warn', text: '请输入有效的 url 地址' })
                    }
                }
                // -1 新增, > 0 编辑
                const data = {
                    module_name: this.name,
                    module_url: this.url,
                    module_source: 2,
                    isSelect: true
                }
                this.editIndex === -1
                    ? this.myUse.childers.push(data)
                    : this.myUse.childers[this.editIndex] = data
                this.isShowAdd = false
            }
        },
        // 提交
        submit () {
            this.$vux.confirm.show({
                title: '确定保存吗？',
                onConfirm: () => {
                    const data = this.myUse.childers.map((item, index) => {
                        return {
                            module_id: item.id,
                            sort_code: index,
                            custom_module_name: item.module_name,
                            custom_module_url: item.module_url,
                            module_source: item.module_source || 1
                        }
                    })
                    this.$api.homeApi.SaveMyUsualModule(data).then(res => {
                        if (res.data.Status) {
                            this.isShow = false
                            this.$vux.toast.show({ text: '已保存' })
                            this.$emit('submit')
                        }
                    })
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.vux-popup-dialog {
    overflow: hidden;
    /deep/ input {
        height: auto;
        margin-bottom: 0;
        padding: 0;
        border: none;
        color: #333;
        font-size: 14px;
    }
}
.popup {
    height: 100%;
    background-color: #fff;
}
.item {
    margin-top: 0 !important;
    .head {
        white-space: nowrap;
        .left i {
            color: #999;
            font-size: 12px;
            font-style: normal;
        }
        .right {
            padding: 0 5px !important;
            i {
                display: inline-block;
                font-style: normal;
                padding: 0 10px;
            }
            .cancel {
                color: #999;
            }
            .done {
                color: #409eff;
            }
        }
    }
    .item-title {
        padding: 10px 15px 0;
    }
    .icon {
        position: relative;
        i {
            position: absolute;
            top: -12px;
            right: -10px;
            padding: 5px;
            font-size: 18px;
            line-height: normal;
            background-image: radial-gradient(#fff 35%, transparent 35%);
            &.add {
                color: #409eff;
            }
            &.minus {
                color: #f00;
            }
        }
        &.plus {
            &::before, &::after {
                content: '';
                position: absolute;
                border-radius: 2px;
                background-color: #aaa;
                width: 30px;
                height: 8px;
                top: 26px;
                left: 15px;
            }
            &::after {
                transform: rotate(90deg);
            }
        }
    }
}
.fade-enter-active {
    transition: transform 0s, opacity 0.2s;
}
.fade-leave-active {
    transition-duration: 0s;
}
.fade-enter, .fade-leave-to {
    opacity: 0;
}
</style>
