define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {
    var Controller = {
        index: function () {
            new Vue({
                el: '#diy',
                data: {
                    // 页面数据
                    pageData: pageData,
                    // 默认数据
                    defaultData: defaultData,
                    // 已选页面样式
                    selectPageStyle: {},
                    // 已选组件索引
                    selectedIndex: -1,
                    // 当前组件数据
                    currentData: {},
                    // 当前日期
                    currentDate: "",
                    // 选择弹窗是否显示
                    selectVisible: false,
                    // 选择弹窗数据
                    selectData: null,
                    // 选择弹窗选中类型
                    selectType: 'Custom',
                    // 选择弹窗选中回调事件
                    selectCallback: null,
                    // 选择弹窗表单数据
                    selectForm: {
                        title: "",
                        content: "",
                        appid: '',
                        path: '',
                        protocol: '',
                        url: '',
                        phone: '',
                    },
                    // 标题栏样式
                    titleBarStyle: {
                        background: "rgba(255, 255, 255, 0)",
                        color: "",
                    },
                },
                created() {
                    this.getCurrentDate()
                    this.getPageStyle()
                    $("#diy").show()
                    $("#loading").hide()
                },
                methods: {
                    // 获取已选页面样式
                    getPageStyle() {
                        var index = this.pageData.pageStyle.findIndex(item => {
                            if (item.layout == this.pageData.pageLayout) return true
                        })
                        if (index === -1) index = 0
                        this.selectPageStyle = JSON.parse(JSON.stringify(this.pageData.pageStyle[index]))
                    },
                    // 获取当前时间
                    getCurrentDate() {
                        const date = new Date();
                        const year = date.getFullYear();
                        const month = String(date.getMonth() + 1).padStart(2, '0');
                        const day = String(date.getDate()).padStart(2, '0');
                        this.currentDate = `${year}/${month}/${day}`;
                    },
                    // 编辑组件
                    handleEdit(index) {
                        this.selectedIndex = index;
                        this.currentData = {}
                        this.$nextTick(() => {
                            if (this.selectedIndex == -1) {
                                this.currentData = this.selectPageStyle;
                            } else {
                                this.currentData = this.pageData.items[this.selectedIndex];
                                if (!this.currentData.activeName) this.currentData.activeName = "first"
                            }
                        })
                    },
                    // 拖动组件
                    handleDrag(event) {
                        this.handleEdit(event.newIndex);
                    },
                    // 重置颜色
                    handleResetColor(source, key, color) {
                        source[key] = color;
                    },
                    // 选择图片
                    handleSelectImage(source, index, type = "image/") {
                        parent.Fast.api.open(`general/attachment/select?element_id=&multiple=true&mimetype=${type}*`, __('Choose'), {
                            callback: (data) => {
                                if (data.multiple) {
                                    var url = Fast.api.cdnurl(data.url);
                                    source[index] = url;
                                }
                            }
                        });
                    },
                    // 删除图片
                    handleDeleteImage(source, index) {
                        source[index] = "";
                    },
                    // 选择组件类型
                    handleSelectType(source) {
                        this.selectCallback = (type, row) => {
                            source['link'] = null;
                            switch (type) {
                                case 'Custom':
                                    var path = row.path
                                    if (row.parameter) {
                                        if (path.indexOf("?") > -1) path += "&" + row.parameter
                                        else path += "?" + row.parameter
                                    }
                                    source['link'] = { type: type, title: row.title, path: path, };
                                    break;
                                case 'Editor':
                                    var content = $("#Editor").val()
                                    source['link'] = { type: type, title: row.name, pageTitle: this.selectForm.title, content: content };
                                    break;
                                case 'WXMp':
                                    source['link'] = { type: type, title: row.name, appid: this.selectForm.appid, path: this.selectForm.path };
                                    break;
                                case 'Outside':
                                    source['link'] = { type: type, title: row.name, url: this.selectForm.protocol + this.selectForm.url };
                                    break;
                                case 'Phone':
                                    source['link'] = { type: type, title: row.name, phone: this.selectForm.phone };
                                    break;
                                case 'Service':
                                    source['link'] = { type: type, title: row.name };
                                    break;
                            }
                            this.selectVisible = false;
                        }
                        $.post('wdsxh/person_center_diy_page/select_url_pro', {}, (res) => {
                            this.selectData = res.rows;
                            this.selectForm = {
                                title: "",
                                content: "",
                                appid: '',
                                path: '',
                                protocol: '',
                                url: '',
                                phone: '',
                            }
                            if (source['link']) {
                                this.selectType = source['link'].type

                                if (source['link'].type === 'Custom') {
                                    let index = this.selectData.Custom.list.findIndex((item) => {
                                        if (source['link'].path.indexOf(item.path) > -1) {
                                            return true
                                        }
                                    })
                                    if (index > -1) {
                                        let selectLink = this.selectData.Custom.list[index]
                                        this.$delete(this.selectData.Custom.list, index)
                                        let selectPath = source['link'].path.split(selectLink.path)[1]
                                        if (selectPath[0] == "?" || selectPath[0] == "&") {
                                            this.$set(selectLink, "parameter", selectPath.slice(1))
                                        }
                                        this.selectData.Custom.list.unshift(selectLink)
                                        this.selectData.Custom.list = [...this.selectData.Custom.list]
                                    }
                                } else if (source['link'].type === 'WXMp') {
                                    this.selectForm.appid = source['link'].appid;
                                    this.selectForm.path = source['link'].path;
                                } else if (source['link'].type === 'Outside') {
                                    if (source['link'].url && source['link'].url.substring(0, 5) == "http:") {
                                        this.selectForm.protocol = 'http://';
                                        this.selectForm.url = source['link'].url.split('http://')[1];
                                    } else if (source['link'].url && source['link'].url.substring(0, 5) == "https") {
                                        this.selectForm.protocol = 'https://';
                                        this.selectForm.url = source['link'].url.split('https://')[1];
                                    } else {
                                        this.selectForm.protocol = '';
                                        this.selectForm.url = source['link'].url;
                                    }
                                } else if (source['link'].type === 'Phone') {
                                    this.selectForm.phone = source['link'].phone
                                }
                            } else {
                                this.selectType = "Custom"
                                $("#Editor").val("")
                            }
                            this.selectVisible = true;
                            this.$nextTick(() => {
                                if (source['link'] && source['link'].type === 'Editor') {
                                    $("#Editor").val(source['link'].content)
                                    this.selectForm.title = source['link'].pageTitle
                                    this.selectForm.content = source['link'].content
                                }
                                Controller.api.bindevent();
                            })
                        });
                    },
                    // 改变选择框类型
                    tabChange(e) {
                        if (e.name == "Editor") {
                            this.$nextTick(() => {
                                Form.api.bindevent($("form[role=form]"));
                                $('#Editor').on('change', () => {
                                    this.selectForm.content = $('#Editor').val()
                                });
                            })
                        }
                    },
                    // 添加组件内容项目
                    handleAddItem() {
                        this.currentData.data.push({
                            imgUrl: '/assets/addons/wdsxh/img/menu.png',
                            link: null,
                            text: '导航标题',
                        });
                    },
                    // 删除组件内容项目
                    handleDeleteItem(index) {
                        if (this.pageData.items[this.selectedIndex].data.length > 1) {
                            this.pageData.items[this.selectedIndex].data.splice(index, 1);
                        } else {
                            this.$message({
                                showClose: true,
                                message: '至少保留一个项目',
                                type: 'error'
                            });
                        }
                    },
                    // 监听页面滚动
                    handleScroll(e) {
                        const scrollTop = e.target.scrollTop
                        if (scrollTop > 100) {
                            this.titleBarStyle.background = "#fff"
                            this.titleBarStyle.color = "black"
                        } else {
                            let opacity = parseFloat(scrollTop / 100).toFixed(4)
                            this.titleBarStyle.background = "rgba(255, 255, 255, " + opacity + ")"
                            if (scrollTop > 30) {
                                this.titleBarStyle.color = "black"
                            } else {
                                this.titleBarStyle.color = ""
                            }
                        }
                    },
                    // 重置数据
                    handleReset() {
                        this.$confirm('此操作将重置为系统默认样式，将导致已设置样式被覆盖，是否继续?', '警告', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            const data = JSON.parse(JSON.stringify(this.defaultData))
                            this.pageData.pageTitle = data.pageTitle
                            this.pageData.pageStyle = data.pageStyle
                            this.pageData.items = data.items
                            this.getPageStyle()
                            this.handleEdit(-1)
                        }).catch(() => { })
                    },
                    // 提交数据
                    handleSubmit() {
                        var submitData = JSON.parse(JSON.stringify(this.pageData))
                        var index = submitData.pageStyle.findIndex(item => {
                            if (item.layout == submitData.pageLayout) return true
                        })
                        if (index === -1) index = 0
                        submitData.pageStyle[index] = JSON.parse(JSON.stringify(this.selectPageStyle))
                        for (var i in submitData.items) {
                            submitData.items[i].activeName = undefined
                        }
                        $.post('', { data: JSON.stringify(submitData) }, (res) => {
                            if (res.code == 1) {
                                Toastr.success(res.msg);
                                this.pageData = submitData
                                this.getCurrentDate()
                                this.getPageStyle()
                                return
                            }
                            return Toastr.error(res.msg);
                        });
                    },
                }
            });
            Controller.api.bindevent();
        },
        api: {
            bindevent: function () {
                Form.api.bindevent($("form[role=form]"));
            }
        }
    };
    return Controller;
});