/***********************************************/
//vue 常用组件封装
//CREATE:zh 2018-6-1
/***********************************************/

//mixin 键盘扫描公共事件
var documentKeyMixin = {
    data: function () {
        return {
            focus: "",          //当前扫码码值
            workPlatform: "",   //当前分拣台
        }
    },
    methods: {
        //键盘回车工厂事件，可在外部vue的methods中重写
        keyDownFactory: function () {
            var $this = this;
            console.log($this.focus);
        },
        documentKeyDown: function (e) {
            var $this = this;
            var keyArray = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", ".", "+", "-", "*", "/", "_"];
            var _focus = $("#txtFocus");
            if (_focus.length > 0) _focus.focus();
            var _key = e.key.toUpperCase();
            if ($.inArray(_key, keyArray) > -1) {
                $this.focus += _key;
            }
            if (e.keyCode == 8) {
                if (window.event.srcElement.tagName.toUpperCase() != "INPUT"
                    && window.event.srcElement.tagName.toUpperCase() != "TEXTAREA"
                    && window.event.srcElement.tagName.toUpperCase() != "TEXT") {
                    e.keyCode = 0;
                    e.returnValue = false;
                    e.preventDefault();
                }
                else {
                    if ($this.focus) {
                        $this.focus = $this.focus.substr(0, $this.focus.length - 1);
                        e.preventDefault();
                    }
                }
            }
            if (e.keyCode == 13 && $this.focus) {
                $this.keyDownFactory();
            }
        },
        alert: function (msg) {
            var $this = this;
            document.onkeydown = function (e) {
                return false;
            }
            layer.alert(msg, {
                icon: 0,
                yes: function (index, layero) {
                    document.onkeydown = $this.documentKeyDown;
                    layer.close(index);
                },
                cancel: function (index, layero) {
                    document.onkeydown = $this.documentKeyDown;
                }
            });
        },
        notifyAlert: function (type, msg) {
            var $this = this;
            if (type == "success" || type == "warning") {
                var title = type == "success" ? "成功" : "警告";
                $this.$notify({
                    title: title,
                    message: msg,
                    type: type
                });
            } else {
                $this.$notify.error({
                    title: '错误',
                    message: msg
                });
            }
        },
        setCookie: function (name, value) {//设置cookie，时间30天
            var days = 30;
            var expires = new Date();
            expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
            document.cookie = name + "=" + escape(value) + ";expires=" + expires.toGMTString();
        }
    },
    mounted: function () {
        document.onkeydown = this.documentKeyDown;
        if ($('#txtFocus')) {
            $('#txtFocus').focus();
        }
        //初始化条码前缀
        GetNumRule();
    }
};

//带标题text
Vue.component('input-text', {
    props: ['title', 'id', 'value', 'width', 'readonly', 'expandstyle', 'disabled'],
    data: function () {
        return {
            w: this.width || 160,
            s: this.expandstyle || '',
            defaultTitle: this.title ? this.title + "：" : ""
        };
    },
    template: '<div class="conLi" :style="s"><label>{{defaultTitle}}</label><input :id="id" type="text" :readonly="readonly" :disabled="disabled" class="inputText" :style="\'margin-right:5px; width:\'+w+\'px;\'" :value="value" @input="inputChange"/></div>',
    methods: {
        inputChange: function ($event) {
            this.$emit('input', $event.target.value);
        }
    }
});

Vue.component('input-number', {
    props: ['title', 'id', 'value', 'width', 'readonly', 'expandstyle'],
    data: function () {
        return {
            w: this.width || 160,
            s: this.expandstyle || ''
        };
    },
    template: '<div class="conLi" :style="s"><label>{{title}}：</label><input :id="id" onpaste="return false;" type="text" :readonly="readonly" class="inputText"  @afterpaste="keyEvent" @keyup="keyEvent" :style="\'margin-right:5px; width:\'+w+\'px;\'"  :value="value" @input="inputChange"/></div>',
    methods: {
        inputChange: function ($event) {
            this.$emit('input', $event.target.value);
        },
        keyEvent: function ($event) {
            if ($event.target.value.length == 1) {
                var reg = /[^1-9]/g;
                //return reg.test($event.target.value);
                $event.target.value = $event.target.value.replace(/[^1-9]/g, '');
            } else {
                var reg = /\D/g;
                //return reg.test($event.target.value);
                $event.target.value = $event.target.value.replace(/\D/g, '');
            }
        }
    }
});

