<template>
    <div>
        <input ref="input" type="text" style="visibility: hidden; position: absolute;" :value="currentValue" />
        <a ref="link" :href="src"><img ref="img" style="height:32px;" :src="src" /></a>
        <br />
        <button ref="btn" class="btn btn-sm btn-default" type="button" id="btn_Image" style="margin-top:5px;">上传</button>
    </div>
</template>
<script>
    export default {
        props: ['name', 'value', 'data'],
        data: function () {
            return {
                currentValue: this.value
            };
        },
        watch: {
            currentValue(val) {
                this.$emit('update:value', val);
                this.$emit('change', this.name);
            }
        },
        mounted: function () {
            var vm = this;
            $(this.$refs.link).fancybox();
            var editor = KindEditor.editor({
                allowImageUpload: true,
                formatUploadUrl: false,
                uploadJson: vm.uploadUrl
            });
            $(this.$refs.btn).click(function () {
                editor.loadPlugin('insertfile', function () {
                    editor.plugin.fileDialog({
                        fileUrl: vm.src,
                        clickFn: function (url, title) {
                            //$(vm.$refs.input).attr('value', url);
                            ////if (isRequired) {
                            ////    $('#' + id).parents('form').validate().element('#' + id);
                            ////}
                            //$(vm.$refs.link).attr('href', vm.baseUrl + url);
                            //$(vm.$refs.img).attr('src', vm.baseUrl + url);
                            vm.currentValue = url;
                            vm.$emit('change', vm.name);
                            editor.hideDialog();
                        }
                    });
                });
            });
        },
        computed: {
            src: function () {
                return this.currentValue || '/images/empty.svg';
            }
        }
    };</script>
