{extend name="common/plugin_layout" /}
{block name="title"}{$plugin.title} - {:config_get('title')}{/block}
{block name="main"}
<div class="container-xl" id="app">
<div class="col-sm-12 col-md-10 col-xl-8 center-block">
    <div class="card card-preview">
        <div class="card-inner mt-3">
            <div class="nya-title nk-ibx-action-item progress-rating">
                <span class="nk-menu-text font-weight-bold">短视频去水印解析</span>
            </div>
            <div class="form-group">
                <div class="input-group input-group-lg">
                    <div class="input-group-prepend"><span class="input-group-text">视频链接</span></div>
                    <input type="text" v-model="input" class="form-control" value="" placeholder="" @keyup.enter="query" ref="input" autocomplete="off">
                </div>
            </div>
            <button class="btn btn-dim btn-outline-primary btn-block btn-lg mb-3" @click="query" :disabled="query_disabled">
                提交
            </button>
        </div>
    </div>
    <div class="card card-preview" v-show="showresult" style="display:none">
        <div class="card-inner mt-3">
            <div class="nya-title nk-ibx-action-item progress-rating">
                <span class="nk-menu-text font-weight-bold">视频信息</span>
            </div>
                <table class="table table-hover table-bordered">
                    <tbody>
                        <tr><td class="query-title">视频标题</td><td class="query-result">{{result_info.title}}</td></tr>
                        <tr v-show="result_info.desc"><td class="query-title">视频描述</td><td class="query-result">{{result_info.desc}}</td></tr>
                        <tr v-show="result_info.author"><td class="query-title">视频作者</td><td class="query-result">{{result_info.author}} &nbsp; <a v-show="result_info.avatar" :href="result_info.avatar" target="_blank" rel="noreferrer"><em class="icon ni ni-img"></em></a></tr>
                        <tr v-show="result_info.time"><td class="query-title">发布时间</td><td class="query-result">{{result_info.time}}</td></tr>
                        <tr v-show="result_info.cover"><td class="query-title">视频封面</td><td class="query-result"><a :href="result_info.cover" class="btn btn-sm btn-outline-info" target="_blank" rel="noreferrer">点击查看</a> &nbsp; <a @click="copy(result_info.cover)" class="btn btn-sm btn-outline-warning" href="JavaScript:;">点此复制</a></td></tr>
                        <tr v-show="result_info.url"><td class="query-title">视频链接</td><td class="query-result"><a :href="result_info.url" class="btn btn-sm btn-outline-info" target="_blank" rel="noreferrer">点击查看</a> &nbsp; <a @click="copy(result_info.url)" class="btn btn-sm btn-outline-warning" href="JavaScript:;">点此复制</a></td></tr>
                        <tr v-show="result_info.images"><td class="query-title">图片链接</td><td class="query-result">
                            <div v-for="(item, index) in result_info.images" :key="index" style="margin-bottom:5px;">
                                <a :href="item" class="btn btn-sm btn-outline-info" target="_blank" rel="noreferrer">图片{{index+1}}查看</a> &nbsp; <a @click="copy(item)" class="btn btn-sm btn-outline-warning" href="JavaScript:;">点此复制</a>
                            </div>
                        </td></tr>
                    </tbody>
                </table>
        </div>
    </div>
    <div class="card card-preview">
        <div class="card-inner">
            <h6><em class="icon ni ni-info"></em> 工具说明</h6>
            <div class="accordion-inner">
                <p>本工具可解析短视频去除水印的下载链接。<br/>已支持的视频平台：抖音、头条、快手、微博、小红书、微视、虎牙、全民K歌、Acfun等</p>
            </div>
        </div>
    </div>
    </div>
</div>
</div>
{/block}
{block name="script"}
<script src="{$cdn_cdnjs}vue/2.6.14/vue.min.js"></script>
<script src="https://static.geetest.com/v4/gt4.js"></script>
<script>
new Vue({
    el: '#app',
    data: {
        query_disabled: true,
        input: '',
        longurl: '',
        showresult: false,
        result_info: {
            link: '',
            title: '',
            desc: '',
            author: '',
            time: '',
            cover: '',
            url: ''
        },
        captcha: null
    },
    mounted() {
        this.$refs.input.focus();
        var that=this;
        initGeetest4({
            captchaId: "99b142aaece96330d0f3ffb565ffb3ef",
            product: 'bind',
            protocol: 'https://',
            riskType: 'ai',
        },function (captcha) {
            captcha.onReady(function(){
                that.query_disabled=false;
                that.captcha = captcha;
            }).onSuccess(function(){
                var result = captcha.getValidate();
                if (!result) {
                    layer.closeAll();
                    return alert('请先完成验证');
                }
                var data = { video_url: that.input};
                $.ajax({
                    url: '/api/{$plugin.alias}/query',
                    type: 'post',
                    dataType: 'json',
                    data: Object.assign(data, result),
                    cache: false,
                    success: function (data) {
                        layer.closeAll();
                        if(data.code==0){
                            that.result_info = data.data;
                            that.showresult = true;
                            captcha.reset();
                        }else{
                            layer.alert(data.msg, {icon: 5});
                            captcha.reset();
                        }
                    },
                    error: function () {
                        layer.closeAll();
                        layer.msg('服务器错误', {icon: 5});
                        captcha.reset();
                    }
                });
            }).onError(function(){
                alert('验证码加载失败，请刷新页面重试');
            })
        });
    },
    methods: {
        query() {
            var video_url = this.input;
            if(video_url.trim() == ''){
                layer.alert('视频链接不能为空');return;
            }
            if(video_url.indexOf('http://')>=0){
                var video_url = 'http://' + video_url.split('http://')[1].split(' ')[0].split('，')[0];
            }else if(video_url.indexOf('https://')>=0){
                var video_url = 'https://' + video_url.split('https://')[1].split(' ')[0].split('，')[0];
            }else{
                layer.alert('视频链接输入错误');return;
            }
            this.input = video_url;
            this.showresult = false;
            layer.load(0, {shade:0.1});
            this.captcha.showCaptcha();
        },
        copy(text) {
            copy(text);
            layer.msg('复制成功', {icon:1, time:600})
        },
    },
})
</script>
{/block}