//带标题下拉框dropbox 
Vue.component('input-drowdownbox', {
    props: ['title', 'id', 'width', 'name', 'datalist', 'val', 'defaultvalue'],
    data: function () {
        return {
            w: this.width || 140,
            dataList: this.datalist,
            defaultValue: this.defaultvalue || '全部',
            defaultVal: this.val || '全部',
            defaultTitle: this.title ? this.title + "：" : ""
        }
    },
    template: '<div class="conLi">'
            + '<label>{{defaultTitle}}</label>'
            + '<div class="drowdownBox" :name="name">'
            + '<span class="drowdownInput" name="magic">'
            + '<input :id="\'txt\'+id" type="text" :value="defaultVal" class="inputText" :style="\'width:\'+w+\'px;\'" readonly="readonly" />'
            + '<a :id="\'a\'+id" href="javascript:void(0)" class="downIcon"></a>'
            + '</span>'
            + '<div :id="\'ddl\'+id" class="drowdownList" name="magic" style="display:none; max-height:200px;overflow-y:scroll">'
            + '<div type="dictionbox" @click="itemclick(defaultValue)">{{defaultValue}}</div>'
            + '<div type="dictionbox" v-for="d in dataList" @click="itemclick(d)">{{d}}</div>'
            + '</div>'
            + '</div>'
            + '</div>',
    methods: {
        itemclick: function (val) {
            this.$emit('getvalue', val);
        }
    },
    watch: {
        datalist: function (val) {
            this.dataList = val;
        },
        val: function (newValue) {
            this.defaultVal = newValue;
        }
    }
});

//配置属性列表
Vue.component('input-config', {
    props: ['configlist'],
    template: '<div class="conLi" style="float:right;">'
             + '<div class="drowdownInput" style="width: 90px; background: #eee; cursor: pointer; float: right">'
             + '<span id="sConfigSet" style=" cursor:pointer; padding:0 12px; height:26px; line-height:26px;display:inline-block;">配置</span>'
             + '<a id="aConfigSet" href="javascript:void(0)" class="downIcon" style="border-left:1px solid #ddd;"></a>'
             + '</div>'
             + '<div id="ddlConfigSet" class="drowdownList" style="display:none; right:auto;width:200px;background:#fff;">'
             + '<div v-for="c in configlist" style="border-bottom:1px dashed #ddd;"><input type="checkbox" :checked="c.value" @change="itemchangechecked(c)"/>{{c.text}}</div>'
             + '</div></div>',
    methods: {
        itemchangechecked: function (c) {
            c.value = !c.value;
            this.$emit('changechecked', c);
        }
    }
});

//单列div button
Vue.component('div-button', {
    props: ['title', 'classname'],
    data: function () {
        return {
            class_name: this.classname || 'button'
        }
    },
    template: '<div class="conLi">'
            + '<a href="javascript:void(0)" :class="class_name" @click="childclick">{{title}}</a>'
            + '</div>',
    methods: {
        childclick: function () {
            this.$emit('btnclick');
        }
    }
});


Vue.component('a-button', {
    props: ['title', 'classname'],
    data: function () {
        return {
            class_name: this.classname || 'button'
        }
    },
    template: '<span>'
            + '<a href="javascript:void(0)" :class="class_name" @click="childclick">{{title}}</a>'
            + '</span>',
    methods: {
        childclick: function () {
            this.$emit('btnclick');
        }
    }
});

