<script>
    window.nav = new Vue({
        data: {
            activeIndex: 'home',
            contextPath: '${contextPath?default("")}',
            homePath: '${homePath?default("")}',
            tip: {
                show: function (msg) {
                    if(msg) {
                        this.$indicator.open(msg);
                    }else {
                        this.$indicator.open();
                    }
                },
                close: function () {
                    this.$indicator.close();
                }
            },
        },
        methods: {
            i: function (message, callback) {
                this.$toast({
                    message: message,
                    position: 'middle',
                    duration: 3000
                });
                setTimeout(callback, 3000)
            },
            alert: function (message, callback) {
                this.$messageBox.alert(message, "").then(callback);
            },
            confirm: function (message, callback) {
                this.$messageBox.confirm(message, "").then(callback);
            }
        }
    });

    Vue.component('wb-field-select', {
        data: function () {
            return {
                selectValue: '',
                popupVisible: false,
                clearVisible: false,
                slots: [{
                    values: this.items
                }],
            }
        },
        computed: {
            currentValue: {
                get: function () {
                    return this.value;
                },
                set: function (value) {
                    this.$emit('input', value);
                    value ? this.clearVisible = true : this.clearVisible = false;
                }
            }
        },
        methods: {
            onSelect: function () {
                this.popupVisible = true;
                if (!this.value) {
                    this.currentValue = this.items[0];
                }
            },
            onClear: function () {
                this.currentValue = '';
            },
            onValuesChange: function (picker, values) {
                if (this.popupVisible) {
                    this.currentValue = picker.getValues(0)[0];
                }
            },

        },
        props: ['value', 'label', 'placeholder', 'items'],
        template: '' +
        '<a class="mint-cell mint-field"><!---->' +
        ' <div class="mint-cell-wrapper">' +
        '  <div class="mint-cell-title"><!----><span class="mint-cell-text">{{label}}</span><!----></div>' +
        '  <div class="mint-cell-value">' +
        '   <input :placeholder="placeholder" @click="onSelect" readonly v-model="currentValue" class="mint-field-core">' +
        '   <div class="mint-field-clear" v-if="clearVisible" @click="onClear"><i class="mintui mintui-field-error"></i></div>' +
        '  </div>' +
        ' </div>' +
        ' <mt-popup style="width: 100%" v-model="popupVisible" position="bottom"><mt-picker :slots="slots" @change="onValuesChange"></mt-picker></mt-popup>' +
        '</a>'
    });

    Vue.component('wb-field-dict', {
        data: function () {
            return {
                selectValue: '',
                popupVisible: false,
                clearVisible: false,
                slots: [{
                    values: this.items
                }],
            }
        },
        computed: {
            currentValue: {
                get: function () {
                    return this.value;
                },
                set: function (value) {
                    this.$emit('input', value);
                    value ? this.clearVisible = true : this.clearVisible = false;
                }
            }
        },
        created: function () {
            this.items.forEach(function (item) {
                item.keyValue = "[" + item.key + "]" + item.value;
            })
        },
        methods: {
            onSelect: function () {
                this.popupVisible = true;
                if (!this.value) {
                    this.currentValue = "[" + this.items[0].key + "]" + this.items[0].value;
                }
            },
            onClear: function () {
                this.currentValue = '';
            },
            onValuesChange: function (picker, values) {
                if (this.popupVisible) {
                    this.currentValue = "[" + picker.getValues(0)[0].key + "]" + picker.getValues(0)[0].value;
                }
            }
        },
        props: ['value', 'label', 'placeholder', 'items'],
        template: '' +
        '<a class="mint-cell mint-field"><!---->' +
        ' <div class="mint-cell-wrapper">' +
        '  <div class="mint-cell-title"><!----><span class="mint-cell-text">{{label}}</span><!----></div>' +
        '  <div class="mint-cell-value">' +
        '   <input :placeholder="placeholder" @click="onSelect" readonly v-model="currentValue" class="mint-field-core">' +
        '   <div class="mint-field-clear" v-if="clearVisible" @click="onClear"><i class="mintui mintui-field-error"></i></div>' +
        '  </div>' +
        ' </div>' +
        ' <mt-popup style="width: 100%" v-model="popupVisible" position="bottom"><mt-picker :slots="slots" valueKey="keyValue" @change="onValuesChange"></mt-picker></mt-popup>' +
        '</a>'
    });

    Vue.component('wb-field-date', {
        data: function () {
            var startDate = new Date();
            startDate.setFullYear(1990, 0, 1);
            return {
                selectValue: '',
                clearVisible: false,
                startDate:startDate
            }
        },
        computed: {
            currentValue: {
                get: function () {
                    return this.value;
                },
                set: function (value) {
                    this.$emit('input', value);
                    value ? this.clearVisible = true : this.clearVisible = false;
                }
            }
        },
        methods: {
            onSelect: function () {
                this.$refs.picker.open();
            },
            onClear: function () {
                this.currentValue = '';
            },
            onConfirm: function (value) {
                this.currentValue = value.format("yyyy-MM-dd")
            }
        },
        props: ['value', 'label', 'placeholder', 'items'],
        template: '' +
        '<a class="mint-cell mint-field"><!---->' +
        ' <div class="mint-cell-wrapper">' +
        '  <div class="mint-cell-title"><!----><span class="mint-cell-text">{{label}}</span><!----></div>' +
        '  <div class="mint-cell-value">' +
        '   <input :placeholder="placeholder" @click="onSelect" readonly v-model="currentValue" class="mint-field-core">' +
        '   <div class="mint-field-clear" v-if="clearVisible" @click="onClear"><i class="mintui mintui-field-error"></i></div>' +
        '  </div>' +
        ' </div>' +
        ' <mt-datetime-picker ref="picker" type="date" :startDate="startDate" v-model="selectValue" @confirm="onConfirm" year-format="{value}" month-format="{value}" date-format="{value}"></mt-datetime-picker>' +
        '</a>'
    });

    Vue.component('wb-field-time', {
        data: function () {
            return {
                selectValue: '',
                clearVisible: false,
            }
        },
        computed: {
            currentValue: {
                get: function () {
                    return this.value;
                },
                set: function (value) {
                    this.$emit('input', value);
                    value ? this.clearVisible = true : this.clearVisible = false;
                }
            }
        },
        methods: {
            onSelect: function () {
                this.$refs.picker.open();
            },
            onClear: function () {
                this.currentValue = '';
            },
            onConfirm: function (value) {
                this.currentValue = value;
            }
        },
        props: ['value', 'label', 'placeholder', 'items'],
        template: '' +
        '<a class="mint-cell mint-field"><!---->' +
        ' <div class="mint-cell-wrapper">' +
        '  <div class="mint-cell-title"><!----><span class="mint-cell-text">{{label}}</span><!----></div>' +
        '  <div class="mint-cell-value">' +
        '   <input :placeholder="placeholder" @click="onSelect" readonly v-model="currentValue" class="mint-field-core">' +
        '   <div class="mint-field-clear" v-if="clearVisible" @click="onClear"><i class="mintui mintui-field-error"></i></div>' +
        '  </div>' +
        ' </div>' +
        ' <mt-datetime-picker ref="picker" type="time" v-model="selectValue" @confirm="onConfirm" year-format="{value}" month-format="{value}" date-format="{value}"></mt-datetime-picker>' +
        '</a>'
    });

    Vue.component('wb-field-datetime', {
        data: function () {
            return {
                selectValue: '',
                clearVisible: false,
            }
        },
        computed: {
            currentValue: {
                get: function () {
                    return this.value;
                },
                set: function (value) {
                    this.$emit('input', value);
                    value ? this.clearVisible = true : this.clearVisible = false;
                }
            }
        },
        methods: {
            onSelect: function () {
                this.$refs.picker.open();
            },
            onClear: function () {
                this.currentValue = '';
            },
            onConfirm: function (value) {
                this.currentValue = value.format("yyyy-MM-dd hh:mm")
            }
        },
        props: ['value', 'label', 'placeholder', 'items'],
        template: '' +
        '<a class="mint-cell mint-field"><!---->' +
        ' <div class="mint-cell-wrapper">' +
        '  <div class="mint-cell-title"><!----><span class="mint-cell-text">{{label}}</span><!----></div>' +
        '  <div class="mint-cell-value">' +
        '   <input :placeholder="placeholder" @click="onSelect" readonly v-model="currentValue" class="mint-field-core">' +
        '   <div class="mint-field-clear" v-if="clearVisible" @click="onClear"><i class="mintui mintui-field-error"></i></div>' +
        '  </div>' +
        ' </div>' +
        ' <mt-datetime-picker ref="picker" type="datetime" v-model="selectValue" @confirm="onConfirm" year-format="{value}" month-format="{value}" date-format="{value}"></mt-datetime-picker>' +
        '</a>'
    });

    Vue.component('wb-field-cphm', {
        data: function () {
            return {
                prefixData: [
                    {
                        key: '',
                        value: '京',
                        children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'Y']
                    },
                    {
                        key: '',
                        value: '津',
                        children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R']
                    },
                    {key: '', value: '冀', children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'O', 'R', 'T']},
                    {key: '', value: '晋', children: ['A', 'B', 'C', 'D', 'E', 'F', 'H', 'J', 'K', 'L', 'M']},
                    {key: '', value: '蒙', children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M']},
                    {
                        key: '',
                        value: '辽',
                        children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P']
                    },
                    {key: '', value: '吉', children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K']},
                    {
                        key: '',
                        value: '黑',
                        children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'R']
                    },
                    {
                        key: '',
                        value: '沪',
                        children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'AX', 'BX', 'DX']
                    },
                    {
                        key: '',
                        value: '苏',
                        children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'U']
                    },
                    {key: '', value: '浙', children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L']},
                    {
                        key: '',
                        value: '皖',
                        children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'R', 'S']
                    },
                    {key: '', value: '闽', children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K']},
                    {key: '', value: '赣', children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'S']},
                    {
                        key: '',
                        value: '鲁',
                        children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'U', 'V', 'W', 'Y']
                    },
                    {
                        key: '',
                        value: '豫',
                        children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'U']
                    },
                    {
                        key: '',
                        value: '鄂',
                        children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'AW']
                    },
                    {
                        key: '',
                        value: '湘',
                        children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'S', 'U']
                    },
                    {
                        key: '',
                        value: '粤',
                        children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
                    },
                    {
                        key: '',
                        value: '桂',
                        children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'R']
                    },
                    {key: '', value: '琼', children: ['A', 'B', 'C', 'D', 'E', 'F']},
                    {key: '', value: '渝', children: ['A', 'B', 'C', 'D', 'F', 'G', 'H', 'N']},
                    {
                        key: '',
                        value: '川',
                        children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
                    },
                    {key: '', value: '贵', children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J']},
                    {
                        key: '',
                        value: '云',
                        children: ['A', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S']
                    },
                    {key: '', value: '藏', children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J']},
                    {key: '', value: '陕', children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'V']},
                    {
                        key: '',
                        value: '甘',
                        children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P']
                    },
                    {key: '', value: '青', children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']},
                    {key: '', value: '宁', children: ['A', 'B', 'C', 'D', 'E']},
                    {
                        key: '',
                        value: '新',
                        children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'S']
                    }
                ],
                popupVisible: false,
                clearVisible: false,
                slots: [{
                    values: [],
                    defaultIndex: 9,
                    className: 'slot1'
                }, {
                    divider: true,
                    content: '',
                    className: 'slot2'
                }, {
                    values: [],
                    defaultIndex: 11,
                    className: 'slot3'
                }],
            }
        },
        created: function () {
            if (!this.value) {//当model为空时初始化前缀
                this.$emit('input', this.prefixData[this.slots[0].defaultIndex].value + this.prefixData[this.slots[0].defaultIndex].children[this.slots[2].defaultIndex]);
            }
            this.slots[0].values = this.getSlot1();
            this.slots[2].values = this.getSlot3(this.prefixData[0].value);
        },
        computed: {
            prefix: {
                get: function () {
                    return this.value.slice(0, 2);
                },
                set: function (value) {
                    this.$emit('input', value + this.value.slice(2, this.value.length));
                }
            },
            subfix: {
                get: function () {
                    return this.value.slice(2, this.value.length);
                },
                set: function (value) {
                    this.$emit('input', this.value.slice(0, 2) + value);
                    value ? this.clearVisible = true : this.clearVisible = false;
                }
            }
        },
        methods: {
            onSelect: function () {
                this.popupVisible = true;
            },
            getSlot1: function () {
                var items = [];
                this.prefixData.forEach(function (item) {
                    items.push(item.value);
                });
                return items;
            },
            getSlot3: function (value) {
                for (var i in this.prefixData) {
                    if (value == this.prefixData[i].value) {
                        return this.prefixData[i].children;
                    }
                }
                return []
            },
            onClear: function () {
                this.subfix = '';
            },
            onValuesChange: function (picker, values) {
                if (this.popupVisible) {
                    picker.setSlotValues(1, this.getSlot3(values[0]));
                    this.prefix = picker.getSlotValue(0) + picker.getSlotValue(1)
                }
            }
        },
        props: ['value', 'label', 'placeholder', 'items'],
        template: '' +
        '<a class="mint-cell mint-field"><!---->' +
        ' <div class="mint-cell-wrapper">' +
        '  <div class="mint-cell-title"><!----><span class="mint-cell-text">{{label}}</span><!----></div>' +
        '  <div class="mint-cell-value">' +
        '   <span @click="onSelect" style="padding-right: 5px;color:#47d3ff;line-height: 1.6">{{prefix}}</span>' +
        '   <input :placeholder="placeholder" maxlength="6" v-model="subfix" class="mint-field-core">' +
        '   <div class="mint-field-clear" v-if="clearVisible" @click="onClear"><i class="mintui mintui-field-error"></i></div>' +
        '  </div>' +
        ' </div>' +
        ' <mt-popup style="width: 100%" v-model="popupVisible" position="bottom"><mt-picker ref="picker" :slots="slots" @change="onValuesChange"></mt-picker></mt-popup>' +
        '</a>'
    });

    Vue.component('wb-field-pictures', {
        data: function () {
            return {
                fileList: []
            }
        },

        methods: {
            onClear: function (item) {
                this.fileList.remove(item);
            },
            onValuesChange: function (picker, values) {
                if (this.popupVisible) {
                    picker.setSlotValues(1, this.getSlot3(values[0]));
                    this.prefix = picker.getSlotValue(0) + picker.getSlotValue(1)
                }
            },
            onTakePicture: function () {
                this.fileList.push({
                    name: '',
                    file: ''
                })
                setTimeout(function () {
                    this.$refs.input[this.fileList.length - 1].click();
                }.bind(this), 1)
            },
            onChange: function (e, file) {
                file.file = e.target.files[0]
                file.name = e.target.files[0].name;
                this.$emit("handle-file", file, {
                    finish: function () {
                        this.$emit("input", this.fileList)
                    }.bind(this),
                    cancel: function () {
                        this.fileList.remove(file);
                        this.$emit("input", this.fileList)
                    }.bind(this)
                });
            },

        },
        props: ['value', 'label'],
        template: '' +
        '<a class="mint-cell mint-field"><!---->' +
        ' <div class="mint-cell-wrapper">' +
        '  <div class="mint-cell-title"><!----><span class="mint-cell-text">{{label}}</span><!----></div>' +
        '  <div class="mint-cell-value">' +
        '   <div style="padding-top: 11px;padding-bottom: 11px;text-align: left;width: 100%">' +
        '    <mt-button type="primary" size="small" @click="onTakePicture">添加</mt-button>' +
        '    <div style="line-height: 35px;" v-for="item in fileList" v-show="item.name">' +
        '     <span class="mint-field-clear" style="padding-right: 10px;" @click="onClear(item)"><i class="mintui mintui-field-error"></i></span><!---->' +
        '     <a>{{item.name}}</a><!---->' +
        '     <input ref="input" @change="onChange($event,item)" type="file" style="display: none"/>' +
        '    </div>' +
        '   </div>' +
        '  </div>' +
        ' </div>' +
        '</a>'
    });
</script>