<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>这可能是世界上最好的图床</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="这可能是世界上最好的图床，没有之一">
    <meta name="description" content="这可能是世界上最好的图床，没有之一">
    <link rel="stylesheet" type="text/css" th:href="@{/lib/webuploader/css/webuploader.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/lib/webuploader/css/style.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/lib/iview/styles/iview.css}">
    <style type="text/css">
        [v-cloak] {
             display: none;
        }
    </style>
</head>
<body>
    <div id="wrapper" v-cloak>
        <div id="container">
            <!--头部，相册选择和格式选择-->
            <div id="uploader">
                <div class="queueList">
                    <div id="dndArea" class="placeholder">
                        <div id="filePicker"></div>
                        <p>或将照片拖到这里，单次最多可选5张</p>
                    </div>
                </div>
                <div class="statusBar" style="display:none;">
                    <div class="progress">
                        <span class="text">0%</span>
                        <span class="percentage"></span>
                    </div><div class="info"></div>
                    <div class="btns">
                        <div id="filePicker2"></div><div class="uploadBtn">开始上传</div>
                    </div>
                </div>
            </div>
        </div>
        <template v-show="flag" style="margin-top:20px;">
            <tabs @on-click="tab($event)">
                <tab-pane icon="ios-link" v-for="item in images"  label="图片地址"></tab-pane>
            </tabs>
        </template>
        <div style="margin-top:20px;" v-show="flag">
            <i-form :label-width="120">
                <Form-item label="URL：" style="width:60%">
                    <i-input  v-model="image.URL" id="URL" style="width: 500px"></i-input>
                    <i-button data-clipboard-target="#URL" class="btn" @click="copy('URL')" type="primary">复制</i-button>
                    <i-button class="btn" @click="preview()" type="primary">访问</i-button>
                </Form-item>
                <Form-item v-show="false" label="AliYunOss" style="width:60%">
                    <i-input  v-model="image.AliYunOss"  id="AliYunOss" style="width: 500px"></i-input> <i-button data-clipboard-target="#AliYunOss" class="btn" @click="copy('AliYunOss')" type="primary">复制</i-button>
                </Form-item>
                <Form-item label="MinIo:" style="width:60%">
                    <i-input  v-model="image.MinIo"  id="MinIo" style="width: 500px"></i-input> <i-button data-clipboard-target="#MinIo" class="btn" @click="copy('MinIo')" type="primary">复制</i-button>
                </Form-item>
                <Form-item label="HTML：" style="width:60%">
                    <i-input  v-model="image.HTML" id="HTML" style="width: 500px"></i-input> <i-button data-clipboard-target="#HTML" class="btn" @click="copy('HTML')" type="primary">复制</i-button>
                </Form-item>
                <Form-item label="Markdown：" style="width:60%">
                    <i-input  v-model="image.Markdown"  id="Markdown" style="width: 500px"></i-input> <i-button data-clipboard-target="#Markdown" class="btn" @click="copy('Markdown')" type="primary">复制</i-button>
                </Form-item>
            </i-form>
        </div>
    </div>
    <script type="text/javascript" th:src="@{/lib/common/jquery.js}"></script>
    <script type="text/javascript" th:src="@{/lib/vue/vue.min.js}"></script>
    <script type="text/javascript" th:src="@{/lib/iview/iview.min.js}"></script>
    <script type="text/javascript" th:src="@{/lib/webuploader/js/webuploader.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/upload.js}"></script>
    <script type="text/javascript" th:src="@{/lib/clipboard/clipboard.min.js}"></script>
    <script>
         new ClipboardJS('.btn');
         var vm = new Vue({
	    	el : '#wrapper',
	    	data:{
	    	    flag:false,
	    	    images:[],
	    	    image:{
	    	        URL:'',
	    	        AliYunOss:'',
	    	        MinIo:'',
	    	        HTML:'',
	    	        Markdown:''
	    	    },
	    	    index:0,
	    	},
            methods : {
                copy:function(type){
                    this.$Notice.success({
                        title: '复制成功',
                        desc:'小伙伴，赶紧尝试一下吧'
                    });
                },
                showUrl:function(response){
                    var code = JSON.parse(response._raw).code;
                    var msg = JSON.parse(response._raw).msg;
                    if(code=="500"){
                         this.$Notice.warning({
                            title: '警告！！！',
                            desc:msg
                         });
                    }else{
                        var imagePath = msg.imagePath;
                        var url = window.location.protocol+"//"+window.location.host+"/";
                        var image = {};
                        image.URL = url+imagePath;
                        image.MinIo = "http://minio.cloudbed.vip/"+imagePath;
                        image.HTML = "<img src = '"+image.URL+"' />";
                        image.Markdown = "![]("+image.URL+")";
                        vm.images.push(image);
                        if(vm.image.URL==""){
                            vm.tab(0);
                        }
                        vm.flag = true;
                    }
                },
                preview:function(){
                    top.window.open(vm.images[vm.index].URL);
                },
                tab:function(item){
                    vm.index = item;
                    vm.image.URL = vm.images[item].URL;
                    vm.image.AliYunOss = vm.images[item].AliYunOss;
                    vm.image.HTML = vm.images[item].HTML;
                    vm.image.MinIo = vm.images[item].MinIo;
                    vm.image.Markdown = vm.images[item].Markdown;
                }
            },
            created : function() {

	    	}
         });
    </script>
</body>
</html>