Vue.component('datagrid', {
    props: ['data', 'fields'],
    data: function () {
        return {
            options: []
        }
    },
    template: '<table id="dg" class="easyui-datagrid" data-options="fitColumns:true,fit:true,pagination:false">'
             + '<thead>'
             + '<tr>'
             + '<th v-for="f in options" v-bind:data-options="f.option">{{f.field}}</th>'
             + '</tr>'
             + '</thead>'
             + '<tbody>'
             + '<tr v-for="d in data"><td>{{d.A}}</td><td>{{d.B}}</td><td>{{d.C}}</td></tr>'
             + '</tbody>'
             + '</table>',
    mounted: function () {
        this.options = [];
        for (var i = 0; i < this.fields.length; i++) {
            this.options.push({ field: this.fields[i], option: "field:'" + this.fields[i] + "',width:100,align:'center'" });
        }
    },
    watch: {
        data: function (val) {
            $("#dg").datagrid('loadData', val);
        }
    }
});

//datagrid 封装 to do...
Vue.component('easyui-datagrid', {
    props: ['id', 'options', 'jsondata'],
    data: function () {
        return {
            propJsonData: [],
            jsonData: [],
            fields: [],
            dataOptions: []
        }
    },
    template: '<table class="easyui-datagrid" :id="id" data-options="fitColumns:true,fit:true,pagination:false">'
             + '<thead>'
             + '<tr>'
             + '<th data-options="field:\'ck\',checkbox:true"></th>'
             + '<th v-for="f in dataOptions"  :data-options="f.opt">{{f.name}}</th>'
             + '</tr>'
             + '</thead>'
             + '<tbody>'
             + '<tr v-for="item in jsonData"><td></td><td v-for="f in item">{{f}}</td></tr>'
             + '</tbody>'
             + '</table>',
    mounted: function () {
        var $this = this;
        //将field 跟数据列对应
        for (var f in $this.options.fields) {
            var isField = 0;
            var dataOpt = [];
            var dataOptObj = {};
            for (_f in $this.options.fields[f]) {
                var _v = $this.options.fields[f][_f];
                if (isField > 0) {
                    switch (_f) {
                        case "width":
                            dataOpt.push("width:" + _v);
                            break;
                        case "formatter":
                            dataOpt.push("formatter:" + _v);
                            break;
                    }
                } else {
                    dataOpt.push("field:'" + _f + "'");
                    dataOpt.push("align:'center'");
                    var field = {};
                    eval("field." + _f + "='" + _v + "'");
                    $this.fields.push(field);
                    dataOptObj.name = _v;
                }
                isField++;
            }
            dataOptObj.opt = dataOpt.join(',');
            $this.dataOptions.push(dataOptObj);
        }
    },
    watch: {
        jsondata: function (val) {
            console.log('val:');
            console.log(val);

            var $this = this;
            $this.jsonData = [];
            $this.propJsonData = val;
            //将field 跟数据列对应
            for (var d in $this.propJsonData) {
                var row = {};
                for (var f in $this.fields) {
                    for (var _f in $this.fields[f]) {
                        for (var _d in $this.propJsonData[d]) {
                            if (_f == _d) {
                                eval("row." + _f + "='" + $this.propJsonData[d][_d] + "'");
                            }
                        }
                    }
                }
                $this.jsonData.push(row);
            }
            console.log($this.jsonData);
        }
    }
});

//下拉框(饿了么)
Vue.component('hh-select', {
    props: ['options', 'defaultdata', 'multiple', 'title', 'width'],
    data: function () {
        return {
            defaultValue: {
                value: '',
                label: '全部'
            },
            modelTitle: this.title ? this.title + "：" : '',
            modelValue: this.defaultdata || '',
            elOptions: this.options || [],
            isMultiple: this.multiple == "true" ? true : false,
            selectWidth: this.width || 130
        }
    },
    template: '<span style="margin:0px 5px;">{{modelTitle}}<el-select  v-bind:style="\'width:\'+selectWidth+\'px\'" v-model="modelValue" placeholder="请选择" size="small" v-bind:clearable="false" @input="inputChange" v-bind:multiple="isMultiple" v-bind:collapse-tags="isMultiple">'
                + '<el-option v-for="item in optionsData"'
                + 'v-bind:key="item.value"'
                + 'v-bind:label="item.label"'
                + 'v-bind:value="item.value">'
                + '</el-option>'
                + '</el-select></span>',
    methods: {
        inputChange: function ($event) {
            this.modelValue = $event;
            this.$emit('input', $event);
        },
    },
    computed: {
        optionsData: function () {
            var $this = this;
            var tempOptions = this.elOptions;
            if (!$this.multiple)
                tempOptions.unshift(this.defaultValue);
            return tempOptions;
        }
    },
    watch: {
        options: function (val) {
            this.elOptions = val;
        }
    }
});


