define(['jquery', 'vue'], function ($, Vue) {
    const tableDataCss = '/static/plugs/lay-module/tableData/tableData.css';
    const tableDataHtml = '/static/plugs/lay-module/tableData/tableData.html';

    var tableData = function () {
        var cssElement = document.createElement('link');

        cssElement.setAttribute('rel', 'stylesheet');

        cssElement.setAttribute('href', tableDataCss);

        document.body.appendChild(cssElement);
    };
    var tableDataTemplate = '';

    $.ajax({
        type: "get",
        url: tableDataHtml,
        cache: true,
        async: false,
        success: function (template) {
            tableDataTemplate = template;
        }

    });

    tableData.prototype.render = function (elem, data) {
        var app;
        var clienWidth, clientHeight;
        var width = document.body.clientWidth,
            height = document.body.clientHeight;
        if (width >= 800 && height >= 600) {
            clienWidth = '800px';
            clientHeight = '600px';
        } else {
            clienWidth = '100%';
            clientHeight = '100%';
        }

        var defaultOption = {
            width: clienWidth,
            height: clientHeight,
            placeholder: '请选择',
            selectConfirmCallback: 'onTableDataConfirm',
        }

        var options = $.extend(defaultOption, data);
        console.log(options);

        var valueField = options.valueField;

        if (options.index.indexOf('?') > -1) {
            options.index += '&'
        } else {
            options.index += '?'
        }

        options.index += 'select_mode=' + options.selectType

        app = new Vue({
            el: elem,
            data() {
                return {
                    setting: options,
                    listSelected: [],
                    value: ''
                }
            },
            watch: {
                listSelected(value) {
                    console.log(value);

                    var valueList = value.map(itemValue => itemValue[valueField])



                    this.value = valueList.join(',')
                }
            },
            created() {
                this.value = options.selectValue;

                var valueLength = this.value.split(',').length;
                loading.show();
                $.get(options.index,{
                    page:1,
                    limit:valueLength,
                    filter:JSON.stringify({id:this.value}),
                    op: JSON.stringify({id:'in'})
                },(result)=>{
                    loading.hide()
                    this.listSelected = result.data;
                })

            },
            template: tableDataTemplate,

            methods: {
                openSelectPage() {

                    var index = layer.open({
                        title: '选择数据',
                        type: 2,
                        area: [options.width, options.height],
                        content: options.index,
                        maxmin: true,
                        moveOut: true,
                        shadeClose: true,
                        success: (layero, index) => {
                            window[options.selectConfirmCallback] = (data) => {
                                console.log(data);

                                data.forEach(dataItem => {

                                    var itemFind = this.listSelected.find(itemSelect => itemSelect[valueField] == dataItem[valueField])

                                    if (itemFind == undefined) {
                                        this.listSelected.push(dataItem)
                                    }


                                });
                                this.$forceUpdate();
                                layer.close(index);
                            }

                        },
                        end: function () {
                            index = null;
                            window[options.selectConfirmCallback] = undefined;
                        }
                    });

                },
                removeItem(item, index) {
                    this.listSelected.splice(index, 1);
                }
            }
        })

        return app;
    }

    return new tableData();
})