const consClients = ylotc.clients;

//定价格式化(来自配置)
const inputFormatPercent = Object.freeze({ precision: 2, append: '%' });
const inputFormatPercentNegative = Object.freeze({ precision: 2, append: '%', negative: true });
const inputFormatNegative = Object.freeze({ precision: 2, negative: true });

const vue = new Vue({
    el: '#marginTemplateV2Form',
    data: {
        clientMarginTemplate: page.clientMarginTemplate,
        marginTemplates: page.marginTemplates,
        marginTemplate: page.marginTemplate,
        clientLevels: [],
        clientNames: [],
        isClientLevelDisabled: false,
        isClientNameDisabled: false,
        isAdd: page.isAdd
    },
    created: function () {
        this.clientMarginTemplate.ValueDate = new moment(this.clientMarginTemplate.ValueDate).format("YYYY-MM-DD");
    },
    methods: {
        //changeClient(yldata) {
        //    let client = yldata || { id: 0 };
        //    this.clientMarginTemplate.ClientId = client.id;
        //},
        changeMarginTemplate() {
            this.marginTemplates.forEach(x => {
                if (this.clientMarginTemplate.MarginTemplateId === x.id) {
                    this.marginTemplate = x;
                    $('#suitableType').prop('title', this.marginTemplate.TradeTypes);
                }
            });
            
        },
        saveMarginTemplateV2() {
            var thisObj = this;
            main.post("/client_margin_template/saveClientMarginTemplate", { clientMarginTemplate: thisObj.clientMarginTemplate }).done(function (resp) {
                try {
                    window.parent.reloadmargin_template();
                    (parent || window).layer.closeAll();
                } catch (e) { }
            });
        },
        showTemplateDetail(detail) {
            vueDetail.backupDetail = _.cloneDeep(detail);
            detail.ValueDate = new moment(detail.ValueDate).format("YYYY-MM-DD");
            vueDetail.detail = detail;
            vueDetail.isAdd = false;
            vueDetail.ruleType = vue.marginTemplate.RuleType;
            $("#myModal").modal("show");
        },
        SetClientLevelDropDown() {
            $.ajax({
                type: "get",
                url: "/client_margin_template/GetAllClientLevels",
                success: function (data) {
                    if (data.obj) {
                        for (var i = 0; i < data.obj.length; i++) {
                            vue.clientLevels.push(data.obj[i]);
                        }

                        if (vue.isAdd) {
                            vue.clientMarginTemplate.ClientLevel = data.obj[0].Value;
                        }


                    }
                },
                error: function (msg) {
                    alert("error:" + msg);
                }
            });
        },
        SetClientNameDropDown() {
            $.ajax({
                type: "get",
                url: "/client_margin_template/GetAllClients",
                success: function (data) {
                    if (data.obj) {
                        for (var i = 0; i < data.obj.length; i++) {

                            vue.clientNames.push(data.obj[i]);
                        }
                    }
                },
                error: function (msg) {
                    alert("error:" + msg);
                }
            });
        }
    },
    mounted() {
        if (page.isGFSM) {
            if (this.isAdd) {
                this.isClientNameDisabled = true;
            }
            else {
                if (this.clientMarginTemplate.ClientId == "0") this.isClientNameDisabled = true;
                if (this.clientMarginTemplate.ClientLevel == "") this.isClientLevelDisabled = true;
            }

            this.SetClientLevelDropDown();
            
        }
        this.SetClientNameDropDown();
        if (this.marginTemplate.TradeTypes != null && this.marginTemplate.TradeTypes != 'undefined') {
            $('#suitableType').prop('title', this.marginTemplate.TradeTypes);
        }
       
    },
    watch: {
        'clientMarginTemplate.ClientLevel': {
            handler(newVal, oldVal) {
                if (newVal == '') {
                    this.isClientLevelDisabled = true;
                    this.isClientNameDisabled = false;

                    if (this.clientMarginTemplate.ClientId == '0') {
                        if (this.clientNames.length > 0) {
                            this.clientMarginTemplate.ClientId = this.clientNames[0].Value;
                        }
                    }

                }

            },
            immediate: false
        },
        'clientMarginTemplate.ClientId': {
            handler(newVal, oldVal) {
                if (newVal == '0') {
                    this.isClientNameDisabled = true;
                    this.isClientLevelDisabled = false;
                    if (this.clientMarginTemplate.ClientLevel == '') {
                        if (this.clientLevels.length > 0) {
                            this.clientMarginTemplate.ClientLevel = this.clientLevels[0].Value;
                        }
                    }

                }

            },
            immediate: false
        }
    },
    components: {
        'vue-datepicker': FastVue.vueDatePicker(),
        'vue-number-input': FastVue.vueNumberInput()
    }
});

$(function () {
    $(".datepicker").change(function () {
        var dateVal = $(this).val();
        if (!dateVal) return;
        dateVal = dateVal.replace(/\D/g, '').padStart(4, '0');
        switch (dateVal.length) {
            case 4:
                dateVal = new Date().getFullYear() + dateVal; break;
            case 6:
                dateVal = '20' + dateVal; break;
            case 8: break;
            default:
                dateVal = dateVal.length > 8 ? dateVal.substring(0, 8) : ''; break;
        }

        if (dateVal) {
            dateVal = moment(dateVal).format('YYYY-MM-DD');
            !/^\d+/.test(dateVal) && (dateVal = '');
        }

        $(this).datepicker("setDate", dateVal);
    });

    SetAceDropDown();

    var width = 152;
    for (var i = 0; i < consClients.length; i++) {
        let ele = document.createElement('span')
        ele.innerText = consClients[i].Name;
        ele.style.fontSize = '14px';
        document.documentElement.append(ele);
        var charLength = ele.offsetWidth + 28;//滚动条
        document.documentElement.removeChild(ele);
        if (charLength > width) {
            width = charLength
        }
    }

    //if (!page.isGFSM) {
    //    let autoClient = FastVue.autocomplete(document.getElementById('ClientId'), {
    //        nameField: 'Name', valueField: 'id', searchField: ['Name', 'PinYin'], width: width,
    //        lookup: consClients, onSelect: vue.changeClient
    //    });
    //    let clientId = page.clientMarginTemplate.ClientId;
    //    let client = clientId ? consClients.find(x => x.id === clientId) : null;
    //    !client && page.isAdd && (client = consClients[0]);
    //    autoClient.setData(client);
    //    vue.changeClient(client);
    //}
   
});

var vueDetail = new Vue({
    el: "#myModal",
    data: {
        detail: {},
        backupDetail: {},
        isAdd: true,
        ruleType: 0,
    },
    created: function () {
    },
    methods: {
        closeModal: function () {
            $('#myModal').modal('hide');
        }
    },
    components: {
        'vue-datepicker': FastVue.vueDatePicker(),
        'vue-number-input': FastVue.vueNumberInput()
    }
});