Vue.component('hh-select-url', {
    props: ['url', 'defaultdata', 'multiple', 'title', 'valuefield', 'textfield', 'datafield', 'ajaxtype', 'postdata', 'iseval', 'width', 'disabled'],
    data: function () {
        return {
            defaultValue: {
                value: '',
                label: '全部'
            },
            modelTitle: this.title ? this.title + "：" : '',
            modelValue: this.defaultdata || '',
            isMultiple: this.multiple == "true" ? true : false,
            ajaxType: this.ajaxtype || "GET",
            selectWidth: this.width || 130,
            isDisabled: this.disabled || false
        }
    },
    template: '<span style="margin:0px 5px;">{{modelTitle}}<el-select v-model="modelValue"  v-bind:style="\'width:\'+selectWidth+\'px\'" placeholder="请选择" size="small" @input="inputChange" v-bind:clearable="false" v-bind:multiple="isMultiple" v-bind:collapse-tags="isMultiple" v-bind:disabled="isDisabled">'
                + '<el-option v-for="item in optionsData"'
                + 'v-bind:key="item.value"'
                + 'v-bind:label="item.label"'
                + 'v-bind:value="item.value">'
                + '</el-option>'
                + '</el-select></span>',
    methods: {
        inputChange: function ($event) {
            this.modelValue = $event;
            this.$emit('input', $event);
        },
    },
    computed: {
        optionsData: function () {
            var $this = this;
            var _url = $this.url;
            var tempOptions = [];
            $.ajax({
                type: $this.ajaxType,
                url: _url,
                data: $this.postdata,
                dataType: "json",
                async: false,
                success: function (data) {
                    if (data) {
                        if ($this.iseval) {
                            data = eval("(" + data + ")");
                        }
                        var rows = data;
                        if ($this.datafield) {
                            rows = eval("rows." + $this.datafield);
                        }
                        if (!$this.multiple)
                            tempOptions.push($this.defaultValue);
                        rows.forEach(function (n) {
                            tempOptions.push({
                                value: eval("n." + $this.valuefield),
                                label: eval("n." + $this.textfield)
                            });
                        });
                    }
                }
            });
            return tempOptions;
        }
    },
    watch: {
        disabled: function (val) {
            this.isDisabled = val;
        },
        defaultdata: function (val) {
            this.modelValue = val;
        }
    }
});

Vue.component('hh-input', {
    props: ['defaultdata', 'title', 'width'],
    data: function () {
        return {
            defaultValue: {
                value: '',
                label: '全部'
            },
            modelTitle: this.title ? this.title + "：" : '',
            modelValue: this.defaultdata || '',
            inputWidth: this.width || 130
        }
    },
    methods: {
        inputChange: function ($event) {
            this.modelValue = $event;
            this.$emit('input', $event);
        },
    },
    template: '<span style="margin:0px 5px;">{{modelTitle}}<el-input placeholder="请输入内容" v-model="modelValue" v-bind:style="\'width:\'+inputWidth+\'px\'"  @input="inputChange" size="small" clearable> </el-input>'
            + '</span>'
});

Vue.component('location-state', {
    template: '<div class="colorDiv"><ul><li><div><label class="spaceState white"></label><span>空货位</span></div></li><li><div><label class="spaceState cyan"></label><span>满货位</span></div></li><li><div><label class="spaceState purple"></label><span>预入库锁定</span></div></li><li> <div><label class="spaceState orange"></label><span>预出库锁定</span></div></li></ul><slot></slot></div>'
});