{extend name="common/plugin_layout" /}
{block name="title"}{$plugin.title} - {:config_get('title')}{/block}
{block name="main"}
<style>
.query-title {
    text-align: right;
}
.table-title th{word-break: keep-all;}
</style>
<div class="container-xl" id="app">
<div class="col-md-12 col-xl-10 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">ICP备案查询</span>
            </div>
            <div class="form-group row">
                <div class="col-12 col-sm-4 col-md-3">
                    <label class="form-label">查询类型：</label>
                    <select id="query-type" class="form-control form-control-lg" v-model="query_type">
                        <option value="web">域名</option>
                        <option value="app">App</option>
                        <option value="mapp">小程序</option>
                        <option value="kapp">快应用</option>
                    </select>
                </div>
                <div class="col-12 col-sm-8 col-md-9 mt-3 mt-sm-0">
                <label class="form-label">查询内容：</label>
                <div class="form-control-wrap">
                    <input type="text" v-model="input" placeholder="请输入域名、程序名称、备案主体或备案号" class="form-control form-control-lg" @keyup.enter="query" ref="input" autocomplete="off">
                </div>
                </div>
            </div>
            <button class="btn btn-dim btn-outline-primary btn-block card-link 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>
            <div class="alert alert-warning text-center" v-if="result_total==0"><h6><em class="icon ni ni-info"></em> 没有查询到备案记录</h6></div>
            <div v-if="result_total==1">
                <h6>域名 <span class="text-primary">{{result_info.domain}}</span> 的信息：</h6>
                <div class="table-responsive">
                <table class="table table-hover table-bordered">
                    <tbody>
                        <tr><td class="query-title">{{service_name}}</td><td>{{result_info.domain}}</td></tr>
                        <tr><td class="query-title">ICP备案/许可证号</td><td>{{result_info.webLicence}}</td></tr>
                        <tr><td class="query-title">主办单位名称</td><td>{{result_info.unitName}}</td></tr>
                        <tr><td class="query-title">主办单位性质</td><td>{{result_info.unitType}}</td></tr>
                        <tr><td class="query-title">审核日期</td><td>{{result_info.updateTime}}</td></tr>
                        <tr><td class="query-title">网站前置审批项</td><td>{{result_info.contentTypeName}}</td></tr>
                    </tbody>
                </table>
                </div>
            </div>
            <div v-if="result_total>1">
                <h6><span class="text-primary">{{result_input}}</span> 共查询到 <span class="text-primary">{{result_total}}</span> 条备案信息：</h6>
                <div class="table-responsive">
                <table class="table table-hover table-bordered">
                    <thead class="table-title">
                        <th>{{service_name}}</th><th>ICP备案/许可证号</th><th>主办单位名称</th><th>审核日期</th><th>操作</th>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in result_list" :key="index">
                            <td>{{item.domain}}</td><td>{{item.webLicence}}</td><td>{{item.unitName}}</td><td>{{item.updateTime}}</td><td><button class="btn btn-dim btn-outline-info btn-xs" @click="show_item(index)">详情</button></td>
                        </tr>
                    </tbody>
                </table>
                </div>
                <p v-if="result_total>10" class="text-info">当前只支持查询最新10条记录，剩余记录请使用域名或程序名称进行精确查询。</p>
            </div>
        </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>支持输入域名、程序名称、网站备案号、主体备案号、单位名称（个人姓名、企业名称）进行查询</p>
                <p>此ICP查询工具直接对接工信部官网，非第三方接口。采用开源项目<a href="https://github.com/HG-ha/ICP_Query" target="_blank">ICP_Query</a></p>
            </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: '',
        query_type: 'web',
        result_input: '',
        showresult: false,
        result_info: {
            id: '',
            domain: '',
            mainLicence: '',
            webLicence: '',
            unitName: '',
            unitType: '',
            updateTime: '',
            contentTypeName: '',
        },
        service_name: '网站域名',
        result_list: [],
        result_total: 0,
        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;
                var searchdomain = getQueryString('domain');
                if(searchdomain!=null){
                    that.input = searchdomain;
                    that.query()
                }
            }).onSuccess(function(){
                var result = captcha.getValidate();
                if (!result) {
                    layer.closeAll();
                    return alert('请先完成验证');
                }
                var data = {domain: that.input, type: that.query_type};
                $.ajax({
                    url: '/api/{$plugin.alias}/query',
                    type: 'post',
                    dataType: 'json',
                    data: Object.assign(data, result),
                    cache: false,
                    success: function (data) {
                        layer.closeAll();
                        if(data.status=='ok'){
                            var data = data.data;
                            that.result_input = that.input;
                            that.showresult = true;
                            that.result_total = data.total;
                            that.result_list = data.list;
                            if(data.list.length > 0){
                                that.result_info = data.list[0];
                            }
                            if(that.query_type=='web' || that.query_type=='bweb'){
                                that.service_name = '网站域名';
                            }else if(that.query_type=='app' || that.query_type=='bapp'){
                                that.service_name = 'App名称';
                            }else if(that.query_type=='mapp' || that.query_type=='bmapp'){
                                that.service_name = '小程序名称';
                            }else if(that.query_type=='kapp' || that.query_type=='bkapp'){
                                that.service_name = '快应用名称';
                            }
                            captcha.reset();
                        }else{
                            alert(data.message);
                            captcha.reset();
                        }
                    },
                    error: function () {
                        layer.closeAll();
                        layer.msg('服务器错误', {icon: 5});
                        captcha.reset();
                    }
                });
            }).onError(function(){
                alert('验证码加载失败，请刷新页面重试');
            })
        });
    },
    methods: {
        checkURL()
        {
            var url = this.input.trim();
            if (url.indexOf(" ")>=0){
                url = url.replace(/ /g,"");
            }
            if (url.toLowerCase().indexOf("http://")==0){
                url = url.slice(7);
            }
            if (url.toLowerCase().indexOf("https://")==0){
                url = url.slice(8);
            }
            if (url.slice(url.length-1)=="/"){
                url = url.slice(0,url.length-1);
            }
            if (url.toLowerCase().indexOf("www.")==0){
                url = url.slice(4);
            }
            this.input = url;
        },
        query() {
            this.checkURL();
            if(this.input == ''){
                alert('查询内容不能为空');return;
            }
            layer.load(0, {shade:0.1});
            this.captcha.showCaptcha();
        },
        show_item(index){
            this.result_info = this.result_list[index];
            this.result_total = 1;
        }
    },
})
</script>
{/block}